So Wordpress is outputting this
<img src="http://site.com/path/to/image.png"; alt="Text" width="600" height="100" class="alignnone size-full wp-image-168" />
However, I would like it to output this
<img src="http://site.com/path/to/image.png"; alt="Text" width="600" height="100" class="full wp-image-168" />
Removing the align class and removing the size- part.
How can I go about this via a filter in the functions.php file?
So here are a couple filters that may work for what you need.
add_filter( 'post_thumbnail_html', 'remove_image_classes', 10 );
add_filter( 'image_send_to_editor', 'remove_image_classes', 10 );
function remove_image_classes( $html ) {
$html = preg_replace( '/(size-|alignnone)/', "", $html );
return $html;
}
I don't know if I got that preg_replace right. Try it out and see if it modifies your code.
Related
I want to use tag in WordPress instead of tag, for example:
How can I convert this:
<img src="http://example.com/pic.jpg" alt="">
to this:
<picture>
<source type="image/avif" srcset="http://example.com/pic.avif">
<source type="image/webp" srcset="http://example.com/pic.webp">
<img src="http://example.com/pic.jpg" alt="">
</picture>
(pic.avif, pic.webp exits, not how to generate these pics)
what should I do?
I tried the code below, but it doesn't work.
function wp_image_add_picture_tag( $html, $attachment_id, $size, $icon, $attr ){
$srcset = wp_get_attachment_image_srcset( $attachment_id, $size );
$html = '<picture><source type="image/avif" srcset="http://example.com/'.$srcset.'#avif"><source type="image/webp" srcset="http://example.com/'.$srcset.'#webp">'.$html.'</picture>';
return $html;
}
add_filter( 'wp_get_attachment_image', 'wp_image_add_picture_tag', 10, 5 );
I'm new to WordPress so a detailed explanation would be appreciated.
I'm using wordpress and I want to change the logo on some pages. Since the theme I'm using (flatsome) doesn't support this I thought using php would be a good idea. I'm not sure how to do it though.
I tried this:
<?php
function change_logo_on_single($html) {
if(is_single( array(1441, 1425, 1501, 1494, 1498, 1503))){
$html = preg_replace('<a(.*?)><img(.*?)><img(.*?)></a>',
'<a href="https://example.com/" title="" rel="home">
<img width="146" height="150" src="https://example.com/wp-content/uploads/2021/02/Logo.png" class="header_logo header-logo" alt="">
<img width="146" height="150" src="https://example.com/wp-content/uploads/2021/02/Logo.png" class="header-logo-dark" alt="">
</a>', $html);
}
return $html;
}
add_filter('get_custom_logo','change_logo_on_single');
?>
I think I used the wrong pattern in preg_replace. Can someone suggest a way to do it?
I'm a bit lost here. I'm trying to replace src tag with data:image/gif;base64,R0lGODlhAQABAPABAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw== for lazy loading and add class lazyload so lazysizes could work. But none of that is successful here.
Am I missing something?
public static function filter_lazy_load_gravatar( $html ) {
$html = preg_replace( '/src="(http:\/\/([^\/]+)\/)?([^"]+)"/', 'src="data:image/gif;base64,R0lGODlhAQABAPABAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw=="', $html);
$html = str_replace( 'srcset=', 'data-srcset=', $html );
$pat = '/class="([^"]*)"/';
$html = preg_replace($pat, 'class="$1 lazyload"', $html);
return $html;
}
Input
<img alt="" src="http://gravatar.com/image.jpg" srcset="http://0.gravatar.com/avatar/0b11f7eec98d2ee78414a4322ea94a01?s=400&d=mm&r=g 2x" class="avatar avatar-200 photo" height="200" width="200">
Expected output
<img alt="" src="data:image/gif;base64,R0lGODlhAQABAPABAAAAAP///yH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" data-srcset="http://0.gravatar.com/avatar/0b11f7eec98d2ee78414a4322ea94a01?s=400&d=mm&r=g 2x" class="avatar avatar-200 photo lazyload" height="200" width="200">
I have the following text in a page. As you can see my shortcode is right at the bottom but somehow when the code runs, the output of my shortcode is inserted at the top of the page instead of following its preceding content.
<img class="alignnone" title="title_enquires" src="http://localhost/barcelona/wp-content/uploads/2011/08/title_enquires.jpg" alt="" width="589" height="77" />
<img class="alignnone" title="contact_map" src="http://localhost/barcelona/wp-content/uploads/2011/08/contact_map.jpg" alt="" width="555" height="222" />
[barcelona_address]
Here is my short code registration inside the function.php file:
<?php
add_shortcode( 'barcelona_address', 'barcelona_shortcode_handler' );
function barcelona_address_func()
{
print "<p>sdsdsds</p>";
}
function barcelona_shortcode_handler( $atts, $content=null, $code="" )
{
if (function_exists($code . "_func"))
{
call_user_func($code . "_func", $atts);
}
}
?>
And the result is:
<p>sdsdsds</p>
<img class="alignnone" title="title_enquires" src="http://localhost/barcelona/wp-content/uploads/2011/08/title_enquires.jpg" alt="" width="589" height="77" />
<img class="alignnone" title="contact_map" src="http://localhost/barcelona/wp-content/uploads/2011/08/contact_map.jpg" alt="" width="555" height="222" />
Your shortcode handler is supposed to return the output to display in place of the shortcode, not output anything itself.
http://codex.wordpress.org/Shortcode_API
You can use as alternative:
ob_start();
...your code...
return ob_get_clean();
and use without return the html as string.
I have the following text in a page. As you can see my shortcode is right at the bottom but somehow when the code runs, the output of my shortcode is inserted at the top of the page instead of following its preceding content.
<img class="alignnone" title="title_enquires" src="http://localhost/barcelona/wp-content/uploads/2011/08/title_enquires.jpg" alt="" width="589" height="77" />
<img class="alignnone" title="contact_map" src="http://localhost/barcelona/wp-content/uploads/2011/08/contact_map.jpg" alt="" width="555" height="222" />
[barcelona_address]
Here is my short code registration inside the function.php file:
<?php
add_shortcode( 'barcelona_address', 'barcelona_shortcode_handler' );
function barcelona_address_func()
{
print "<p>sdsdsds</p>";
}
function barcelona_shortcode_handler( $atts, $content=null, $code="" )
{
if (function_exists($code . "_func"))
{
call_user_func($code . "_func", $atts);
}
}
?>
And the result is:
<p>sdsdsds</p>
<img class="alignnone" title="title_enquires" src="http://localhost/barcelona/wp-content/uploads/2011/08/title_enquires.jpg" alt="" width="589" height="77" />
<img class="alignnone" title="contact_map" src="http://localhost/barcelona/wp-content/uploads/2011/08/contact_map.jpg" alt="" width="555" height="222" />
Your shortcode handler is supposed to return the output to display in place of the shortcode, not output anything itself.
http://codex.wordpress.org/Shortcode_API
You can use as alternative:
ob_start();
...your code...
return ob_get_clean();
and use without return the html as string.