Working with images means phpThumbOf

phpThumbOf is a MODx addon for, based on the popular script phpThumb. It allows you to modify the image using various graphics libraries on the fly.

I'm not going to describe the process of installing the addon from the repository. We assume that you have already downloaded it and installed it.

The reason for writing this post was the fact that the official documentation phpThumbOf is just terrible. Reading man, I thought that the only function that can be used to modify an image when it is output zoom Krop (zoom-crop), for more there was nothing said. But later, try to use some other options phpThumb, I found that they work great!


the

Anatomy phpThumbOf filter output

The Output filter for MODx and allows you to drive the value of an element using any set of filters directly before it is rendered. The syntax is as follows:

[[element:modifier=`value`]]

The first and most correct way of using phpThumbOf is Filter Output, which is added to the TV parameter of type "image".

Just to complete the story, I will show you how to add the tv-parameter to the template.

To begin, create a new tv-setting and name it as you see fit. My version:


Next, in the tab "input Type" select Image:


All we have left to do is to specify the output tv of parameter set SRC.

For experiments we will choose some interesting picture. I found this:


Now that we have pointed out in some online we have selected kartinku as the value we have created additional parameter, it can be displayed in the content of the resource using the following construction:

<img src="[[*tvImage]]" />

As I mentioned in the beginning of the article, the output filter changes the element before it is rendered on the page. Will give the value of our tv-parameter to the output filter phpThumbOf:

[[*tvImage:phpthumbof=`w=120&h=120`]]

the

Remark:  if  we display a tv-option in the template or chunk, the asterisk "*" should be replaced by plus "+": [[+tvImage:phpthumbof=`w=120&h=120`]]

As a result, we get a new generated picture based on the picture that we chose for the resource, but scaled to the size of 120x120 pixels. But as You can see, the image has a white field arising from violations of the original image.


This can be avoided very simply, do not specify the width or height. Let's keep only a fixed width:

[[+tvImage:phpthumbof=`w=120`]]

Now the resulting image is only scaled to a given width, the height will be proportional to the original aspect ratio.


As You can see, the possibility of resizing the images infinitely flexible. Here is another example with a width of 270 pixels. In addition, you can get the output image more original, but it's bad practice ;).

[[*tvImage:phpthumbof=`w=270`]]

the

image Cropping with accurate dimensions

If we want to get an image with dimensions of exactly 120 by 120 pixels, we can crop it. You just need to add the option of the Krop (zoom-crop) &zc=1.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1`]]

Now we have the cropped version of our image with the exact size and without the white boxes.



the

Filters PhpThumb — the fun is just beginning

Now that you know how to control the size of the image, I'll show you the real power of phpThumb filters. I'll just give a few examples of the filters available in phpThumb. the Please note that all of the new filters I added to the end of the preceding examples. At the same time, their position matters! Filters are applied from left to right.


the

Blur (blur)

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=blur|10`]]

the

Grayscale (convert palette to grayscale)

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray`]]

the

rounded corners

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=ric|20|20`]]

Please note that the image appeared white corners in those places where the image "round". We can overcome this problem by converting the resulting image in PNG format.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=ric|20|20`]]

the

Frame

Periodically it becomes necessary to add to the image frame. Of course, this can be done with CSS. But sometimes there are moments when CSS is useless. I want to show You one such example.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&f=png&fltr[]=bord|5|0|0|FFFFFF&fltr[]=rot|-15|E4F6FE`]]

the

Rotate images

The rotation requires a little explanation. You need to specify the background color for non-graphical region in the corners. In this example, we use #006699 rotation of -45°.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699`]]

If You want to reduce the number JPG=artifacts, you can increase the image quality (1-100):

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|006699&q=100`]]

If You want to get a transparent background, just change the output to PNG like we did before:

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=rot|-45|&f=png`]]

the

Color Overlay (color overlay)

This filter allows you to overlay any hex color on the image. The first value is a percentage, the second — color in hexadecimal format.



If You want a duotone image, you need to first use the filter grayscale for bleaching pictures.

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=clr|35|990033`]]

the

a Simple text watermark

Using phpThumb You can overlay on the image text and image watermarks. In the case of text watermarks, You can specify the size, position, transparency, and TTF-the font.

Generally available very much. I recommend to read the documentation.

Here is a simple watermark on the basis of the standard font server:

[[*tvImage:phpthumbof=`w=120&h=120&zc=1&fltr[]=gray&fltr[]=wmt|Belafonte Code|3|T|FFFFFF||100|20|0||0|`]]

the

Finish

That's all I wanted to tell. With lots of examples of using phpThumb you can see on official project page.

PS I Wanted to publish to blog "MODx CMS", but as usual habré, not enough karma.
P. S. S. Moved to "MODx CMS"

Article based on information from habrahabr.ru