#9

Product support

Visit this product's website for support.

Categories

  • Utility

Provides Twig filter to easily resize an image to the required dimensions. Example:

{{ '/path/to/image.jpg' | resize(250, 100) }}

Features

  • Provides Twig filter to easily resize images
  • Reduces image file size, optimizing page speed
  • Doesn't require any additional large image manipulation libraries
  • Caches resized images for improved speed
  • Usage in PHP available
  • Usage in Backend list available
  • Works with the fileupload and mediafinder plugin field types, can be used on general site images pretty much anywhere and works with other plugins, e.g. Static page plugin, October Blog, etc with no extra changes required.
  • Displays a customizable image not found if the image doesn't exist
  • Provides greater control over how an image is rendered.
  • Optional integratration with Tiny PNG to further compress images

Planned features

  • Testing with AmazonS3 to ensure this works as expected
  • Option to prevent width of image being greater than the width of the screen
  • Option to serve retina version of image
  • Option to prevent tinypng compression via 3rd parameter options
  • Please add additional requests to Github or Support forum

Other plugins to check out

The following themes use this plugin:

Image Resize Examples

Please use documentation located at https://github.com/toughdeveloper/oc-imageresizer-plugin

Introduction

Resizes an image to the required dimensions. It accepts a string with a file path to the image or a October\Rain\Database\Attach\File object (you will have one of these if you have used the attachOne or AttachMany relationship)

Please note, the not found image can be overwritten via the settings in the admin area.

Using a string

Please note, if the filter alters the URL, you must apply resize afterwards

{{ 'assets/graphics/background.jpg' | theme | resize(500,500) }}

Using a variable

{{ property.image | resize(500) }}

With more options

See list of options below

{{ property.image | resize(500, false, { mode: 'crop', quality: '80', extension: 'png' }) }}
Key Description Default Options
mode How the image should be fitted to dimensions auto exact, portrait, landscape, auto, crop
offset Offset the resized image [0,0] [int, int]
extension The extension on the image to return auto auto, jpg, jpeg, gif, png
quality The quality of compression *requires cache clear 95 0-100
sharpen Sharpen the image across a scale of 0 - 100 *requires cache clear 0 0-100

Usage in PHP

The image resizer can also be used easily in PHP, as follows:

use ToughDeveloper\ImageResizer\Classes\Image;

$image = new Image('/path/to/image.jpg');
$image->resize(150, 200, [ 'mode' => 'crop' ]);

Usage in Backend List

The image resizer can also be used on backend lists with the type of thumb, e.g.

image:
    label: Image
    type: thumb
    sortable: false

This works with:

  • AttachMany (uses first image) Docs
  • AttachOne Docs
  • Mediafinder Docs

You can also optionally pass width (default 50), height (default 50) and options as follows:

