How to target each post shown on a View Topic phpBB page to inject HTML using Javascript

[melvinarda]

I have a phpBB forum where the image attachments or inline images (using an image link) in posts don't format how I want them to. I want them to be inline with each other, but not with the text that is before or after them. I don't want to rely on the user entering in manual line breaks in the post, as they often don't know to do it.

E.g. This is some text [I don't want the image here]

[and another one here] [I don't want more text here]



I have this working, partly, but the code places a
tag before the very first image on the entire page, and after the last image on the entire page. I'd like it to apply to each individual post on the page, affecting the first and last image within each.

This is my current code: `

Code: Select all

<script>
    var firstattachedimg = document.getElementsByClassName("inline-attachment")[0];
    firstattachedimg.insertAdjacentHTML('beforebegin', '<br>');
    
    var attachedimgs = document.getElementsByClassName("inline-attachment");
    for (var i = 0; i < attachedimgs.length; ++i) {
        var lastattachedimage = attachedimgs[i];
    }
    lastattachedimage.insertAdjacentHTML('afterend', '<br>');
</script>

My question is, how do I get that code to run per post on the View Topic page, rather than running for the entire page and not hitting the right images?

[cabot]

Hello,

The div.inline-attachment can contain all sorts of attachments, not just images.

Also, if your image attachments are displayed inline, that means you've modified the CSS so that their container is.

You should first look for the <img> tags in each post, then check that the image is an attachment or an "isolated" image.
Then, depending on the result, you add a <br> before/after the container of the attached image, or before/after the "isolated" image.

It's a bit cumbersome and redundant because I do it on the fly but you can test this:

Code: Select all

$('.postbody').find('.content').each(function () {
    var firstImg = $(this).find('img:first'),
        lastImg = $(this).find('img:last');

    if (firstImg.closest(".inline-attachment").length) {
        firstImg.closest(".inline-attachment").before('<br>');
    } else {
        firstImg.before("<br>");
    }
    if (lastImg.closest(".inline-attachment").length) {
        lastImg.closest(".inline-attachment").after('<br>');
    } else {
        lastImg.after("<br>");
    }
});

[Mick]

@OP: Can you post a screenshot of this working please, I’m interested myself?