Problem with a Portfolio

Kirby 2 Solved ✅
1

Good Morning Kirby Family…

at this moment i’m gonna play a bit whit the structure method and i’m trying to do this on a simple portfolio.
here is my code:

blueprint file:

portfolioitems:
      label: Portfolio Items
      type:  line
  portfolio:
    label: Portfolio Images
    type: structure
    entry: >
      {{image}}: {{projectname}} - ({{projecttitle}}) - ({{demoimage}})  
    fields:
      image:
        label: Full Image
        type: image
      demoimage:
        label: Demo Image
        type:  image  
      projectname:
        label: Project Name
        type: text
      projecttitle:
        label: Project Title
        type: text

my portfolio.php snippet:

  <?php $portfolio = $page->portfolio()->toStructure(); ?>
  <?php foreach($portfolio as $portfolio): ?>
<div class="row">
      <div class="portfolio-items">
        <div class="col-sm-6 col-md-4 lorem">
          <div class="portfolio-item">
          <?php if($image = $portfolio->demoimage()->toFile()): ?>
            <div class="hover-bg"> <a href="<?php  echo $image->url() ?>" title="<?php echo $portfolio->projectname() ?>" data-lightbox-gallery="gallery1">
          <?php endif ?>
              <div class="hover-text">
                <div class="overlay-caption">
                  <div class="overlay-content">
                    <h4>Project Name</h4>
                  </div>
                </div>
              </div>
              <?php if($image = $portfolio->image()->toFile()): ?>
              <img src="<?php  echo $image->url() ?>" class="img-responsive" alt="<?php echo $portfolio->projecttitle() ?>"> </a> </div>
            <?php endif ?>
          </div>
        </div>
         </div>
        </div>
      </div>
    </div>
  </div>
<?php endforeach; ?>
</div>

and in the template:

<!-- Portfolio Section -->
<div id="portfolio">
  <div class="container">
    <div class="section-title">
      <h2><?= $page->portfolioheading()->html() ?></h2>
    </div>
    <?= snippet('portfolio') ?>
    </div>
    </div>

my problem is that the images have a wrong position it has to look like that:

image.png637×898 680 KB

but my result is that:

bilder.png1601×911 467 KB

do you have any ideas what i do wrong?. the template that i use for that is Focus from templatewire

have a nice sunday :blush: :sunny:

2

I think the problem has more to do with the css/js code rather then the php/kirby one.
You probably need a masonry script or, if you don’t care about the order of the images you can wrap the photos in columns.

3

but i’m not sure what exactly it is, JS or CSS.

what exactly you mean?.

4

You can’t achieve that type of layout using only css (except in one particular case).
You need to use JS in order to position the images correctly.

The are quite a few libraries to do that.

http://minigrid.js.org


http://masonry.desandro.com/
http://salvattore.com/

The site you linked for example uses Isotope.

5

Agreed re the “masonry” script. The alternative would be to do 3 columns place images 1, 4, 7, 10 in the first column, images 2, 5, 8, 11 in the second, and images 3, 6, 9, 12 in the third. But if the aspect ratios change a lot, columns may have noticeably different heights. And that’s not a responsive approach either (though CSS Grid + media queries would let you do that in a responsive fashion).

So yeah, a “masonry”-like script is probably your best bet. Personally, I like Salvattore because it avoids absolute positioning (which can create issues in scripts like Masonry or Isotope).

By the way, you were very far from the intending rendring because you included this part in the loop:

<div class="row">
    <div class="portfolio-items">
    …
    </div>
</div>

So you were basically creating a new row for each image, instead of putting all image blocks as columns in a single row.

1 Like
6

and how exactly can i include them ? :confused: i doesent really have experience whit JS

7

I just got an idea from your reply.
Let’s see if I can make this thing work :slight_smile:

8

I’m gonna try a another way to learn the structure method, but thanks a lot for you replys @manuelmoreale and @fvsch :blush:. have a good sunday

9

Get some, or hire someone who does. :wink:

1 Like
10

@fvsch ah a little question! for example if i create a structure field in my blueprint, what exactly does entry: ?, is that important? or can i ignore this?.

11

Entry template

You can use the entry option to define how the entries will be displayed in the list view. The syntax for entry templates is very simple. Double curly brackets define a variable and will be replaced with the appropriate content.

https://getkirby.com/docs/cheatsheet/panel-fields/structure

1 Like
12

thanks a lot!! :blush: