Thumbnails

Skip to end of metadata
Go to start of metadata

pimcore offers an advanced thumbnail-service also called "image-pipeline". It allows you to transform images in unlimited steps to the expected result. You can configure them in "Settings -> Thumbnails".

With this service every image which is stored in "Assets" can be transformed. pimcore doesn't support to modify images which are not stored as an asset inside pimcore.

IMPORTANT: Use imagick PECL extension for best results, GDlib is just a fallback with limited functionality (only PNG, JPG, GIF) and less quality!
Using ImageMagick pimcore supports hundreds of formats including: AI, EPS, TIFF, PNG, JPG, GIF, PSD, ...

To use the thumbnailing service of pimcore, you have to create a transformation pipeline first. To do so, open Settings -> Thumbnails, and click on "Add Thumbnail" to create a new configuration.
The fields name, description, format and quality should be clear, interesting are now the transformations. Click on + to add a new transformation, so that it look like that for example:

Important: The transformations are performed in the order from the top to the bottom. This is for example important in the configuration above, if the you first round the corners this would be performed on the original image, and then the image will get resized, so the rounded corners are also resized. 

To retrieve a thumbnail from an asses simply call $asset->getThumbnail() on the asset object, this will return you the path to the thumbnail file beginning from the document root, for example: /website/var/tmp/thumb_65contentimages.png
This path can then be directly used to display the image in a <img /> tag. For example:

<?php
    // get an asset
    $asset = Asset::getById(1234);
?>


<?php if ($asset) { ?>
   <img src="<?php echo $asset->getThumbnail("myThumbnailName") ?>" />
<?php } ?>

Explanation of the transformations

Transformation Description Configuration Result
ORIGINAL IMAGE This is the image which is used in the following transformations NONE ;-)
RESIZE The image is exactly resized to the given dimensions without respecting the ratio.
SCALE BY HEIGHT The image is scaled respecting the ratio to the given height, the width is variable
depending on the original ratio of the image (portrait, landscape).

SCALE BY WIDTH The image is scaled respecting the ratio to the given width, the heightis variable
depending on the original ratio of the image (portrait, landscape).

CONTAIN The image is scaled to either the given height or the width, depending on the
ratio of the original image. That means that the image is scaled to fit into a "virtual" box with the 
dimensions given in the configuration.

CROP Cuts out a box of the image starting at the given X,Y coordinates and using the width and height.
COVER The image is resized so that it completly covers the given dimensions.
Then the overlapping pieces are cropped depending on the given positioning. 
This is useful if you need a fixed size for a thumbnail but the source images have different ratios.

FRAME The transformation is the same as CONTAIN the difference is, that the image gets exactly the
entered dimensions by adding transparent borders left / right or top / bottom.


ROTATE Rotates the image with the given angle. The background is transparent by default.

BACKGROUND COLOR Background color is especially useful if you have transparent PNG as source data or if you're using 
the FRAME or the ROTATE transformations where you get transparencies. It allows you to give 
transparencies a color, and gives you the possibilty to use them for examples JPEG's which doesn't
support transparency.
ROUNDED CORNERS Rounds the corners to the given width/height.

Usage Examples

<?php // Use with the image tag in documents ?>
<div>
    <p>
        <?php echo $this->image("image", array("thumbnail" => "myThumbnail")) ?>
    </p>
</div>


<?php // Use directly on the asset object ?>
<?php

$asset = Asset::getByPath("/path/to/image.jpg");
$pathToImageThumb = $asset->getThumbnail("myThumbnail");

?>

<?php // Use without preconfigured thumbnail ?>
<?php echo $this->image("image", array("thumbnail" => array(
    "width" => 500,
    "height" => 0,
    "aspectratio" => true,
    "interlace" => true,
    "quality" => 95,
    "format" => "PNG"
))) ?>

<?php // Use from an object-field ?>
<?php if ($this->myObject->getMyImage() instanceof Asset_Image) { ?>
    <img src="<?php echo $this->myObject->getMyImage()->getThumbnail("myThumbnail"); ?>" />
<?php } ?>


// where "myThumbnail" is the name of the thumbnail configuration in settings -> thumbnails

Using ICC Color Profiles for CMYK -> RGB 

pimcore supports ICC color profiles to get better results when converting CMYK images (without embedded color profile) to RGB.

Due licensing issues pimcore doesn't include the color profiles (*.icc files) in the download package, but you can download them for free here: Adobe ICC Profiles or here: ICC (color.org)

After downloading the profiles put them into your /website folder or anywhere else on your sever (eg. /usr/share/color/icc).

Then go to the pimcore system settings, open the assets section and configure the path to your favorite color profile: 

Labels

images images Delete
thumbnails thumbnails Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.