Resize images in articles on the fly

All contributions published for previous SPIP versions

This filter can resize all the images added by an author in the text of an article on the fly. You can specify max size for width, height or both.

Overview

Many layouts need images of a certain size specification in order to display them correctly. However, not all authors or administrators know that image size can be adjusted manually (you would be surprised!). So, in order to show all pages correctly, now you can automatically resize all images embedded in the text of an article using a filter.

How to use the filter

The filter is a modified version of reduire_image.
If the GD library is present on your server, the first time the filter is called, a new resized image will be created. This image will be used in the following filter calls. If the GD library was not present, the resizing will be made simply putting width and height attributes on the <img> tag in the HTML code.

The filter has two arguments:
-  the maximum pizel size of the image
-  the axis along which to resize (x,y,both)

The syntax is:
reduire_all_images{max_size,direction}

As an example, to limit all images to 500 pixels in width you would write:

<BOUCLE_art(ARTICLES){id_article}>
[(#TEXTE|reduire_all_images{500,x})]
</BOUCLE_art>

With this filter, a 450x600 image would not be resized, but a 600x600 would be.

original image
original image
The image is larger that the column and even the caption is not fully visible.
resized image
resized image
The image was resized with reduire_all_images{500,x}.
Now it is fully visible together with its caption.

As with all filters, it is only active in the public site. So you won’t be able to preview your article with the resized images in the private space.

Cache

The resized images are stored in the “resized” folder situated in the subfolder of IMG whose name is like the file extension.
example: IMG/jpg/resized or IMG/gif/resized

They are calculated only the first time the filter is called.

They are stored with a name like this :
size-axe-imagename.extension

So an image called image1.jpg resized within 500 pixels on the x axe will be saved in IMG/jpg folder as 500-x-image1.jpg.

Automatic maintenance

An automatic maintenance action takes place after a certain time. This duration is indicated in the variable $maint_delay at the beginning of the file and can be changed. It’s default value is one week.

$maint_delay = 3600*24*7;  
//7 days of 24h of 3600 second 

Maintenance operation consists in managing and erasing the unused files (a “garbage collector”).

Thus, if you modify the templates and the sizes of the images, or you change the original images, the old resized images becomes useless. Maintenance will detect those not used anymore and will automatically erase them from resized folder.

Note: If ever a resized image is deleted but is still in use (because it has not been shown for a long time for example), then it will be recreated if requested, therefore there will not be any problem.

How to install

To install the filter, you must download the attached archive, extract the file mes_fonctions.php3 and add its content to your mes_fonctions.php3 file in your root directory. If you don’t yet have a file called mes_fonctions.php3, just add this one to your root directory.

This is an experimental filter so feel free to contact me if you are not able to make it work in your host environment.

Download the filter
Copy and paste the text in mes_foncions.php3 in your mes_fonctions.php3

updated on 25 January 2007

Discussion

2 discussions

  • Hello,
    Thanks for this. I will use it for my web site. For now I face a problem with my site Kabulpress.org/my and I need your advice.

    When I’m trying to open and manage www.kabulpress.org/my , the following error have to face:
    Warning: imagejpeg(): Unable to open ’../local/cache-vignettes/L23xH20/arton803-942b2.jpg’ for writing in /home/kabulpre/public_html/my/ecrire/inc/filtres_images.php on line 482

    All small images are unavailable.

    I look forward to hear from you as soon as possible.
    Regards

    Reply to this message

  • 1

    When I tryed to use the filter the following error message appeared :

    Fatal error: Allowed memory size of 8388608 bytes exhausted (tried to allocate 4096 bytes) in /opt/lampp/htdocs/learnpython/mes_fonctions.php on line 124

    When I changed the value of the the memory-limit parameter in the php.ini from memory-limit = 8M to
    memory-limit = 16M , the filter worked fine.

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom