Forums

How to add thumbnail image to page?

Permalink
Say I upload a really large image and want to use something like the Image block to display one of the generated thumbnails rather than the full size image... how would I do that?
ob7dev
 
MrKDilkington replied on at Permalink Best Answer Reply
MrKDilkington
Hi ob7dev,

At the moment, you can't directly select a thumbnail image through the image selector widget.

An alternative is creating an Image block custom template. In the Image block view, the selected image's file object is set as $f. You can then use $f to get the src of a thumbnail.

Example:
if (is_object($f)) {
    $type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('small');
    if ($type) {
        $src = $f->getThumbnailURL($type->getBaseVersion());
        // build the img tag manually
        echo '<img src="' . $src . '" class="my-image-class" alt="' . $f->getTitle() . '" >';
        // use HtmlObject\Image to create the img tag
        echo HtmlObject\Image::create($src)
            ->class('my-image-class')
            ->alt($f->getTitle());
    }
}

This approach requires that you know the handle of your thumbnail in advance.

Another approach might be creating a custom/forked image block that makes an AJAX request to retrieve the available thumbnails.
- you select an image
- after selection, the form block makes an AJAX request to a controller, sending it the selected image file ID
- the controller uses the image file ID to get its thumbnails
- the controller could return an array of thumbnail names and their width and/or height
- the array would be used to create a select drop-down in the form so you can select a specific thumbnail