#59

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Miscellaneous
  • Utility
  • Twig filter for automatic thumbnail images for your media images.
  • Static PHP helper function for automatic thumbnail images for your media images in your backend files.

After installing the plugin you can use it...

...as a Twig filter in other plugins or in your theme files:

<img src="{{ 'path/to/image.jpg'|mediathumb_resize(mode, size, quality) }}">

... as a static PHP helper function in your backend PHP and .htm files:

<img src="<?= mediathumbResize('path/to/image.jpg', mode, size, quality) ?>">

The path/to/image part is the path relative to your media folder.

Uploads images functionality (for example "featured images" in Blog and Pro Blog):

We made the functionality also available for so called "uploads" - these are for example those images that are uploaded directly when editing a Model instance, like the "featured images" of a blog post in the Blog and Pro Blog plugins. You can use the following with all mediathumb features:

<img src=" {{ post.featured_images[0]['path']|mediathumb_resize() }}">

and

<img src="<?= mediathumbResize($post->featured_images[0]['path'], mode, size, quality) ?>">

The filter supports three arguments:

  • mode: can bei either 'auto', 'width' or 'height'. 'auto' is the default.
  • size: an integer describing the length in pixels (defaults to 200) of
    • the longer edge of the image in 'auto' mode
    • the width in 'width' mode
    • the height in 'height' mode
  • quality: an integer from 1 – 100 to set the quality of the image. Only applies to JPGs. Defaults to 90.

The static PHP helper function needs the image path as a string as the first argument.

Examples:

The path/to/image part in the following examples is the path relative to your media folder.

Twig (frontend code)

<img src="{{ 'path/to/image.jpg'|mediathumb_resize() }}">

Creates and displays a 200px wide thumbnail image of an landscape image or a 200px high thumbnail image of a portrait image.

<img src="{{ 'path/to/image.jpg'|mediathumb_resize('height', 400) }}">

Creates and displays a 400px high thumbnail image, no matter if the original is a landscape or a portrait image.

<img src="{{ 'path/to/image.jpg'|mediathumb_resize('width', 800, 96) }}">

Creates and displays a 800px wide thumbnail image with a quality of 96, no matter if the original is a landscape or a portrait image.

Static PHP helper function (backend code)

The static PHP helper function needs the image path as a string as the first argument. You can use it for example when you display a list of items in the backend, using the default $record variable you get when using the default OctoberCMS $this-&gt;listRender() function:

<img src="<?= mediathumbResize($record->image, 'height', 180, 96) ?>">

Creates and displays a 180px high thumbnail image, no matter if the original is a landscape or a portrait image.

While of course $record-&gt;image might be something else in your case. "image" is here the name of the field you store your image in.

You can of course also use the defaults like so:

<img src="<?= mediathumbResize($record->image) ?>">

Creates and displays a 200px wide thumbnail image of an landscape image or a 200px high thumbnail image of a portrait image.

until now this function was called getMediathumb instead of mediathumbResize. This name will still work, I left an alias for it that will stay in there forever ;-)

Uploads images functionality (for example "featured images" in Blog and Pro Blog):

We made the functionality also available for so called "uploads" - these are for example those images that are uploaded directly when editing a Model instance, like the "featured images" of a blog post in the Blog and Pro Blog plugins. You can use the following with all mediathumb features:

<img src=" {{ post.featured_images[0]['path']|mediathumb_resize() }}">

and

<img src="<?= mediathumbResize($post->featured_images[0]['path'], mode, size, quality) ?>">

Configuration

Custom folder name:

The default folder name "_mediathumbs" can be changed (also to a subfolder like "some/sub/folder") in the config/config.php file of the plugin.

Defaults:

The defaults for mode, size and quality can be changed in the config/config.php file of the plugin.

How does it work:

The plugin checks if a thumbnail for the original image was already created - if not, it creates the thumbnail.
Then the thumbnail path is returned.

What if I overwrite the original with an altered version?

The plugin uses the filetime and filesize in naming the thumbnail to make sure that altered images with the same name don't produce old thumbnails.

Where are the thumbnails stored?

In a mediathumb folder in your storage media folder (which is created automatically, also see "Custom folder name" above).

Does it work with Amazon S3?

Yep.

What happens to the thumbnail files once I delete the original?

So far they just stay in the mediathumb folder. I am working on a solution to have them deleted together with the originals, but remember you can easily empty or delete the mediathumbs folder altogether - the thumbnails will just start being re-created when people hit your website.

