admin管理员组文章数量:1130349
I am developing my custom theme and trying to figure out how to modify the default code for WordPress image inserted into the post content, so I could add support for webP format and have it within <picture> element.
I generate .webp images using cwebp library on my server and PHP exec() while image upload to the Media in WordPress Admin.
The code is:
function my_image_webp($meta, $id){
if(!isset($meta['sizes'])) {
return $meta['full'];
}
$upload_path = wp_upload_dir();
$path = $upload_path['basedir'];
// media upload direktorij
if(isset($path)){
$file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
}else{
$file = trailingslashit($upload_path['path']).$meta['file'];
}
list($orig_type) = @getimagesize($file);
switch ($orig_type) {
case IMAGETYPE_PNG:
$png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$png_image.".webp");
break;
case IMAGETYPE_JPEG:
$jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$jpg_image.".webp");
break;
}
// return
wp_update_attachment_metadata($id, $meta);
return $meta;
}
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);
Currently, my post content has got <img> element to display the thumbnail within <p> tag, but the <img> tag is a link <a> which points to the full-size image.
Currently I have got this for full-size image in the post content:
<p>
<a href=".jpg" itemprop="url" title="Some title">
<img alt="Alt tag of the image" class="alignnone size-full" src=".jpg" width="940" height="529">
</a>
</p>
I am trying to modify it to get this as result:
<p>
<a href=".jpg" itemprop="url" title="Some title">
<picture>
<source srcset=".webp" type="image/webp" />
<img alt="Alt tag of the image" class="alignnone size-full" src=".jpg" width="940" height="529">
</picture>
</a>
</p>
I have one or more images inserted like this. So, would need to check the whole post content and somehow modify/replace this?
Should I use some preg_replace() or WordPress image_send_to_editor() function?
Maybe using some filter?
Do you have any ideas how to change it?
I have found some solutions for <figure> element, but cannot get it working with <picture>.
I am developing my custom theme and trying to figure out how to modify the default code for WordPress image inserted into the post content, so I could add support for webP format and have it within <picture> element.
I generate .webp images using cwebp library on my server and PHP exec() while image upload to the Media in WordPress Admin.
The code is:
function my_image_webp($meta, $id){
if(!isset($meta['sizes'])) {
return $meta['full'];
}
$upload_path = wp_upload_dir();
$path = $upload_path['basedir'];
// media upload direktorij
if(isset($path)){
$file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
}else{
$file = trailingslashit($upload_path['path']).$meta['file'];
}
list($orig_type) = @getimagesize($file);
switch ($orig_type) {
case IMAGETYPE_PNG:
$png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$png_image.".webp");
break;
case IMAGETYPE_JPEG:
$jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$jpg_image.".webp");
break;
}
// return
wp_update_attachment_metadata($id, $meta);
return $meta;
}
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);
Currently, my post content has got <img> element to display the thumbnail within <p> tag, but the <img> tag is a link <a> which points to the full-size image.
Currently I have got this for full-size image in the post content:
<p>
<a href="http://www.example/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
<img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
</a>
</p>
I am trying to modify it to get this as result:
<p>
<a href="http://www.example/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
<picture>
<source srcset="http://www.example/wp-content/uploads/2018/11/image-thumb.webp" type="image/webp" />
<img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
</picture>
</a>
</p>
I have one or more images inserted like this. So, would need to check the whole post content and somehow modify/replace this?
Should I use some preg_replace() or WordPress image_send_to_editor() function?
Maybe using some filter?
Do you have any ideas how to change it?
I have found some solutions for <figure> element, but cannot get it working with <picture>.
1 Answer
Reset to default 3You have to loop through all images inside $post the_content() using foreach().
Which gives us, regex for group matching of <img> tag. Put all images into array().
Start counting from -1 since 0 has the 1st image already in array().
Loop through array() with images, find image with "size-full" with group match 3, if yes, get it's src value with group match 7.
After, replace src="value" extenstion - .png, .jpg ..., assign the replaced string to new variable. Use the new variable and add extension ".webp" to the it.
Replace existing <img> tags with <picture> element and call the function on $content.
function webp_picture_fix($content){
global $post;
preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);
if(!is_null($images)){
$i = -1;
foreach ($images as $key) {
$i++;
//echo $key[$i];
if(strpos($images[3][$i], 'size-full') !== false){
//echo "hi";
$slika_ekstenzija = $images[7][$i];
$sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
$webp_slika_src = $sewebp.".webp";
$replacement = '<picture><source srcset="'.$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'></picture>';
$content = str_replace($images[0][$i], $replacement, $content);
}
}
}
return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);
I am developing my custom theme and trying to figure out how to modify the default code for WordPress image inserted into the post content, so I could add support for webP format and have it within <picture> element.
I generate .webp images using cwebp library on my server and PHP exec() while image upload to the Media in WordPress Admin.
The code is:
function my_image_webp($meta, $id){
if(!isset($meta['sizes'])) {
return $meta['full'];
}
$upload_path = wp_upload_dir();
$path = $upload_path['basedir'];
// media upload direktorij
if(isset($path)){
$file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
}else{
$file = trailingslashit($upload_path['path']).$meta['file'];
}
list($orig_type) = @getimagesize($file);
switch ($orig_type) {
case IMAGETYPE_PNG:
$png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$png_image.".webp");
break;
case IMAGETYPE_JPEG:
$jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$jpg_image.".webp");
break;
}
// return
wp_update_attachment_metadata($id, $meta);
return $meta;
}
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);
Currently, my post content has got <img> element to display the thumbnail within <p> tag, but the <img> tag is a link <a> which points to the full-size image.
Currently I have got this for full-size image in the post content:
<p>
<a href=".jpg" itemprop="url" title="Some title">
<img alt="Alt tag of the image" class="alignnone size-full" src=".jpg" width="940" height="529">
</a>
</p>
I am trying to modify it to get this as result:
<p>
<a href=".jpg" itemprop="url" title="Some title">
<picture>
<source srcset=".webp" type="image/webp" />
<img alt="Alt tag of the image" class="alignnone size-full" src=".jpg" width="940" height="529">
</picture>
</a>
</p>
I have one or more images inserted like this. So, would need to check the whole post content and somehow modify/replace this?
Should I use some preg_replace() or WordPress image_send_to_editor() function?
Maybe using some filter?
Do you have any ideas how to change it?
I have found some solutions for <figure> element, but cannot get it working with <picture>.
I am developing my custom theme and trying to figure out how to modify the default code for WordPress image inserted into the post content, so I could add support for webP format and have it within <picture> element.
I generate .webp images using cwebp library on my server and PHP exec() while image upload to the Media in WordPress Admin.
The code is:
function my_image_webp($meta, $id){
if(!isset($meta['sizes'])) {
return $meta['full'];
}
$upload_path = wp_upload_dir();
$path = $upload_path['basedir'];
// media upload direktorij
if(isset($path)){
$file = trailingslashit($upload_path['basedir'].'/').$meta['file'];
}else{
$file = trailingslashit($upload_path['path']).$meta['file'];
}
list($orig_type) = @getimagesize($file);
switch ($orig_type) {
case IMAGETYPE_PNG:
$png_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$png_image.".webp");
break;
case IMAGETYPE_JPEG:
$jpg_image = preg_replace('/\\.[^.\\s]{3,4}$/', '', $file);
exec("cwebp ".$file." -o ".$jpg_image.".webp");
break;
}
// return
wp_update_attachment_metadata($id, $meta);
return $meta;
}
}
add_filter('wp_generate_attachment_metadata','my_image_webp', 10, 2);
Currently, my post content has got <img> element to display the thumbnail within <p> tag, but the <img> tag is a link <a> which points to the full-size image.
Currently I have got this for full-size image in the post content:
<p>
<a href="http://www.example/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
<img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
</a>
</p>
I am trying to modify it to get this as result:
<p>
<a href="http://www.example/wp-content/uploads/2018/11/image-full.jpg" itemprop="url" title="Some title">
<picture>
<source srcset="http://www.example/wp-content/uploads/2018/11/image-thumb.webp" type="image/webp" />
<img alt="Alt tag of the image" class="alignnone size-full" src="http://www.example/wp-content/uploads/2018/11/image-thumb.jpg" width="940" height="529">
</picture>
</a>
</p>
I have one or more images inserted like this. So, would need to check the whole post content and somehow modify/replace this?
Should I use some preg_replace() or WordPress image_send_to_editor() function?
Maybe using some filter?
Do you have any ideas how to change it?
I have found some solutions for <figure> element, but cannot get it working with <picture>.
-
1
I think there are several questions to unpack from this, 1) how do I make WP use
pictureelements instead ofimgelements. 2) How do I make WP generatewebpversions of images on upload, both of which should be separate questions, not the same questions. Case in point, the first question of picture elements is much easier than the second, but you won't get those answers because people will need to answer the whole question ( and it must be a single whole answer ) – Tom J Nowell ♦ Commented Nov 26, 2018 at 18:38 -
1
I'd recommend editing out the
webppart of your question, then opening a second new question once you have the answer to "How do I use picture elements instead of img tags" – Tom J Nowell ♦ Commented Nov 26, 2018 at 18:38 - 1 @TomJNowell - Just added the code for .webp image generation on image upload. – Kiki FIstrek Novi Commented Nov 26, 2018 at 18:45
1 Answer
Reset to default 3You have to loop through all images inside $post the_content() using foreach().
Which gives us, regex for group matching of <img> tag. Put all images into array().
Start counting from -1 since 0 has the 1st image already in array().
Loop through array() with images, find image with "size-full" with group match 3, if yes, get it's src value with group match 7.
After, replace src="value" extenstion - .png, .jpg ..., assign the replaced string to new variable. Use the new variable and add extension ".webp" to the it.
Replace existing <img> tags with <picture> element and call the function on $content.
function webp_picture_fix($content){
global $post;
preg_match_all("/<img(.*?)class=('|\")(.*?)('|\")(.*?)src=('|\")(.*?)('|\")(.*?)>/i", $content, $images);
if(!is_null($images)){
$i = -1;
foreach ($images as $key) {
$i++;
//echo $key[$i];
if(strpos($images[3][$i], 'size-full') !== false){
//echo "hi";
$slika_ekstenzija = $images[7][$i];
$sewebp = preg_replace('/\\.[^.\\s]{3,4}$/', '', $slika_ekstenzija);
$webp_slika_src = $sewebp.".webp";
$replacement = '<picture><source srcset="'.$webp_slika_src.'" type="image/webp" /><img'.$images[1][$i].'class='.$images[2][$i].$images[3][$i].$images[4][$i].$images[5][$i].'src='.$images[6][$i].$images[7][$i].$images[8][$i].$images[9][$i].'></picture>';
$content = str_replace($images[0][$i], $replacement, $content);
}
}
}
return $content;
}
add_filter('the_content', 'webp_picture_fix', 9999);
本文标签：
版权声明：本文标题：functions - How do I use <picture> element instead of <img> tags in WordPress post content having we 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/questions/1749150448a2323726.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
pictureelements instead ofimgelements. 2) How do I make WP generatewebpversions of images on upload, both of which should be separate questions, not the same questions. Case in point, the first question of picture elements is much easier than the second, but you won't get those answers because people will need to answer the whole question ( and it must be a single whole answer ) – Tom J Nowell ♦ Commented Nov 26, 2018 at 18:38webppart of your question, then opening a second new question once you have the answer to "How do I use picture elements instead of img tags" – Tom J Nowell ♦ Commented Nov 26, 2018 at 18:38