Can't get cover from builder in post gallery

[inperez]

Hi again! I have a question on something that has been bugging me the las couple of days:

I was just implementing a blueprint for a single project inside a ‘projects’ folder. Everything works fine in the front-end for each project —its a slider implementation where @texnixe gave me a hand the other day —, the thing is I need to have almost all those fields inside the builder so I can insert them in the slider.

Now I am in the need to create a post (thumbnail) gallery where later I plan to use with Isotope filters on. I’ve not been able to get the ‘coverimage’ in the loop, in fact, nothing shows in the projects pages besides its title and text (it’s based on the kirby starterkit projects page).

I’ve tried some solutions that seem similar to my problem with no luck .

Here is my actual blueprint for the single project page, maybe it’s still a mess hahaha, but all the fields work ok, some are not displayed correctly on the panel, but doesn’t matter for now:

title: Single Project
template: single-project
files:true
...

fields:

  title:
    label: Title
    type:  text

 builder:
    label: Sections
    type: builder
    fieldsets:
      coverimage:
        label: Imagen Portada
        snippet: sections/coverimage
        fields:
            picture:
                label: Imagen
                type: image
            text:
                label: Título Proyecto
                type: text
      bodytext:
        label: Párrafo
        snippet: sections/bodytext
        fields:
          text:
            label: Texto
            type: textarea
      imageBanner:
        label: Imagen
        snippet: sections/imagebanner
        fields:
          picture:
            label: Imagen
            type: image
      ficha:
        label: Ficha Técnica
        snippet: sections/ficha
        fields:
          architects:
            label: Architects
            type: text
          team:
            label: Team
            type: text
          client:
            label: Client
            type: text
          strengineering:
            label: Structural Engineering
            type: text
          techinspection:
            label: Technical Inspection
            type: text
          structure:
            label: Structure
            type: text
          interiors:
            label: Interiors
            type: text
          photography:
            label: Photography
            type: text
          sitearea:
            label: Site Area
            type: text
          builtarea:
            label: Built Area
            type: text
          completion:
            label: Completion
            type: text

This is the last snippet I tried, based on this post:

How to enable cover image on the front-end?

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…

<ul class="teaser cf">
    <?php foreach(page('projects')->children() as $project): ?>
        <li>
            <h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>
            <?php if($image = $project->coverimage()->toFile()): ?>
                <a href="<?php echo $project->url() ?>">
                <img src="<?php echo $image->url() ?>" alt="<?php echo $project->title()->html() ?>" >
    </a>
                <?php endif ?>
        </li>
        <?php endforeach ?>
</ul>

Any guidance will be appreciated!

Thank you very much!

Cheers,

[Thiousi]

Looking at your blueprint, the image you’re trying to access is the picture field of the coverimage fieldset.
The builder plugin uses fieldsets to differentiate the type of entries. In your case you want to loop through the fieldsets in your $project pages and select only the coverimage fieldset.
Next, the image is selected in the field “picture” inside that fieldset. So you need to adapt your code to select that.

Here’s code I haven’t tested but that should work for your case. Let us know if you hit any roadblocks! For others ending up here looking for guidance on how to use the builder field, the documentation on Github is actually quite comprehensive.

<ul class="teaser cf">
  <?php foreach(page('projects')->children() as $project): ?>
    <?php foreach($project->builder()->toStructure() as $section): ?>
    <?php if($section->_fieldset() != 'coverimage') continue ?>
    <li>
      <h3><a href="<?php echo $project->url() ?>"><?php echo $project->title()->html() ?></a></h3>
      <?php if($coverimage = $section->picture()->toFile()): ?>
        <a href="<?php echo $project->url() ?>">
          <img src="<?php echo $coverimage->url() ?>" alt="<?php echo $project->title()->html() ?>" >
        </a>
      <?php endif ?>
    </li>
    <?php endforeach ?>
  <?php endforeach ?>
</ul>

[inperez]

Hi @Thiousi! Thank you for your answer and explanation of it!

I tested the code above, it didn’t work. May I mention, the snippet was located directly in the ‘snippets’ folder and called in a ‘projects.php’ template file as <?php snippet('projects') ?> .

I also just tried moving it inside the sections subfolder (as recommended by the docs) and calling it from the subfolder with no luck either

[Thiousi]

Can you detail what you had as a result? It’s helpful to explain:

• if you turned debugging on
• what was the outcome
• have you tried copying the code from the snippet directly to your template?

We’re going to find a solution

Note: the expected outcome of the code above is to list all the children of the projects page.

• For each children, the title of the page is displayed in a link to the page
• Then if the page has a builder field, with a coverimage fieldset, with a valid image selected in the picture field, this image will be displayed (within a link to the project page and the title of the project page as an alt text).

[texnixe]

Do you pass the $sectionvariable to the snippet as explained in the builder documentation?

[inperez]

Hi @Thiousi! Sorry for the delay, been busy this couple of days!

I’ll answer each detail:

• I turned the debug mode on, but no new php errors can be seen on the log.
• The outcome was… nothing, nothing is shown after the main text…
• Yes! I have tried copying the code directly to the template, also with nothing visible showing.

Hi @texnixe!

You mean like this in the template page?:

<?php foreach($page->builder()->toStructure() as $section): ?>
    <?php snippet('projects' . $section->_fieldset(), array('data' => $section)) ?>
<?php endforeach ?>

I’m still getting the hang of this, so I need to ask these newbie questions.

What else should be the cause? Maybe this is a classic “EBKAC”.

Thank you all for the help! I can provide every other detail you may need, I really want to learn from this !

[texnixe]

@inperez

<?php foreach($page->builder()->toStructure() as $section): ?>
<?php snippet(‘projects’ . $section->_fieldset(), array(‘data’ => $section)) ?>
<?php endforeach ?>

Yes, that’s what I meant .

When you say there is nothing after the main text, have you checked the source code to see what exactly gets rendered? Is no part of the whole snippet rendered, not even the ul tags?

[inperez]

Hi @texnixe!

Yes, that is the first thing I check when modifying the code, not event the ul tags get rendered, here is a screenshot of what the inspector shows:

After the main container starts the footer where at the moment I have no content. The ul should be just below the div with text.

[texnixe]

Have you put your snippets into the sections subfolder in /templates? Then your code should be like this, i.g. sections instead of projects as the folder name, and also the slash is missing from your code above:

<?php foreach($page->builder()->toStructure() as $section): ?>
  <?php snippet('sections/' . $section->_fieldset(), array('data' => $section)) ?>
<?php endforeach ?>

[inperez]

Hi everybody! Finally got it working!

I went several steps back looking for what could be the problem. At the end it was a misconfiguration on the site.php blueprint where it was forcing the default one (Title + Text), just as @texnixe explained in this post many days ago → Bydefault redirected to default template

Since the site blueprint was forcing the content created in the “Projects” page, all the text files were named “default.txt”, so I changed them to their corresponding name and the thumbnails showed up, in this case while testing with the snippet that @Thiousi posted here, since the correct blueprint and template for projects were being applied.

So, the lesson I learned with this issue: Always check the site.php —and the .txt filenames—, especially if you are working with the Kirby starterkit. (I am leaving it posted in case someone gets the same problem in the future).

In the end it’s kind of a rookie mistake, but a setting that many people may ignore.

Thank you all for your time and help !!!

Cheers!