image:
    label: Image
    type: thumb
    sortable: false
    width: 75
    height: 100
    options:
        mode: crop
  • Found the plugin useful on 16 Sep, 2017

    I love to use this plugin. But sometime when I try to rescale a lot of pictures, or one big picture I get an 500 Internal Error. I use Nginx and PHP 7.1.9, is there a way to solve this?

    Thank you

  • author

    Replied on 17 Sep, 2017

    Hi, Thanks for using the plugin. Chances are it is exceeding your servers php memory limit when resizing the images. Couple of ideas to get around this:

    Thanks

  • Found the plugin useful on 12 Sep, 2017

    This is a great plug-in that allows for the creator to upload the mega images created by most phones and SLR cameras and then elegantly resample them to optimal size. works like a charm.

  • Found the plugin useful on 12 May, 2017

    Great plugin. Is there a way to clear the cache?

  • author

    Replied on 12 May, 2017

    Thanks

    The clear cache plugin should clear the thumbs for you - https://octobercms.com/plugin/romanov-clearcachewidget

  • Found the plugin useful on 13 Apr, 2017

    Nice plugin, thnx. I was just wondering if theres a method to resize all of the library beforehand, so there would not be any lag when resizing on the go. Thnx

  • author

    Replied on 15 Apr, 2017

    Hi, sorry for the delay.

    Yes, I tend to use the PHP usage either on a schedule or on the onSave/onUpdate controller methods if its a backend form. Just ensure the width/height and settings are identical between the twig and PHP usages to take advantage of the caching.

    Thanks

  • Found the plugin useful on 5 Apr, 2017

    Very useful and practical utility. It gives some new opportunities in using Media Library and optimise media content. I use it a lot especially with TinyPNG. However, it has a peculiarity as well.

    When using RainLab Blog you can apply getThumb to a featured image and you have your thumbs created in the same upload folder where your original file is stored.

    The Image Resizer in this situation creates a new upload folder, copy the original in to it as a file without extension, then creates thumbs there.

    As a result, you have 2 copies of the original file in different folders, double your file structure and used storage space. If your storage is limited, this feature becomes an issue. I am not sure if there is a good reason to keep the second copy of the original file.

  • author

    Replied on 6 Apr, 2017

    Thanks for the feedback. The plugin actually uses the getThumb method you mentioned to resize the images, this is why the original image is copied into the directory.

    I will have a look to see if it's possible to avoid this. I've added it as an issue on the repo (https://github.com/toughdeveloper/oc-imageresizer-plugin/issues/18) so it doesn't get forgotten about.

    Thanks

  • Found the plugin useful on 5 Mar, 2017

    Very Nice, All in one. Note: Make sure image do not have space in it. I struggled for many days to make it working and finally realized that my image file names were like - "Media Lab.jpg".

    I changed it to "Media_Lab.jpg" and everything started working.

  • author

    Replied on 6 Mar, 2017

    Hey,

    Thanks for letting me know. I have added this as an issue to github - https://github.com/toughdeveloper/oc-imageresizer-plugin/issues/15 and will try get a fix together ASAP.

    Update: Unable to replicate, if anyone else is experiencing this issues, please help by adding more information to github issue linked above.

    Thanks, Matt

  • Found the plugin useful on 16 Feb, 2017

    This plugin is freaking amazing. Makes sites so much faster. Not to mention the way you can use it with a shop plugin is just awesome :D

  • Found the plugin useful on 6 Jan, 2017

    Must have!

  • Found the plugin useful on 20 Nov, 2016

    Amazing!

    This should be included in October as a default. I was just looking for this.

  • Found the plugin useful on 18 Nov, 2016

    Very good plugin, but when I try to resize a image like this:

    {{ 'assets/images/myimage.jpg' | theme | resize(200, 200) }}

    The result I get is a image placeholder with the text "Image not Found".

    The relative path (based on theme) is correct. If I remove the resize filter the image works fine. Any idea what maybe causing this?

  • author

    Replied on 19 Nov, 2016

    Hey, thanks for using the plugin.

    Just had a play around and was able to replicate the problem when altering the url setting in config/app.php. For it to work it with the theme filter it needed to be in the format of www.mydomain.tld (no http:// or https://).

    I have fixed it locally to work regardless of the format of the url setting, will get a fix pushed ASAP, in the mean time it should work fine using the full path, e.g:

    {{ 'themes/mytheme/assets/images/myimage.jpg' | resize(500,500) }} 

    Please message me if you don't think this is the issue.

    Thanks, Matt

    Update: Bugfix pushed, let me know if the problem persists.

  • Found the plugin useful on 15 Nov, 2016

    A fantastic twig extension!

1.3.4

Adds German translation - thanks to Christoph (emptynick)

Apr 04, 2017

1.3.3

Updates Hungarian translations - thanks to Szabó Gergő

Feb 07, 2017

1.3.2

Adds option to skip compression of certain images, helpful to save credits.

Jan 30, 2017

1.3.1

Ensures plugin works as expected when October is installed to a sub-directory.

Jan 23, 2017

1.3.0

Adds TinyPNG API key validation, TinyPNG usage statistics and provides thumb backend list column type

Jan 04, 2017

1.2.2

Ensures false can be passed to auto width/height. Also improves URL parsing so different formats of app.url work as expected. Thanks to Emerge.

Dec 20, 2016

1.2.1

Updates translations and allows jpg files to be compressed with Tiny PNG

Dec 19, 2016

1.2.0

Adds optional PNG compression support via Tiny PNG

Dec 08, 2016

1.1.0

Adds default settings to admin - thanks to Szabó Gergő

Nov 23, 2016

1.0.3

Adds Hungarian translation, thanks to INDIKÁTOR

Nov 21, 2016

1.0.2

Fixes bug where url set in config/app.php affecting rendering of image.

Nov 19, 2016

1.0.1

First version of ImageResizer

Nov 08, 2016