Working with images using phpThumbOf
phpThumbOf is a MODx addon based on the popular phpThumb script. It allows you to modify images by means of various graphic libraries on the fly.
I will not describe the process of installing an addon from the repository. We assume that you have already downloaded it and installed it.
The reason for writing the post was the fact that the official phpThumbOf documentation is just awful. After reading the man, I thought that the only function that can be used to modify the image when it is output is zoom-crop, because there is nothing more to say. But later, trying to use some other phpThumb options, I found out that they work great!
')
The MODx Output Filter allows you to push an element's value through any set of filters just before its output to the page. The syntax is as follows:
The first and most correct way to use phpThumbOf is the Output Filter , which is added to the TV parameter of the type "image".
Just to complete the story, I will show how to add such a tv-parameter to the template.
To get started, create a new tv-parameter and name it as you see fit. My version:
Next, in the “Input Type” tab, select “Image”:
All that is left for us to do is specify the method for outputting the tv-parameter — set the SRC.
For experiments, choose some interesting picture. I found myself this:
Now, when we have indicated in some resource the chosen weave as the value of the additional parameter we created, we can display it in the resource content using the construction:
As I mentioned at the beginning of the article, the output filter changes the element before it is drawn on the page. Pass the value of our tv-parameter to the output phpThumbOf filter:
As a result, we get a new generated image based on the image that we have chosen for the resource, but scaled to the size of 120x120 pixels. But as you may have noticed, the image appeared white fields, arising from the violation of the proportions of the original image.
To avoid this, you can very simply, just do not specify the width or height. Let's leave only the fixed width:
Now the resulting image is scaled only by the specified width, the height will be proportional to the original aspect ratio.
As you can see, the image resizing capabilities are infinitely flexible. Here is another example with a width of 270 pixels. In addition, you can get more original images at the output, but this is a vicious practice;).
If we want to get an image with dimensions exactly 120 by 120 pixels, we can crop it. For this, you need to add the zoom-crop option
Now we have a cropped version of our image with exact dimensions and no white fields.
Now that you know how to control the size of the image, I'll show you the real power of the phpThumb filters. I will just give a few examples of filters available in phpThumb. Please note that all new filters are added to the end of the previous examples. At the same time, their position matters! Filters are applied from left to right.
Please note that the image has white corners in the places where the image is “rounded”. We can overcome this problem by converting the resulting image into a PNG format.
Periodically it becomes necessary to add a frame to the image. Of course, this can be done using CSS. But sometimes there are times when CSS is useless. I want to show you one of these examples.
Rotation requires a little explanation. You must specify a background color for non-graphic areas in the corners. In this example, we use # 006699, the rotation is -45 °.
If you want to reduce the number of JPG = artifacts, you can increase the image quality (1-100):
If you want to get a transparent background, just change the output in the PNG, as we did before:
This filter allows you to overlay any hex colors on the image. The first value is the percentage, the second is the color in hexadecimal format.
If you want to get a two-color image, you must first apply a grayscale filter to bleach the image.
With phpThumb you can overlay text and image watermarks on an image. In the case of textual watermarks, you can specify the size, position, transparency and TTF font.
In general, there are many available. I recommend to get acquainted with the documentation.
Here is a simple watermark based on the standard server font:
That's probably all I wanted to talk about. You can find more examples of using phpThumb on the official project page .
PSI wanted to publish on the MODx CMS blog, but as is usually the case in Habré, there was not enough karma.
PSS Transferred to “MODx CMS”
I will not describe the process of installing an addon from the repository. We assume that you have already downloaded it and installed it.
The reason for writing the post was the fact that the official phpThumbOf documentation is just awful. After reading the man, I thought that the only function that can be used to modify the image when it is output is zoom-crop, because there is nothing more to say. But later, trying to use some other phpThumb options, I found out that they work great!
')
Anatomy phpThumbOf - output filter
The MODx Output Filter allows you to push an element's value through any set of filters just before its output to the page. The syntax is as follows:
[[element: modifier = `value`]]
The first and most correct way to use phpThumbOf is the Output Filter , which is added to the TV parameter of the type "image".
Just to complete the story, I will show how to add such a tv-parameter to the template.
To get started, create a new tv-parameter and name it as you see fit. My version:
Next, in the “Input Type” tab, select “Image”:
All that is left for us to do is specify the method for outputting the tv-parameter — set the SRC.
For experiments, choose some interesting picture. I found myself this:
Now, when we have indicated in some resource the chosen weave as the value of the additional parameter we created, we can display it in the resource content using the construction:
<img src = "[[* tvImage]]" />
As I mentioned at the beginning of the article, the output filter changes the element before it is drawn on the page. Pass the value of our tv-parameter to the output phpThumbOf filter:
[[* tvImage : phpthumbof = `w = 120 & h = 120` ]]
Remark: if we display the tv-parameter in the template or chunk, then the asterisk "*" should be replaced with plus "+": [[+ tvImage: phpthumbof = `w = 120 & h = 120`]]
As a result, we get a new generated image based on the image that we have chosen for the resource, but scaled to the size of 120x120 pixels. But as you may have noticed, the image appeared white fields, arising from the violation of the proportions of the original image.
To avoid this, you can very simply, just do not specify the width or height. Let's leave only the fixed width:
[[+ tvImage: phpthumbof = `w = 120`]]
Now the resulting image is scaled only by the specified width, the height will be proportional to the original aspect ratio.
As you can see, the image resizing capabilities are infinitely flexible. Here is another example with a width of 270 pixels. In addition, you can get more original images at the output, but this is a vicious practice;).
[[* tvImage: phpthumbof = ` w = 270`]]
Crop image with exact dimensions
If we want to get an image with dimensions exactly 120 by 120 pixels, we can crop it. For this, you need to add the zoom-crop option
&zc=1.[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1`]]
Now we have a cropped version of our image with exact dimensions and no white fields.
PhpThumb Filters - 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 the phpThumb filters. I will just give a few examples of filters available in phpThumb. Please note that all new filters are added to the end of the previous examples. At the same time, their position matters! Filters are applied from left to right.
Blur
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = blur | 10` ]]
Grayscale (converting palette to grayscale)
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = gray` ]]
Corner rounding
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = ric | 20 | 20` ]]
Please note that the image has white corners in the places where the image is “rounded”. We can overcome this problem by converting the resulting image into a PNG format.
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & f = png & fltr [] = ric | 20 | 20`]]
Frame
Periodically it becomes necessary to add a frame to the image. Of course, this can be done using CSS. But sometimes there are times when CSS is useless. I want to show you one of these examples.
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & f = png & fltr [] = bord | 5 | 0 | 0 | FFFFFF & fltr [] = rot | -15 | E4F6FE` ]]
Image rotation
Rotation requires a little explanation. You must specify a background color for non-graphic areas in the corners. In this example, we use # 006699, the rotation is -45 °.
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = rot | -45 | 006699` ]]
If you want to reduce the number of 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 in the PNG, as we did before:
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = rot | -45 | & f = png `]]
Color Overlay (color overlay)
This filter allows you to overlay any hex colors on the image. The first value is the percentage, the second is the color in hexadecimal format.
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = clr | 35 | 990033` ]]
If you want to get a two-color image, you must first apply a grayscale filter to bleach the image.
[[* tvImage: phpthumbof = `w = 120 & h = 120 & zc = 1 & fltr [] = gray & fltr [] = clr | 35 | 990033`]]
Simple text watermark
With phpThumb you can overlay text and image watermarks on an image. In the case of textual watermarks, you can specify the size, position, transparency and TTF font.
In general, there are many available. I recommend to get acquainted with the documentation.
Here is a simple watermark based on the standard server font:
[[* 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 probably all I wanted to talk about. You can find more examples of using phpThumb on the official project page .
PS
PSS Transferred to “MODx CMS”
Source: https://habr.com/ru/post/131424/
All Articles