We've recently started using concrete5's thumbnail editing feature with great results. In this video we demo this feature and show how to use it in your concrete5 development.

How to output a pre-defined thumbnail

The following code would be used on a page template file, within a custom theme:

<?php
// fetch the current page
$page = Page::getCurrentPage();

// fetch the file/image page attribute
$bi = $page->getAttribute('banner_image');

// check if file object returned
if (is_object($bi)) {
	// fetch specific thumbnail version from file, passing in handle of thumbnail type
	$src = $bi->getThumbnailURL('banner');
	
	// output image tag
	echo '<img src="'. $src . '" />';
}
?>

Pretty easy hey?

The logic would be the same if you needed to do the same in a page list or elsewhere - just fetch the attribute from the page object and ask for its thumbnail using the thumbnail type handle.

For more information, see the documentation page regarding working with thumbnails.

Bonus tip - inheriting attributes from parent pages

In the video I used some simplified code to explain how to use thumbnails, this code only looked at the current page to find the banner image: it wouldn't output anything if the attribute wasn't set.

In reality, it would be quite annoying to have to specify a banner image for every new page we created on the site. We made it smarter than that - so our production code is as follows:

<?php
$page = Page::getCurrentPage();
$bi = $page->getAttribute('banner_image');

$style = '';

if (!$bi) {
	$parent = Page::getByID($page->getCollectionParentID());
	if ($parent) {
		$bi = $parent->getAttribute('banner_image');
	}
}

if (!$bi) {
	$grandparent = Page::getByID($parent->getCollectionParentID());
	if ($grandparent) {
		$bi = $grandparent->getAttribute('banner_image');
	}
}

if (!$bi) {
	$grandparent = Page::getByID($grandparent->getCollectionParentID());
	if ($grandparent) {
		$bi = $grandparent->getAttribute('banner_image');
	}
}

if (is_object($bi)) {
	$src = $bi->getThumbnailURL('banner');
	$style = ' style="background-image: url('. $src. ')"';
}
?>
		
<div class="banner-image" <?php echo $style; ?>>
..... (rest of template)

What this code does is if it doesn't find a banner image file for the current page, it looks to the parent page. Again, if it doesn't find a file It repeats looking a page level up. It does this a few times to work back up the sitemap. If there is a more elegant way to do this, please leave a comment!

With this code in place child pages inherit the attribute/banner image of its parent page - this is a great way to automatically visually connect sections of a site, whilst still having the ability to customise each page as desired.

-Ryan