How to enable cover image on the front-end?

ravivasavan · August 23, 2016, 11:03am

Hi hello. I am still learning Kirby as I develop my own site based off a template that I created previously. I am having issues with connecting new field in Blueprint to the front-end bit.

Thanks in advance for your help!

http://www.practice.studio/src/

Project Blueprint

title: Project
pages: true
files:
  sortable: true
fields:
  title:
    label: Title
    type:  text
  year:
    label: Year
    type:  text
  text:
    label: Text
    type:  textarea
  tags:
    label: Tags
    type:  tags
  coverImage:
    label: Cover Image
    type: image

Projects Snippet

<div id="projects">

    <div class="grid"></div><div class="gutter"></div>
    
    <?php foreach($projects as $project): ?>
        
        <div class="thumbs">
            <a class="thumbs-info" href="<?php echo $project->url() ?>">
                <span class="thumbs-tag"><?php echo $project->tags() ?></span>
                <span class="thumbs-title"><?php echo $project->title()->html() ?></span>
            </a>
            
            <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): ?>
            
                <a href="<?php echo $project->url() ?>">
                    <img src="<?php echo $image->resize(1280,null,70)->url() ?>" alt="<?php echo $project->title()->html() ?>" >
                </a>
            
            <?php endif ?>
        
        </div>
        
    <?php endforeach ?>

</div>

texnixe · August 23, 2016, 11:31am

You mean, instead of fetching the first image, you want to get the cover image? Then you can do it like this:

<?php if($image = $project->coverImage()->toFile()): ?>
  // rest of code
<?php endif ?>

ravivasavan · August 23, 2016, 11:35am

You understood me perfectly despite the haziness of my question. That worked like a charm, thanks man.

ravivasavan · August 23, 2016, 11:45am

Actually, I might piggyback on this question for another issue I am trying to figure out.

I want to make an exception from the masonry I set up for posts that only has one image to show, e.g. http://www.practice.studio/src/projects/001

I can sort of understand what needs doing but can’t code it up myself, basically I need to make an if statement that would disable masonry (or refer to 100% grid width) if there is only one image. Is this possible with the current state of code I have, or would I need to set up something new?

Project snippet

<div class="project-info">
    <h3><?php echo $page->title()->html() ?></h3>
    <text><?php echo $page->text()->kirbytext() ?></text>
</div>
    
<div id="images">    
    
    <div class="grid"></div><div class="gutter"></div>
    
    <?php 
    $projectPages = page('projects')->children()->visible();
    $projectImages = $projectPages->files();
    
    foreach($page->images()->sortBy('sort', 'asc') as $image):
    ?>
    
    <div class="images">    
        <img src="<?php echo $image->url() ?>">
    </div>
    
    <?php endforeach ?>
    
</div>

texnixe · August 23, 2016, 11:51am

I think the easiest way would be to just give the grid a second class, something like 'single-image", and then exclude this class from your masonry call?

$('.grid:not(.single-image)').masonry({
  // options
});

ravivasavan · August 23, 2016, 11:58am

Unfortunately I am not sure if I follow. Above solution would be JS focused, meaning I’ll need to modify my main.js file, yeah?

texnixe · August 23, 2016, 12:00pm

Right, both your JS file, where you make the masonry call, and the snippet where you add the class depending on whether or not the page has a cover image.

ravivasavan · August 23, 2016, 12:08pm

I’m lost as this is not related to cover image at all.

I’ll try rephrasing my question.

Project with multiple images uploaded: http://www.practice.studio/src/projects/bowen-arico
Project with single image uploaded: http://www.practice.studio/src/projects/20160822

You can see that masonry is enabled for both, what I’d like to figure out is to how stop masonry being applied to projects that only has one image.

Files/code associated to this:

main.js

$(document).ready(function() {

    // init Masonry for Index
    var $grid = $('#projects').masonry({
      columnWidth: '.grid',
      itemSelector: '.thumbs',
      percentPosition: true,
      gutter: 0,
    });
    
    // init Masonry for Project
    var $grid = $('#images').masonry({
      columnWidth: '.grid',
      itemSelector: '.images',
      percentPosition: true,
      gutter: 0,
    });

    // layout Masonry after each image loads
    $grid.imagesLoaded().progress( function() {
      $grid.masonry('layout');
    });
    
    // Initializie infinite scroll

    var ias = jQuery.ias({
      container:  '#projects',
      item:       '.thumbs',
      pagination: '#pagination',
      next:       '.next',
      delay: 0
    });

    ias.extension(new IASSpinnerExtension({
      html: '<div class="ias-wrapper"><div class="ias-spinner" style="text-align: center; position: absolute; bottom: 2em; left: 50%; transform: translateX(-50%) translateY(100%);"></div></div>',
    }));

    // Hide new items while they load + relayout masonry when new items are added

    ias.on('render', function(items) {
      $(items).css({ opacity: 0 });
    });

    // Append new items to exisiting masonry grid


    ias.on('rendered', function(items) {
      $grid.imagesLoaded( function() {
        $grid.masonry( 'appended', items )
      });
    });
  
});