Roadmap

  • Adding a mediathumb_square filter for creating automatic square thumbs.
  • ... (let me know if you have feature requests. No promises, though...)
  • Found the plugin useful on 21 Sep, 2016

    This is good, does exactly what it sets out to do, really good work.

  • Found the plugin useful on 2 Sep, 2016

    This is a great little plugin! Works really well. I had an issue with the path/to/image location, but didn't realize that it had to be relative to your storage/app/media directory.

    If I were to make any requests for this plugin, it would be to be able to specify the height and width of the image, and have it scale and crop the image to fit. (Not just a square thumb, but any size/shape thumb).

    That would give the greatest amount of flexibility for creating thumbnails you can use anywhere.

    Support was spot on when I had my issue as well! Developer is doing a great job. Many kudos!

  • Found the plugin useful on 22 Aug, 2016

    Awesome plugin, it works very well and it's really easy to use.

  • Found the plugin useful on 20 Aug, 2016

    So locally, these files get created no problem, but on my live server, they won't create.

    http://rawbeautyportraits.com/portfolio/kids/view/amber

    It should be displaying all the thumbnails, but it's not even creating the folder where it uploads the thumbnails. I have this working great locally and it's all the same exact code. The storage folder has write permissions for everything (777).. hence the reason the entire site is working.. everything is writing just fine like caches, except for this plugin.

    Does anybody have any idea why it is doing this?

  • author

    Replied on 22 Aug, 2016

    Does the problem persist? I'm on vacation right now, but I would look into it when I'm back next week.

  • Found the plugin useful on 23 May, 2016

    This has been sorely missing for so long! Only thing I'd love is for the _mediathumbs directory to be cleaned up when an image is removed, and for the thumb filename to have a suffix or prefix of '_thumb' or something similar instead of a suffixing with a randomised string to make images Google Images/Search Engine friendly. Then it would be perfect :D

    Thank you so much Sebastian, great work!

  • author

    Replied on 23 May, 2016

    Thanks, Gavin. The automated clearing up of the _mediathumbs directory is on the roadmap. The suffix on the other hand is not randomized, but a hash of things including filetime and filesize, to make sure that when you upload a new image keeping the old name ("overwriting" the old image), always a new thumbnail will be used. As the filename also keeps the old filename just adding the hash, I hope it still is SEO friendly in some way...

  • Found the plugin useful on 16 May, 2016

    Absolutely fantastic! Thanks!! w

  • Found the plugin useful on 10 May, 2016

    Very useful plugin for front-end developing!

  • Found the plugin useful on 5 Apr, 2016

    Great plugin! Most missed feature in core

0.4.4

Fix for octobercms breaking change

Mar 29, 2017

0.4.3

Fixed bug that made Mediathumb not work in OctoberCMS installed in a sub directory using local disk

Feb 28, 2017

0.4.2

Fixed bug that made Amazon S3 not working correctly for uploads

Feb 06, 2017

0.4.1

Fixed bug in autoload file

Jan 29, 2017

0.4.0

Added functionality for uploads files like featured images in blogposts

Jan 29, 2017

0.3.3

Fixed syntax error in helper function

Jul 14, 2016

0.3.2

Making sure the static helper function does not overwrite an existing function (Thanks to Tobias Kündig).

Jul 14, 2016

0.3.1

Fixed a bug which made the plugin return an exception when failing to create a thumbnail for unsupported file types.

Jul 12, 2016

0.3.0

Added option to change mediathumb folder name (including subfolders) in the config file.

Jul 11, 2016

0.2.5

Corrected a bug to make it work in installations of OctoberCMS in a subfolder.

Jun 03, 2016

0.2.4

Added MIT lincence - thanks to Szabó Gergő

May 17, 2016

0.2.3

Hungarian language added and minor typos corrected - thanks to Szabó Gergő

May 09, 2016

0.2.2

cs_CZ language added - thanks to Vojta Svoboda

Apr 18, 2016

0.2.1

Fixed an error when an empty string was passed as image path.

Apr 14, 2016

0.2.0

Renamed the helper function getMediathumb(). Left an alias for mediathumbGetThumb() to prevent breaking change.

Apr 05, 2016

0.1.0

Added config/config.php file for setting defaults and added backend support (major change, please see documentation)

Apr 05, 2016

0.0.1

Added Amazon S3 support

Apr 05, 2016

0.0.0

First version of Mediathumb

Apr 04, 2016

In 0.0.0 the thumbnails were stored in /app/media/mediathumbs. As of 0.0.1 they are now stored in a folder called "_mediathumbs" in whatever is your media directory (local or Amazon S3). This should not break anything, but you can remove your /app/media/mediathumbs folder after updating to 0.0.1.

The jump from 0.0.1 to 0.1.0 is no breaking change, but adds more functionality (the static PHP helper function, see docs).

In 0.2.0 I renamed the helper function getMediathumb(). Left an alias for mediathumbGetThumb() to prevent breaking change.