Realize compatibility between image watermark and image pop-up window by skillfully using CDN image processing

A special gesture is used to unlock CDN cloud storage, that is, Qiniu, Youpai. OSS has more ways to play with pictures, enabling the article pictures to have the function of thumbnail+watermark+image pop-up.

preface

terms of settlement

First of all, the first picture of this article is to open the watermark+thumbnail [I temporarily removed the watermark from this website, so I can't see it, and the watermark in the lower right corner comes with the screenshot tool]. Although my watermark is removed at present, it will not affect my viewing. My image link suffix is added ! water.jpg If you only look at the displayed image, its width should be only 750px, but the size of the image after Di Ali is 1920px. That is to say, the image loaded on the web page before is 750px, which is a thumbnail of the original image. If you look at the size of the image, it will be even more different. I think you must understand what I mean by naming the image style as【 water.jpg 】Of course, you can also be others, such as googlo.png , such as happy.gif In short, let the plugin in the image pop-up window think that this is the original image.

Watermark code

 function git_cdn_water($content) { global $post; $pattern ="/<img(.*?)src=('|\")(.*?). (bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i"; $replacement = '<img$1src=$2$3.$4! Water. jpg $5 $6>';//Change to your own image style name $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'git_cdn_water');

Optional watermark

 function git_cdn_water($content) { global $post; $pattern ="/<a(.*?)href=('|\")(.*?). (bmp|gif|jpeg|jpg|png)('|\")(.*?)><img(.*?)src=('|\")(.*?). (bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4! water.jpg$5$6><img$7src=$8$9.$10!water.jpg$11$12>'; $content = preg_replace($pattern, $replacement, $content); return $content; } add_filter('the_content', 'git_cdn_water');

• In fact, it is just to modify the regular matching

Postscript

After this incident, I remembered a saying I often heard: Sometimes thinking is more important than technology~

--End--