Looks ugly after the last upgrade

@grzegorzjanoszka

Is this a custom set of code to generate the outputs?

The a tag wraps around the thumbnail and the box at the bottom but right now there are two a tags.

Ajay, I just replace img with <picture> stanza. I am not adding another a tag.

I hook to crp_get_image_html and I replace img with picture, source, img and so on.

Do you know why there is a second <a class=crp_title> tag in the output. The plugin generates just a single one. The reason you’re seeing this weird layout is that the width/height of the bottom one is being set to 250 just like the top one.

My code is:

add_filter( 'crp_get_image_html', 'avif_crp', 10, 1 );
function avif_crp ($html) {
        preg_match('/src=[\'"](.*?)\.(jpg|png)[\'"]/i',$html,$matches);
        if (isset($matches)) {
                $avifurl = $matches[1].".avif";
                $aviffile = explode( '.pl',  $avifurl )[1];
                if ($aviffile && file_exists (ABSPATH.$aviffile))
                  return '<picture><source srcset="'.$avifurl.'" type="image/avif">'.$html.'</picture>';
        }
        return $html;
}

And the second <a tag appeared in the very last upgrade.

@grzegorzjanoszka

That’s strange – if you see this code: https://github.com/WebberZone/contextual-related-posts/blob/715125bd8e9e89bb73072d0a2adaf6280d9a1ea3/includes/output-generator.php#L291

There is a single a tag that wraps across the entire output so you shouldn’t be seeing two a tags. Can you please double check what’s generating that in your code?

I use two CRP hooks: crp_get_image_attributes and crp_get_image_html.
Even if I remove these hooks and not mess with CRP at all, I still have the same result.

What was changed in the last update that could have caused it?

I wrapped the image tags in figure

https://github.com/WebberZone/contextual-related-posts/compare/v3.0.3…v3.0.5

So when I add picture inside figure this is when something goes wrong.

I found https://stackoverflow.com/questions/12899691/use-of-picture-inside-figure-element-in-html5 and it seems I it is OK.

Anyway I have switched it off all my code hooking CRP and I have plain vanilla output of CRP and it has two links and looks ugly.

I took a look at my settings and I have:

Before the list of posts	<ul>
After the list of posts		</ul>
Before each list item		<li>
After each list item		</li>

Can it be related?

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

Well, I can answer myself. The settings are fine. But I just edited the code and removed the figure tag and everything is fine! So it seems it was the figure breaking things, even without my modifications. Is the figure really needed, especially when it breaks things?

I’ve not seen figure breaking the code. In fact it is only your site where there are two different a tags being created and I just can’t figure out why.

Even the picture inside figure should not be creating the issue. Are you able to try with another theme and/or enable the automatically add to setting in the plugin page.

The idea of the figure was to semantically organise the content but it shouldn’t break the code around it.

One solution I can think of given your install is to write a filter for crp_list_link to replace the figure tags and see if that fixes things?

Ajay,
The only specific thing might be I run CRP in a widget. I have a shortcode that does:

        if ( function_exists( 'echo_crp' ) ) {
          ob_start();
          echo_crp();
          $output = ob_get_contents();
          ob_end_clean();
        }

So the problem might be caused somewhere here. Did you hear about anyone running CRP this way?

Does it work if you don’t use this code? Although I don’t see why this would be an issue as the widget uses get_crp under the hood just as echo_crp

Some more info. When I use echo_crp (array(‘is_widget’ => 1)) then I don’t get the ugly view, although it doesn’t look pretty either – formatting is gone.
The double space appears when is_widget is off.
I modified the setup to use get_crp instead of echo_crp but it is the same.

If I don’t use the code then I don’t get any display, but I actually want the related posts to be displayed.

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