Looks ugly after the last upgrade

@grzegorzjanoszka there was a bug in v3.0.6 which I fixed in 3.0.7.

What’s the HTML markup that you’re getting with is_widget=>1 vs it not being on?

When I mark “automatically add related posts to posts, I can see a proper display. The only difference is that I want run CRP in a small widget on the left column.

The widget has just a small text calling a shortcode and this shortcode checks if some conditions are met and then returns contents of get_crp.

I have tried setting is_widget or is_manual to 0 or 1 but it doesn’t change anything.

The HTML markup of “ugly” display is:

<li><a href="https://paleosmak.pl/wegetarianizm/" target="_blank" class="crp_link page-8000" rel="noopener"><br /><figure><picture><source data-srcset="https://paleosmak.pl/uploads/2016/04/wegetarianizm-paleo-smak-150x150.avif" type="image/avif"><noscript><img style="max-width:150px;max-height:150px;" src="https://paleosmak.pl/uploads/2016/04/wegetarianizm-paleo-smak-150x150.jpg" class="crp_thumb crp_firstcorrect" alt="Dieta wegetariańska" title="Dieta wegetariańska" /></noscript><img style="max-width:150px;max-height:150px;" src='data:image/svg+xml,%3Csvg%20xmlns=%22https://www.w3.org/2000/svg%22%20viewBox=%220%200%20210%20140%22%3E%3C/svg%3E' data-src="https://paleosmak.pl/uploads/2016/04/wegetarianizm-paleo-smak-150x150.jpg" class="lazyload crp_thumb crp_firstcorrect" alt="Dieta wegetariańska" title="Dieta wegetariańska" /></picture></figure><p><span class="crp_title">Dieta wegetariańska</span></a></li>

So there is actually one tag, but there are two tags – one with noscript. Is it supposed to be like that?
For sure I don’t add this code.

Ah, I know, the lazyload was from another plugin and I have now turned it off. Now it is easier:

<li><a href="https://paleosmak.pl/wegetarianizm/" target="_blank" class="crp_link page-8000" rel="noopener"><br /><figure><picture><source srcset="https://paleosmak.pl/uploads/2016/04/wegetarianizm-paleo-smak-150x150.avif" type="image/avif"><img style="max-width:150px;max-height:150px;" src="https://paleosmak.pl/uploads/2016/04/wegetarianizm-paleo-smak-150x150.jpg" class="crp_thumb crp_firstcorrect" alt="Dieta wegetariańska" title="Dieta wegetariańska" /></picture></figure><p><span class="crp_title">Dieta wegetariańska</span></a></li>

That’s interesting, as I don’t had a noscript either. Is there any other plugin that could be doing this? Or something that interferes only with that portion of your site as it works properly elsewhere.

Are you able to try to remove the <figure> and </figure> tags via crp_list_link filter to see if it makes a difference?

https://github.com/WebberZone/contextual-related-posts/blob/715125bd8e9e89bb73072d0a2adaf6280d9a1ea3/includes/output-generator.php#L291

Actually when I dump HTML to a file, there is a correct output, but somehow when I display the source code in the browser, then I see two <a> tags splitted by <p>. Can this be a javascript run by the page to somehow modify the source code?

• This reply was modified 3 years, 8 months ago by Grzegorz.Janoszka.

I see the only difference is the <p> tag somehow appearing between the </figure> and <span> tags. It may be added only by the shortcode processing.

What is interesting – when I remove <figure> I don’t get that additional <p> and there is only one <a> and everything looks all right.

But with figure tag in the output, somehow wordpress adds in the shortcode processing the <p> which then splits the <a> into two.

• This reply was modified 3 years, 8 months ago by Grzegorz.Janoszka.
• This reply was modified 3 years, 8 months ago by Grzegorz.Janoszka.

It is the widget thing I think. Adding the code:

remove_filter('widget_text_content', 'wpautop');

fixes everything and I can have <figure> tags.

But I have no idea why it works without <figure> and adding <figure> suddenly breaks it ??

Wow! That’s an amazing find. In the automatically add, wpautop must be running after CRP which is why you don’t see that. However, here it’s running before.

I’m thinking – is there a reason you’re not using the CRP widget instead?

I tried the widget, but I can’t make it to display nice rounded thumbnails with title on them. It just shows square pictures and/or text.

Right now, I haven’t styled the widget – but I plan on adding an option to pick from the styles – now that I have a few. Will put it in the next version most likely.

A quick way to do it would be to use the styles from here: https://github.com/WebberZone/contextual-related-posts/blob/master/css/rounded-thumbs.css

And replace .crp_related with .crp_related_widget

Ajay,

I am fine with my shortcode, it is fine and it works fine. Thank you for your support.

Sounds good!