Page list with new thumbnail system

Developing with Concrete
1

Hi there,

I’m using the new thumbnail system and I like it a lot. But the page_list block doesn’t support it. How do I add this? I’ve tried a few things but I’m lost. The code below is what I use to load images into the template.

<?php
  $img = $c->getAttribute('thumbnail_news');
  if ($img !== null) {
    $imgVersion = $img->getVersion();
    $thumbnailURL = $imgVersion->getThumbnailURL('thumbnail_news_hero');
  ?>
  <img src="<?= $thumbnailURL ?>">
<?php
}
   ?>

But the page_list block uses this to load the thumbnail

        if ($displayThumbnail) {
                    $thumbnail = $page->getAttribute('thumbnail_news');
                }

<?php if (is_object($thumbnail)) {
                        ?>
                        <div class="ccm-block-page-list-page-entry-thumbnail">
                            <?php
                            $img = Core::make('html/image', ['f' => $thumbnail]);
                            $tag = $img->getTag();
                            $tag->addClass('img-fluid');
                            echo $tag; ?>
                        </div>
                        <?php
                    } ?>
2

Should that not be <img src="<?= $thumbnailURL ?>"> without the closing bracket?

3

Yeah it should, my bad. I copied the code with a div and in-line css background, changed it to a HTML image for easier reading. Good catch!

4

The $imgVersion in the first example is equal to the $thumbnail in the second example, so you should be able to make whatever changes you want based on that.

1 Like
6

Thank you, you’ve set me on the right path and got it working! Changing the code below is working correctly.

                    <?php if (is_object($thumbnail)) {
                        ?>
                        <div class="ccm-block-page-list-page-entry-thumbnail">

                            <?php
                            $imgVersion = $thumbnail->getVersion();
                            $thumbnailURL = $imgVersion->getThumbnailURL('thumbnail_news_square');
                            ?>
                              <img src="<?= $thumbnailURL ?>">
                        </div>
                        <?php
                    } ?>
1 Like
7

Actually this assumption is not correct. The page_list block uses the image helper which uses the new thumbnail system depending on the situation.

If your theme defines image sizes for screen sizes using the getThemeResponsiveImageMap() method in the page_theme class then the image helper will use that to generate thumbnails using the new thumbnail system (well not so new anymore…)

Look for how the elemental theme does it for instance.

If you don’t define those then the helper will just use the old thumbnailer.

8

I’m gonna look into that, thanks for explaining!