Alt tag is empty when no thumbnail

Resolved Lolo9002
(@lolo9002)

2 years, 9 months ago

Hello.

When there is no thumbnail available for a post, the “ALT” tag is empty.

– Post with a thumbnail (ie Featured image) : tag is OK

As <img width="150" height="150" src="https://www.domain.tld/wp-content/uploads/image.png" class="wpp-thumbnail wpp_featured attachment-thumbnail size-thumbnail wp-post-image" alt="alternative_text_from_the_media_library" loading="lazy">

– Post without thumbnail (default thumbnail is taken from the media library) : tag is not OK

As <img src="https://www.domain.tld/wp-content/uploads/default.png" width="150" height="150" alt="" class="wpp-thumbnail wpp_featured wpp_def_no_src" loading="lazy">

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Author Hector Cabrera
(@hcabrera)

2 years, 9 months ago
Hi @lolo9002,

That’s intended. The plugin will try to use the ALT image assigned to each image (so that’s working as you reported), however when the post doesn’t have an image WPP defaults to the stock No thumbnail image which doesn’t have an ALT image assigned to it. The plugin doesn’t assign one as a fallback as you already noticed, hence why said attribute is empty for posts without featured images.

You can use the undocumented wpp_thumbnail_alt_attribute filter hook to assign an ALT attribute to thumbnails that have no ALT attribute set:
```
/**
 * Assigns an ALT attribute to thumbnails that have no ALT attribute set.
 *
 * @param  string  $alt_attribute
 * @param  int     $post_ID
 * @return string  $alt_attribute
 */
function fallback_alt_attribute_for_wpp_thumbnails($alt_attribute, $post_ID) {
    if ( '' == $alt_attribute ) {
        // Assign a value to the $alt_attribute variable here,
        // like the post title for example:
        //
        // eg. $alt_attribute = get_post_field('post_title', $post_ID);
    }

    return $alt_attribute;
}
add_filter('wpp_thumbnail_alt_attribute', 'fallback_alt_attribute_for_wpp_thumbnails');
```
- This reply was modified 2 years, 9 months ago by Hector Cabrera. Reason: Reworded for clarity
Plugin Author Hector Cabrera
(@hcabrera)

2 years, 9 months ago

Alternatively, you can also just make sure that all of your popular posts have a featured image assigned to them and that said image has its ALT attribute set.
Thread Starter Lolo9002
(@lolo9002)

2 years, 9 months ago
Hi and thanks @hcabrera ,

But it seems that the filter is never called.

I tried with
```
function fallback_alt_attribute_for_wpp_thumbnails($alt_attribute, $post_ID) {
    if ( '' == $alt_attribute ) {
	$alt_attribute = 'No thumbnail';
    }
    return $alt_attribute;
}
add_filter('wpp_thumbnail_alt_attribute', 'fallback_alt_attribute_for_wpp_thumbnails');
```
- This reply was modified 2 years, 9 months ago by Lolo9002.
Plugin Author Hector Cabrera
(@hcabrera)

2 years, 9 months ago

Oh, you’re right. Just checked the code and the plugin filters the ALT attribute only for posts that have images. When no thumbnail is found the plugin doesn’t run this hook, I’ll have to change that so thanks for the heads up.

Thread Starter Lolo9002
(@lolo9002)

2 years, 9 months ago

@hcabrera

Thx for your feedback.

BTW I have learned a lot about apply_filter, add_filter… by seraching why this doesn’t work.

I hope the changes are not too difficult.
dinglina292
(@dinglina292)

2 years, 9 months ago
Sorry, I cannot create a new topic at the moment, so I can only ask my questions here.

I used the thumbnail code
```
<?php
if ( function_exists('wpp_get_mostpopular') ) {
 
    $args = array(
        'range' => 'last7days',
        'post_type' => 'post',
		'limit' => 12,
        'thumbnail_width' => 325,
        'thumbnail_height' => 170,
        'wpp_start' => '<div class="row">',
        'post_html' => '<article id="post-{pid}" class="col-md-4 col-sm-12">
<div class="entry-thumb">{thumb}</div><div class="entry-detail">
<header class="entry-header">
<h2 class="entry-title">{title}</header>
<div class="entry-excerpt">
</div>
</div>
</article>',
    );
    wpp_get_mostpopular( $args );
 
}
?>
```
I showed a total of 12 popular articles, 3 articles per line, 4 lines in total.

How can I make 3 articles per line be included in the code below?
```
<div class="row">

</div>
```
The <div class=”row”> contains 3 articles, it will appear 4 times and 12 articles are displayed.

thanks
Best regards,
Plugin Author Hector Cabrera
(@hcabrera)

2 years, 9 months ago

BTW I have learned a lot about apply_filter, add_filter… by seraching why this doesn’t work.

Glad to know that. A day where you learn something new is always a good day, @lolo9002 🙂

I hope the changes are not too difficult.

Don’t worry about it, it’s a fairly simple change.

How can I make 3 articles per line be included in the code below?

For this you’d need some more advanced PHP coding, @dinglina292. The post_html attribute is meant to be used for stuff that doesn’t require any logic.

In order to add a wrapper for every 3 articles you could for example hook into the wpp_custom_html filter hook. This would allow you to add any custom logic you need to get the HTML output you need.

Personally, however, I would go for a different approach: you could just use CSS Grids or Flexbox to achieve your desired layout. Some time ago I wrote a tutorial that uses the former, maybe it can help get you on the right track: How to display a grid of popular posts in WordPress.

Additionally, please try to open your own topic next time (and if you can’t for some reason then you may want to reach out to the moderator team so they can help you out.) Hijacking other people’s topics isn’t nice, especially if you’re going to talk about an entirely different matter.