project.php snippet

<div class="project-info">
    <h3><?php echo $page->title()->html() ?></h3>
    <text><?php echo $page->text()->kirbytext() ?></text>
</div>
    
<div id="images">    
    
    <div class="grid"></div><div class="gutter"></div>
    
    <?php 
    $projectPages = page('projects')->children()->visible();
    $projectImages = $projectPages->files();
    
    foreach($page->images()->sortBy('sort', 'asc') as $image):
    ?>
    
    <div class="images">    
        <img src="<?php echo $image->url() ?>">
    </div>
    
    <?php endforeach ?>
    
</div>

Sorry for the hassle! Hope I’ll understand and be able to get it running correctly after next round of answer.

texnixe · August 23, 2016, 12:18pm

Ok, thanks for clarifying, this should work then:

In your snippet, add the class to the element you are calling the masonry function on (#images).

<div class="project-info">
    <h3><?php echo $page->title()->html() ?></h3>
    <text><?php echo $page->text()->kirbytext() ?></text>
</div>
<div id="images" <?php e($page->images()->count() == 1, 'class="single-image"', '') ?>>    
    <div class="grid"></div><div class="gutter"></div>
    <?php 
    $projectPages = page('projects')->children()->visible();
    $projectImages = $projectPages->files();
    foreach($page->images()->sortBy('sort', 'asc') as $image):
    ?>
    <div class="images">    
        <img src="<?php echo $image->url() ?>">
    </div>
    <?php endforeach ?>
</div>

In your js, exclude all divs with class “single-image”:

var $grid = $('#images:not(.single-image)').masonry({
  columnWidth: '.grid',
  itemSelector: '.images',
  percentPosition: true,
  gutter: 0,
});
```

ravivasavan · August 23, 2016, 1:10pm

Ah, I can see how it works out. Though I did try implementing, it came back with an error which is visible on http://www.practice.studio/src/projects/20160822

Warning:  count() expects at least 1 parameter, 0 given in /home/ravivasavan/practice.studio/src/site/snippets/project.php on line 6

philipp · August 23, 2016, 1:20pm

replace this with ->count() that should do the trick.

ravivasavan · August 23, 2016, 1:28pm

Nice, the error is now gone. Can’t believe I didn’t catch that missing >.

Now to figure out why it’s not firing right yet. Maybe I need to do some CSS!

philipp · August 23, 2016, 1:43pm

You mean the overlapping images on your frontpage?

Maybe this fixes your issue.

// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.masonry('layout');
});

Because it looks like, the masonry does not adjust correctly to loading images. Only after page-resize it places the images at the right position…

EDIT nevermind, all included in your main.js did’t see that ;D

ravivasavan · August 23, 2016, 1:48pm

Haha no problems.

The actual issue is that I wanted projects with multiple images to be 2 columns (grid set at 50%) as previously set up but now it’s 1 column (grid set at 100%).

Example:

http://www.practice.studio/src/projects/001 - this page is meant to be 100% as there is only 1 image for the project.

http://www.practice.studio/src/projects/bowen-arico - this page is meant to be showing the 50% grid as there are more than 1 image.

I thought the solution above would help with that. Feel like I am missing something here.

philipp · August 23, 2016, 2:03pm

Check your markup.

This might be the problem or one of them…

<div class="grid"></div><div class="gutter"></div>

Should be

<div class="grid">
  <div class="gutter">
    <?php 
      $projectPages = page('projects')->children()->visible();
      $projectImages = $projectPages->files();
      foreach($page->images()->sortBy('sort', 'asc') as $image):
    ?>
      <div class="images">    
        <img src="<?php echo $image->url() ?>">
      </div>
    <?php endforeach ?>
  </div>
</div>

Btw. nice art

ravivasavan · August 23, 2016, 2:16pm

Thanks man, I’m a-ok designer/art director and a terrible developer.

With your help and some mad editing at my end, got it all working.

Single image: http://www.practice.studio/src/projects/osaka
Multiple images: http://www.practice.studio/src/projects/bowen-arico

Now to fix the imagesLoaded issue, if you can spot my errors there, let me know as I haven’t really used imagesLoaded in the past!

After that, the site is 99% done. The 1% is to re-do all of the images, haha.

philipp · August 23, 2016, 2:27pm

Check you other pages for the same mistake

ravivasavan · August 23, 2016, 2:31pm

As stated previously, I am a terrible developer.

Fixed that for the projects snippet. It should behave better now, onto figuring out infinite scroll with ias.js

Topic		Replies	Views
File blueprint template issue	3	20	August 21, 2024
Can't figure out how to display cover image Solved ✅	22	3276	March 27, 2023
Can't access field "Cover" Solved ✅	6	869	February 12, 2019
Image query: page.cover not working / only working with specific blueprint name? Solved ✅	2	1551	February 22, 2019
Select image from a custom image field? Solved ✅	15	6426	June 2, 2016

How to enable cover image on the front-end?

Related topics