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
The following plugins extend or depend on the plugin
Staff
Manage a list of staff or a team and display it on your website.
Staff
Manage a list of staff or a team and display it on your website.
Better Content Editor
Der etwas bessere Content Editor
Better Content Editor
Der etwas bessere Content Editor
Instagram Feed
Instagram feed on your website
Instagram Feed
Instagram feed on your website
The following themes use this plugin
Material Portfolio & Resume
Material Portfolio & Resume
One Page Theme with content management tools for a very fast start!
Material Journal
Material Journal
Material Journal is a simple theme in the style of material design. It can be used as personal blog or journal with several authors. It has a custom template to showcase special timeless elements/information
OctoLanding
OctoLanding
Universal landing page and promo constructor it's a internet tool which is made for IT projects working. Updates, additions and support are guaranteed
Sneakers E-Commerce Theme for Shopaholic
Sneakers E-Commerce Theme for Shopaholic
Customizable and mobile-friendly e-commerce theme for Shopaholic designed especially for an online shoe store.
PAGE BUILDER - Modular Theme
PAGE BUILDER - Modular Theme
Convenient page builder with 50+ blocks
MaterialKit
MaterialKit
A beautiful theme based on CreativeTim MaterialKit. Comes with a PageBuilder in StaticPages.
Saratov paradise
Saratov paradise
`Saratov paradise` is a multifunctional theme, with a full-fledged tool for creating your own landing from ready-made blocks in a short time.
Yell-Ow!
Yell-Ow!
Yell-Ow! - Ultimate Company Profile
Axiam E-Commerce Theme for Shopaholic
Axiam E-Commerce Theme for Shopaholic
Responsive Bootstrap 4 Shopaholic theme for October CMS
Biolia E-Commerce Theme for Shopaholic
Biolia E-Commerce Theme for Shopaholic
Customizable and mobile-friendly e-commerce theme for Shopaholic designed especially for an online organic food & eco products store.
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:
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
-
Eliezer Rubio
Found the plugin useful on 5 May, 2024
Hello, i'm having a issue
touch(): Unable to create file
How do i fix it? I looks for a file in /public/ but i doesn't exists.
-
ali joneid
Found the plugin useful on 14 Jun, 2022
I used <img src="{{'test.png'|theme }}"/> / octobercms v2 and got this error: explode(): Argument #1 ($separator) cannot be empty ~/plugins/toughdeveloper/imageresizer/classes/Image.php line 160
-
Ostlancer FZE LLC
Found the plugin useful on 23 Oct, 2021
Wonderfull! It would be great if you add also cdn support inside.
-
Hunter King
Found the plugin useful on 20 Dec, 2019
This is a great plug-in. But after update 1.4.0, I seen a error:
development.ERROR: ErrorException: unlink(/home/website.com/public_html/storage/app/uploads/public/9f6/728/31c/9f672831c36fcc2db6804895b5f1b047): No such file or directory in /home/website.com/public_html/plugins/toughdeveloper/imageresizer/classes/Image.php:123 Stack trace:
/home/website.com/public_html/plugins/toughdeveloper/imageresizer/classes/Image.php(123): unlink('/home/website.com/...')
/home/website.com/public_html/plugins/toughdeveloper/imageresizer/classes/Image.php(99): ToughDeveloper\ImageResizer\Classes\Image->deleteTempFile()
Please check it!
-
Matthew Pawley author
Replied on 10 May, 2020
Sorry for the delay. This should be fixed in the latest
1.4.1
update. It now checks the temp file exists before attempting to delete it. -
Anton Antonov
Found the plugin useful on 4 Nov, 2019
[OFFLINE.ResponsiveImages] DOM manipulation failed: DOMDocument::loadHTML(): htmlParseEntityRef: expecting ';' in Entity, line: 1
What am I doing wrong?
-
Matthew Pawley author
Replied on 10 May, 2020
Hi, from the error message it seems the error is being thrown from another plugin (https://octobercms.com/plugin/offline-responsiveimages).
-
Matthias Eckel-Binder
Found the plugin useful on 7 May, 2019
Great plugin, saves a lot of work. Just put images in assets folder without thinking and decide later which size and aspect ratio you need. Thank you!
-
Jeff Cates
Found the plugin useful on 28 Nov, 2018
Works great!
-
Mattia Matteucci
Found the plugin useful on 16 Nov, 2018
Wow! Very utility plugin! work fine! thanks
-
Salawu Nandjim
Found the plugin useful on 23 Oct, 2018
Hello dear,
Is there a tutorial on using plugin?
-
Matthew Pawley author
Replied on 23 Oct, 2018
Hi. Please see documentation on github - https://github.com/toughdeveloper/oc-imageresizer-plugin
-
João Pedro Lopes da Costa
Found the plugin useful on 4 Sep, 2018
Does anyone know how to clear images cache? I've tried using https://octobercms.com/plugin/romanov-clearcachewidget but it doesn't clean cached images.
-
Gregorio López
Found the plugin useful on 25 Jul, 2018
Thank you for this great plugin.
A little question. The plugin doesn't work with a string containing the absolute URL of an image from another domain, like
https://upload.wikimedia.org/wikipedia/commons/3/3d/Jan_Cossiers_-_Prometeo_trayendo_el_fuego%2C_1637.jpg
Does it? I think the plugin needs the source image stored at the own server, but I want to be sure.
Thank you.
-
Maarten Machiels
Found the plugin useful on 21 Mar, 2018
Hi, the plugin is great. Thank you for your work.
However, there is an issue with image duplication (and possibly triplication), mentioned in https://github.com/toughdeveloper/oc-imageresizer-plugin/issues/18
Could you please have a look? Thanks again.
-
oscar rodriguez
Found the plugin useful on 18 Mar, 2018
Hi Greetings my dear, this is very interesting your plugin, that's why I installed it in my october version 434 and the version of the plugin is 1.3.5 installed but when using it in the backend within the model in the file field.yalm
I get the next error
The partial '_field_thumb.htm' is missing.
it seems that when you install it is not downloading the view you need but because it occurs because when you install it does not download the views you do not lose
could you help me please
-
Flakerim Ismani
Found the plugin useful on 23 Feb, 2018
How do you crop, like from center?
-
den
Found the plugin useful on 4 Dec, 2017
In 'ToughDeveloper\ImageResizer\Plugin' 'function evalThumbListColumn()' need to change $record['attachOne'][$column->columnName] on $record->attachOne[$column->columnName] otherwise in "columns.yaml" in "type: thumb" does not display picture
-
Jort Jacobs
Found the plugin useful on 14 Nov, 2017
The URL that is generated returns a Page not found error? Do you know what is happening?
http://kwekerij-muijderman.dev/storage/app/uploads/public/f58/0b0/3e4/thumb__100x100_0_0_auto.jpg
-
Matthew Pawley author
Replied on 18 Nov, 2017
Hi,
The plugin relies on Octobers built in image resizer. A change on version of 420+ meant the url was stored slightly differently. This has now been fixed with v1.3.5.
Thanks, Matt
-
Sven Cieslok
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
-
Matthew Pawley 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:
- Increase the
memory_limit
on your server (can be done in php.ini) - Resize the images to the required sizes on a schedule/on save (see https://github.com/toughdeveloper/oc-imageresizer-plugin#php)
Thanks
- Increase the
-
David Lundquist
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.
-
Alfabetunido lda - PT510803644
Found the plugin useful on 12 May, 2017
Great plugin. Is there a way to clear the cache?
-
Matthew Pawley author
Replied on 12 May, 2017
Thanks
The clear cache plugin should clear the thumbs for you - https://octobercms.com/plugin/romanov-clearcachewidget
-
Aurelijus
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
-
Matthew Pawley 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
-
Lilydale Heights College
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.
-
Matthew Pawley 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
-
ioCare
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.
-
Matthew Pawley 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
-
Devin Green
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
-
Art
Found the plugin useful on 6 Jan, 2017
Must have!
-
Sigfried Seldeslachts
Found the plugin useful on 20 Nov, 2016
Amazing!
This should be included in October as a default. I was just looking for this.
-
Gustavo Meireles
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?
-
Matthew Pawley 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 inconfig/app.php
. For it to work it with the theme filter it needed to be in the format ofwww.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.
-
Mattias Hamberg
Found the plugin useful on 15 Nov, 2016
A fantastic twig extension!
-
1.4.1 |
Only attempt to delete temp files if they still exist - @LukeTowers May 09, 2020 |
---|---|
1.4.0 |
Add imageWidth() and imageHeight() filters - @matteotrubini Sep 30, 2019 |
1.3.6 |
Prevent infinite loop when custom not found image does not exist. Thanks to yapsr Mar 25, 2018 |
1.3.5 |
!!! Changes path to cached image for builds of October 420+. Thanks to that0n3guy Nov 17, 2017 |
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 |