Revert layout without reverting the changed markup

[internetwiki]

I am facing a challenge after the plugin developer changed the markup in an update.

Before the update (correct layout): https://codepen.io/any_formless/pen/WNpLyyj

After the update (wrong layout): https://codepen.io/any_formless/pen/YzZdLMR

The change is that the span is removed from the yellow element and from the image link. The span is added via a “custom code” field in the WP backend, and it’s the title of books.

The removal of the span from the yellow element and from the link is said to be a fix in the plugin update, so the markup is not supposed to be reverted.

My goal is to achieve the original layout only by the use of CSS.

It is important that in the fix the pink and yellow elements stay the same height, and that the black title element will fill all the available space vertically, once it’s back in the yellow element where it belongs, under the book cover, and that the book covers will keep a fixed width but flexible height, shrinking the title field vertically, if necessary. I have many yellow and pink elements in my wrapper columns, not only 2, it’s a variable number.

In the Codepens I tried to keep all the original CSS and markup as it was necessary for my layout, with fixed heights.

(I only used transform scale to scale down things for better view, because the book covers must stay in a high resolution for responsivity and scaled down for the browser at the time of page load.)

I tried floating and clearing elements and changing positioning, but nothing worked so far.

Is there any fix for this issue?

Thanks!

[lasjorg]

I don’t think you can reliably do that using CSS, especially not seeing as height and padding are calculated using vw. Also, without seeing the full context any change to the position might only work in isolation of the example you posted and not on the actual page.

You might be able to move the element back to its old position using JS but that also seems unreliable as the generated code and CSS is not under your control. So any update to the code might break everything again.

As long as the update doesn’t have any security fixes you might just revert back to the old version and not update it. But you need to be careful with that.

[internetwiki]

The example is completely isolated, the .wrapper is the isolator, so no worries.
Yes, vw is a must. It’s a quick dirty way to make things responsive.
I cannot use such a php filter

$string_to_replace = '';
        $replace_with = '';

        $html = str_replace( $string_to_replace, $replace_with, $html );
    }

    return $html;

because in reality the html is full with dynamically generated links and ID’s , so I cannot replace a whole block of HTML.
I want to be able to use the latest plugin version.

I am looking at php obflush, maybe that or JS.
Thanks for looking at it!

[internetwiki]

I mean a php output buffer that I try to use now. Is there much difference between that and the php code I posted above?

[internetwiki]

Ah, I think this might work as a generic filter that catches the final HTML and replaces this block:

$string_to_replace = '</a></div><span class="customeradtitle">Lorem Ipsum is simply dummy text.</span>';
        $replace_with = '<span class="customeradtitle">Lorem Ipsum is simply dummy text.</span></a></div>';

        $html = str_replace( $string_to_replace, $replace_with, $html );
    }

    return $html;

The only requirement is that the text (title) itself will not be considered because that is a variable, so the HTML sequence would be replaced, expect the text (title).

Could you say an opinion on this?
Because this is all I would need, actually.
And by this replacement the span would be included in the div and in the link also!

[lasjorg]

I don’t really write PHP so I’m not the best to answer this. I’m also not sure when the code you wrote will run. I guess you will have to test it.