Problem with display of avatar image

Hi @schweizerschoggi,

If you’re using the Block Editor on your site please insert the shortcode into your page using the Shortcode block (as adviced here). For example:

As a general rule please avoid pasting shortcodes directly into the Post/Page Edit screen, especially if you’re using HTML code with it, otherwise WordPress will automatically convert any HTML code it finds into their HTML entity version -as you can see on your second screenshot– breaking your code in the process.

Now that your shortcode has been mangled by the WordPress editor (see screenshot below) you’ll need to replace every instance of < and > in your shortcode with < and > respectively for it to work as intended.

We’re still using Classic editor – does it make a difference?

And the use of HTML code became necessary because we use the Top Posts in combination with another plugin. So far this has also worked without any problems.

I’ll try anyway, if the switch changes something.

No, unfortunately this advice does not change anything.
The problem seems to be inside the post_html part, where we do use some nested divs.

As said before, this hasn’t been a problem so far.
But I just recognized that our WP version has been updated from 6.1.x to 6.3 recently. Maybe this caused the problem somehow…?

We’re still using Classic editor – does it make a difference?

The Classic Editor has its own problems too so yes, using it there can mess with your shortcode as well. In Classic editor’s case, switching between the Visual tab and the Text tab will mess up your shortcode if it contains HTML code – like your [wpp] shortcode does.

Also, I just realized that you’re using {avatar} in your shortcode. After checking your post history here I remembered that {avatar} is a custom Content Tag I helped you create over 2 years ago (at the time of writing this).

With that in mind, now that you mentioned it yes there have been some changes between 6.1 and 6.3 that might cause this issue you’re having now. Try this:

1. Find the wpp_parse_tags_in_popular_posts() function in your theme’s functions.php file (if you followed my instructions from back then that’s where this function should be).
2. Within said function, find , [ 'extra_attr' => 'itemprop="image"' ] and remove it completely (including the comma at the start).

This is how your wpp_parse_tags_in_popular_posts() function should look like now:

/**
 * Parses custom content tags in WordPress Popular Posts.
 *
 * @param  string  $html    The HTML markup from the plugin.
 * @param  integer $post_id The post/page ID.
 * @return string
 */
function wpp_parse_tags_in_popular_posts( $html, $post_id ){

    // Replace custom content tag {tags} with a actual
    // post tags
    if ( false !== strpos($html, '{tags}') ) {
        $tags = '';
        $tags_separator = ', ';

        // Get the post tags
        $tags_arr = get_the_tags( $post_id );

        if ( $tags_arr ) {
            foreach ( $tags_arr as $tag ) {
                $tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;
            }

            $tags = trim( $tags, $tags_separator );
        }

        // Replace {tags} with the value of $tags
        $html = str_replace( '{tags}', $tags, $html );
    }

    // Replace custom content tag {avatar} with a actual
    // author avatar
    if ( false !== strpos($html, '{avatar}') ) {
        // Get the author ID
        $author_id = get_post_field( 'post_author', $post_id );
        // Get the avatar
        $avatar = get_avatar( $author_id, '', '', '' );

        // Replace {avatar} with the value of $avatar
        $html = str_replace( '{avatar}', $avatar, $html );
    }

    return $html;

}
add_filter( "wpp_parse_custom_content_tags", "wpp_parse_tags_in_popular_posts", 10, 2 );

Give that a try and report back your results.

So I was curious and tried replicating this issue and found that the problem is the get_avatar() function in wpp_parse_tags_in_popular_posts().

