mothership-ec/cog-imageresize

Dynamic URI-based image resize functionality for Cog

Image Resize

Resize Class and Controller

The Resizer can be accessed using the service image.resize:, _(*1)

$this->get('image.resize')->resize($url);

The Resize-class has two important methods:, _(*2)

• generateUrl($url, $width, $height) - Generates a url consisting of the file-name, width, height and a hash which will be the later location of the file. The $url is the publically accessible path to the image we want to resize. Urls generated by this method could look something like this: resize_directory/test_AUTOx400-de46b9.jpg
• resize($url) - Does the actual resizing, returns the resized file and saves it in the location defined by $url. The $url passed in is a the url generated by generateUrl().

This means, when we have an image called test.jpg, which is saved in cog:://public/files, this is how we could resize it:, _(*3)

$resizer = $this->get('image.resize');
$url = $resizer->generateUrl('/files/test.jpg', null, 400); // you can leave out either height or width!
$resizedImg = $resizer->resize($url);

We go the way of generating the url because that allows us to controll the behaviour with a controller: When we want to render a resized image in a view, we can pass in the generated $url as src-attribute. What will happen is, the first time the image is requested, the router will call the image resize controller, which will resize the image, save it to the new destination and return the image. After that the image already exists and can requested as any other image., _(*4)

This is handy especially when used together with the twig extension., _(*5)

Twig Extension

There are two methods which allow us to access the generateUrl()-method the ImageResize\Resize-class provides:, _(*6)

• getResizedUrl(ResizableInterface $file, $width, $height) - Returns the result of Resizer::generateUrl using the getUrl()-method the ResizableInterface defines:, _(*7)

  <img src="{{ getResizedUrl(file, 500, 200) }}" width="500" height="200" alt="file.altText">

• getResizedImage(ResizableInterface $file, $width, $height, $attributes = array()) - Returns the rendered <img>-tag including src, width, height, alt(using ResizableInterface's getAltText()-method) and additional attributes using the $attributes-array:, _(*8)

  {# file->getUrl() = '/test.jpg' #}
  {# file->getAltText() = 'test' #}
  
  {{ getResizedImage(file, 500, 200, {'class': 'file'}) }}

  Which will render, _(*9)

  <img src="/test_500x200-88953b.jpg" width="500" height="200" alt="test" class="file">

  If the $attributes-array provides an alt-attribute, instead of using file's getAltText() to determine the alt-text, $attributes['alt'] will be shown:, _(*10)

  {{ getResizedImage(file, 500, 200, {'alt': 'abcabc'}) }}

  This will return this:, _(*11)

  <img src="/test_500x200-88953b.jpg" width="500" height="200" alt="abcabc">

Default Image

If the $url passed to the resize-method is not the path to an existing file in the system, a default-image is resized instead., _(*12)

This default image can be configured in config/app.yml:, _(*13)

image-resize:
    default-image-path: cogules/MyApp:SetUp/images/default.png

The generateUrl method looks up the file and if it doesn't exist it returns the url to the default image. That way only one image for each size is generated and the correct resized image can be generated as soon as a file is uploaded to the server., _(*14)