Working with Images

Edit

Improvements?

Let us know by posting here.

Using Imagine Image Library with Images

Concrete CMS includes the Imagine Image Processing Library, a PHP OOP library for image manipulation. Access Imagine in Concrete through the Image class:

$imagine = \Image::open('/path/to/image.jpg');

You now have an \Imagine\Image\ImageInterface instance. More details in Imagine's documentation.

For Concrete File objects:

$file = File::getByID(3);
$version = $file->getApprovedVersion();
$resource = $version->getFileResource();
$image = Image::load($resource->read());

Example: Transforming and Saving an Image Version

$portrait = File::getByID(10);
$version = $file->getVersionToModify(true); // Retrieves a new version
$resource = $version->getFileResource();
$image = Image::load($resource->read());

$image->effects()->negative()->gamma(1.3); // Manipulating the image

$version->updateContents($image->get()); // Updating the image

The file version is now updated with the modified image.

Working with Image Thumbnails

Thumbnail types are defined in the Dashboard. When large enough images are uploaded into the File Manager, matching thumbnails are automatically created. These thumbnails are useful beyond just responsive themes, allowing custom development for image galleries and more. They are auto-generated to your specifications and support overrides via the Concrete Image Editor.

Using Custom Thumbnails in Gallery Blocks

To display custom thumbnails (100x100 pixels) in an image gallery:

$type = \Concrete\Core\File\Image\Thumbnail\Type\Type::getByHandle('gallery');
foreach($images as $file) {
    if (is_object($file)) {
        $src = $file->getThumbnailURL($type->getBaseVersion());
        echo '<div class="thumbnail">';
        echo "<img src=\"$src\" alt=\"{$file->getTitle()}\" width=\"{$type->getWidth()}\" height=\"{$type->getHeight()}\">";
        echo '</div>';
    }    
}

Retrieve the gallery thumbnail type and for each File object, use its thumbnail URL. The base version of the thumbnail type is used here, but a doubled version for Retina displays is also available. This approach avoids the drawbacks of previous methods:

  • Performance: Thumbnails are generated at upload or rescan, enhancing page load speed.
  • Flexibility: If an auto-created image isn't suitable, edit it via the File Manager Image Editor for a perfect fit.

This method makes creating image galleries in Concrete efficient and customizable.