Basically get_avatar() is returning an <img /> tag -which is what we expect- however said tag is using single quotes (') to wrap the values of each property instead of double quotes ("), which in turn causes the issue you’re seeing now. For example:

<img alt='' src='https://2.gravatar.com/avatar/0000000000000000000000?s=96&r=pg' srcset='https://2.gravatar.com/avatar/0000000000000000000000?s=192&r=pg 2x' class='avatar avatar-96 photo' height='96' width='96' loading='lazy' decoding='async'/>

This is what WordPress Popular Posts expected to receive from get_avatar():

<img alt="" src="https://2.gravatar.com/avatar/0000000000000000000000?s=96&r=pg" srcset="https://2.gravatar.com/avatar/0000000000000000000000?s=192&r=pg 2x" class="avatar avatar-96 photo" height="96" width="96" loading="lazy" decoding="async"/>

The plugin didn’t really care about what get_avatar() was returning but now it’s more strict with the HTML code it receives. This is why your {avatar} content tag is breaking now.

So let’s make a few changes:

#1 Update your wpp_parse_tags_in_popular_posts() to this version:

/**
 * Parses custom content tags in WordPress Popular Posts.
 *
 * @param  string  $html    The HTML markup from the plugin.
 * @param  integer $post_id The post/page ID.
 * @return string
 */
function wpp_parse_tags_in_popular_posts( $html, $post_id ){

    // Replace custom content tag {tags} with a actual
    // post tags
    if ( false !== strpos($html, '{tags}') ) {
        $tags = '';
        $tags_separator = ', ';

        // Get the post tags
        $tags_arr = get_the_tags( $post_id );

        if ( $tags_arr ) {
            foreach ( $tags_arr as $tag ) {
                $tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;
            }

            $tags = trim( $tags, $tags_separator );
        }

        // Replace {tags} with the value of $tags
        $html = str_replace( '{tags}', $tags, $html );
    }

    // Replace custom content tag {avatar} with a actual
    // author avatar
    if ( false !== strpos($html, '{avatar}') ) {
        // Get the author ID
        $author_id = get_post_field( 'post_author', $post_id );
        // Get the avatar
        $avatar = get_avatar( $author_id, 96, '', '', [ 'extra_attr' => 'itemprop="image"' ] );
        // Replace single quotes coming from get_avatar() to double quotes
        $avatar = str_replace(['\''], '"', $avatar);

        // Replace {avatar} with the value of $avatar
        $html = str_replace( '{avatar}', $avatar, $html );
    }

    return $html;

}
add_filter( "wpp_parse_custom_content_tags", "wpp_parse_tags_in_popular_posts", 10, 2 );

#2 To make sure that the itemprop="image" attribute isn’t removed from your avatars you’ll also need to add this code snippet to your theme’s functions.php file:

/**
 * Add itemprop property to image tags
 *
 * @param array  $tags Allowed tags, attributes, and/or entities.
 * @param string $context Context to judge allowed tags by. Allowed values are 'post'.
 *
 * @return array
 */
function allow_itemprop_property_for_img_tags( $tags, $context ) {

	if ( 'post' === $context ) {
		$tags['img']['itemprop'] = true;
	}

	return $tags;
}
add_filter( 'wp_kses_allowed_html', 'allow_itemprop_property_for_img_tags', 10, 2 );

If everything went well your avatars should be loading normally now.

• This reply was modified 1 year, 6 months ago by Hector Cabrera.

Dear Hector

You’re a real star!!!
The avatar images are back again with your changes, which is wonderful!
Thank you so much!

Before:
https://ibb.co/5ssGLSB

After:
https://ibb.co/34fv5tY

The only thing that has changed now is that the rel=”tag” attribute has been removed from the first link (the one above the post title (previously shown as a gray block, now a simple link)).

Can you “rescue” this one as well?

Let me know if and how I can buy you a coffee. I would really love to do that for your great help!

The only thing that has changed now is that the rel=”tag” attribute has been removed from the first link (the one above the post title (previously shown as a gray block, now a simple link)).

Can you “rescue” this one as well?

Ah, that’s an easy one to fix ??

In function wpp_parse_tags_in_popular_posts() find:

$tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '">' . __( $tag->name ) . '</a>' . $tags_separator;

and change it to:

$tags .= '<a href="' . esc_attr( get_tag_link( $tag->term_id ) ) . '" rel="tag">' . __( $tag->name ) . '</a>' . $tags_separator;

Let me know if and how I can buy you a coffee. I would really love to do that for your great help!

Of course! You can click on the Donate to this plugin button from the Description page (right side, under the Donate section) and that should take you right to the PayPal donation screen. Alternatively, you can also buy me a coffee via Ko-fi.

Thanks in advance for your generosity, and hope you have a great day!

https://ibb.co/ZLzh4W1

Works (of course) wonderfully, Hector!
Thank you very much, without you I would be lost.

Coffee is on the way – very well deserved!!

• This reply was modified 1 year, 6 months ago by SchweizerSchoggi.