Page thumbnails, how to?

Developing with Concrete
1

Hi there,

I’m trying to get the a thumbnail working with a custom attribute. But I’m a bit lost on how the thumbnail attribute in Dashboard → System and settings - > Thumbnails, is working. I’ve set a custom thumbnail there with the size I want and a handle. But how do I assign that attribute to a page? It does not show up in the attributes list. And when I create a custom attribute with the same handle, it does not change the size of the image. What am I missing or doing wrong?

This is the code I use to load the thumbnail into the page template

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

Look at /dashboard/pages/attributes. You should have an image/file attribute set up there with the handle ‘thumbnail_news’ for this to work. The attribute can then be applied to pages…

3

Thanks for the reply. I did just that but the uploaded images was still full size instead for the resized version. Could it be a cache issue?

5 
$type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle($thumbnailHandle);
$f = \Concrete\Core\File\File::getByID($c->getAttribute($attributeHandle));
$src = $f->getThumbnailURL($type->getBaseVersion());

// $image = "<img src=\"{$src}\" width=\"100%\" alt=\"\" />";
// $image = "<img src=\"{$src}\" width=\"{$type->getWidth()}\" height=\"{$type->getHeight()}\" alt=\"\" />";
}
6

Another idea.
If you are getting original image url, even with providing correct thumbnail handle, then maybe thumbnail is not generated at all.

On Concrete 9 o to File Manager and click “…” after hovering file to show image “Details”.
Click “Thumbnails” to see if they are actually created.
If not Click “Rescan”.
If thumbnails are still not created, then probably your uploaded image is too big and your server doesn’t have enough memory to be able to generate it. In that case replace image with smaller version.

You can enable browser-side resizing during upload in dashboard:
/dashboard/system/files/image_uploading
Set with and height to something sane, like 1920 x 1080 px and your server should handle images flawlessly.

7

I’ve checked the image and the correct thumbnail is generated so that is working. I’m just still confused how to get the uploaded image selected as the correct attribute for the individual page. So what I did is the following:

  1. Set a thumbnail in dashboard → system → thumbnails with handle ‘thumbnail_news’
  2. Created a image attribute in dashboard → pages & themes → attributes with handle ‘thumbnail_news’
  3. Uploaded a image trough the attributes settings of a page
  4. Checked if the uploaded image has indeed a thumbnail generated in the file system, which is true
  5. Used the code in original post to load in the image
  6. Checken the source shows it does not use the thumbnail source file but the original uploaded version.

So I have two problems I’m trying to figure out.

  1. How can I solve the issue that it does use the correct thumbnail version
  2. How can I use this method to load different thumbnail sizes based on that 1 attribute. (1 size for a page list and 1 for a hero image on the page itself)
8

Can you please explain this a bit more and how to use this method in practical terms?

I used an other method in previous builds, before using V9, but that does not work anymore.

      <?php
      $imgHelper = Loader::helper('image');
      if ($c->getAttribute('thumbnail_news')) {
         $image = $imgHelper->getThumbnail($c->getAttribute('thumbnail_news'), 900, 999, false)->src;
      }
       ?>
9

I’ve solved the issue. The original code was wrong. The version was set to ‘small’ which I did not create. Changing that to the ‘news_thumbnail’ did the trick. This is also the method of using different sizes for it.

One last question; how can I load/use the retina version that gets generated?
Solved: Using the ‘_2x’ behind the handle name will use the retina version.