SPIP 1.9.2
SPIP now provides features to automatically apply effects on your images. These effects allow to:
- ensure that the graphic design of your site is coherent by automatically creating navigation elements that will follow the graphic designer requirements,
- creating spectacular effects without requiring image manipulation knowledge from the redactors and without jeopardising future graphical evolutions of the site.
For example, if you want that, in the public site design, the navigation logos for the articles are:
- “on the floor”, with a reflection under them,
- in black and white when inactive but in colour when hovered.
Without the automatic processing presented in this article, the webmasters would have to create manually multiple versions of each image to use on the site. This would have two drawbacks:
- the image manipulation is long, can rarely be performed by the redactors and has to be repeated for every new article/section,
- if, in the future, the site’s design is to be changed, all the processing will have to be repeated.
With the new automatisms, a simple working flow is possible: the redactors can put a simple logo on their article (for example a photography), without any particular processing. From these, the SPIP template system will be able to create (for example):
- a thumbnail with the right size,
- the same thumbnail in black and white,
- the reflexion of the image “on the floor”.
Note: Some of the filters described here use image scaling functions. It is therefore mandatory that, after the installation, you go into the private area, to the “Configuration” > “Advanced Functions” panel. There, you need to select the “GD2” method to create the thumbnails.
Performance Warning
Before you start reading further, you need to know that these features are quite heavy for the server. The processing of one image can be long (in particular for very big images) and if your templates have multiple images to process, or even multiple effects for one image, the server could timeout (because the maximum execution time of the script will be exceeded).
However, the image processing filters have their own cache system: once processed, a “filtered” image is saved and won’t need to be re-computed. The high server load will therefore happen only the first time the processing is requested.
This warning is particularly relevant on mutualised hosts.
The configuration panel “Empty the cache” in the private area will display the size of the image cache and give you the opportunity to clear it.
Transparency
Since SPIP 1.9, if you use GD2, in addition to the features described in this article, you will notice that the image scaling filter (image_reduire) now respects the transparency of GIF and PNG 24 files (alpha layer transparency).
Therefore, you should ensure that the GD2 conversion method is selected in the configuration of your site.
The original image
Any image that is managed by SPIP can be processed by the following filters. All the logos (for articles, sections, ...), but also the images from the portfolio (the images attached to your articles) and the new Typographical Images.
Since SPIP 1.9.1, all the image filters can also be applied to textual tags that contains images insertion shortcuts (<img...|center>) or html img tags. In that case, the processing will be applied to all the images contained in the text.
Here is, for example, an image that we want to process:
Scaling an image
The old filter reduire_image has been renamed image_reduire, to follow the naming convention of all the graphical filters. However, the old naming will still work.
Another filter has been introduced to complete the scaling functions: image_reduire_par allows to scale an image according to a factor (scale by). While reduire_image reduces the image to a set dimention, the filter image_reduire_par will reduce it proportionally to its original size.
For example:
reduces the typographical image by a factor of 2 (the image is twice smaller).
Removing transparency and forcing the image format
The image_aplatir filter has two functions:
- it saves the image in a predefined format (for example, transforms a PNG into a GIF),
- it removes the transparency information and replaces the transparent parts by a colour.
for example:
The typographical image created from the text is in PNG format with transparent parts. By applying the image_aplatir filter, we transform it to a GIF, and fill all the transparent zone with red (ff0000).
image_nb
The image_nb transforms an image to gray levels (known as “black and white” in photography)
Without parameters (left image), the filter computes the gray levels as a ponderation of each colour component of the original image, following this equation:
luminosity = 0,299 × red + 0,587 × green + 0,114 × blue.
You can set a ponderation for each RGB component by specifying a per-thousand value. For example (right image):
will take each colour with the same level.
image_sepia
The image_sepia filter applies a «Sepia» processing to the image. This type of effect applied to a photography will give the impression of an old photography tonality.
Without parameters (left image), the sepia value is by default, «896f5e» (in RGD hexadecimal). You can provide this sepia tone as a parameter, for example (right image):
image_gamma
the image_gamma filter changes the luminosity of the image. It makes an image brighter or darker. It takes a numerical parameter between -254 and 254. Positive values will brighten the image (254 making the image all white) while negative values will darken the image (-254 making the image all black).
image_alpha
The image_alpha filter will change the transparency of the whole image and transform it to PNG 24 with an alpha layer. If the image already has transparency information, the values are merged.
The parameter is a numerical value between 0 and 127: 0 doesn’t change the image while 127 makes it completely transparent.
image_flou
The image_flou filter applies a blur to the image. You can provide a numerical parameter between 1 and 11 specifying the level of blur (from 1 pixel wide blur to 11 pixel wide blur).
The default value being 3.
Warning: this filter is particularly greedy in resources (it will require a long processing time). If the server timeouts, you could try to replace a strong blur by multiple consecutive blurs. For example:
would become:
This way, the processing can be done in two template “refresh” as the result of the first blur will be saved in the cache.
Warning (2): this filter will change the dimention of the image, adding a margin equal to the blur value around the image. Therefore, an image blured by 3 (default) will have a margin of 3 pixels on each side, and the image will therefore be 6 pixel larger and taller than the original one.
image_rotation
The image_rotation filter rotates the image according to a set angle. A positive parameter will rotate the image clockwise.
A rotation that is not a multiple of 90 will create a “stair” effect. A solution to reduce this effect is to scale down the image after the rotation.
Warning: this filter is relatively greedy in resource!
Warning (2): this filter will change the dimensions of the image.
image_flip_vertical and image_flip_horizontal
The image_flip_vertical applies a vertical mirror effect while the image_flip_horizontal one applies an horizontal mirror effect.
They do not take any parameter.
image_masque
image_masque is a powerful filter. Therefore, its usage is more complex than the other filters. It can, from a PNG 24 file in gray levels and with an alpha layer, modify:
- the image framing,
- the transparency of part of the image,
- the luminosity of part of the image,
- Image dimensions
If the original image is bigger than the mask file, then the original will be resized and cropped to the mask size, the transparency and luminosity information provided by the mask will then be applied. This is very useful to create navigation thumbnails.
If the original image is smaller than the mask, then there is no reframing, the informations provided by the mask are directly applied (in its original dimensions).
This is our original image:
- Transparency mask
The transparency data provided by the mask are directly applied to the original image. A transparent pixel in the mask will make the corresponding pixel in the original image transparent, with the same transparency level. (if the original image is already transparent, the data is merged)
If we have the mask named «cutout1.png»:
and applied as is:
we will get the following image:
The original image is resized to the mask dimensions, and the transparent parts of the maps are now the transparent parts in the result.
Warning: this filter uses image reduction functions. Therefore, it will only work if the GD2 reduction method is chosen in the “advanced functions” configuration panel.
- Luminosity mask
In the previous example, the colour of all the pixels of the mask is 50% gray. Therefore the original image colours are not modified (only a cutout is applied).
If the mask uses different intensities of gray, the resulting image will have a different luminosity from the original image. If a pixel of the mask is brighter, then the corresponding pixel in the resulting file will be brightened; if the mask pixel is darker, then the corresponding pixel is darkened in the resulting file.
For example, if we use the mask «cutout2.png»:
applied by:
we will get:
In both examples, the mask is smaller than the original image, therefore, a thumbnail-like image is created.
If the mask is bigger than the original image, then it is not resized. This can be usefull to apply a texture to the image. For example to get the following effect:
we applied a larger mask with different gray levels.
Warning: The result on the luminosity will be more important in the resulting image than in the mask.
Warning (2): in reality, the luminosity mask is a colouration mask. If the mask is in colour, then the luminosity and the colour of the resulting image will be modified. However, this effect is difficult to predict.