Center align imgur links?

A pure CSS solution:

/* align images in topic/replies center */
div.bbp-reply-content img {
        display: block;
        margin-left: auto;
        margin-right: auto;
}

This may end up being added as a Style Pack option in the near future. It’s simple enough, and I can see many people wanting this besides just you ??

NOTE: This will align ANY image added to topic/reply, not just specifically imgur. If you wanted ONLY imgur as this topic mentions, then a pure CSS solution won’t work, and it’ll take some custom code to check the source URL of the image, and then only apply the above CSS to specific source URLs.

Let me know if this works for you and I’ll make as resolved (or you can).

That’s a nice solution. I think that you and @rob have to decide if it can be global or not. Personally, I don’t think that all users may want their images center aligned.

I think a bespoke setting for center aligning imgur and / or other image links would be best.

In other words :

1.) a global option for site owners to setup forum-wide default image alignment (would just add CSS to the generated bspstyle.css file) , and an the ability to choose whether users can override.

2.) if per-user override allowed, an option within the topic/reply form that allows users to align all images within that reply left/center/right (would add in-line style attributes on a per-div.bbp-reply-content basis).

Just curious, I haven’t tried it, but the align buttons in MCE visual editor should allow aligning images left/center/right on a per-image basis. If that’s not the case then perhaps something can be do with that. That’s kinda why I figured you were looking for a “global center all images” CSS snippet in the first place.

You have access to my forum. Visit:

https://www.publictalksoftware.co.uk/support-forums/topic/how-do-i-remove-this-blank-line-from-the-schedule/#post-11400

I edited the post and center aligned the imgur links. After submitting they showed just as links.

So I edited again and left aligned. Hit submit and they are still just links.

Before I tried changing the alignment they were just images. Why that happen?

And to be honest, imgur puts a lot of wasted white space. I wish we could just link and display an image with no noise. I used to upload to my site but keeping the data I use down now.

Fot the imgur links to show as images I had to “clear” the styles. It has to have no “alignments” otherwise it shows as a link.

OK. Imgur is actually an iframe embed, not a direct img tag. This will center ONLY imgur embeds:

/* imgur center image embeds */
iframe.imgur-embed-iframe-pub {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
}

Bonus: set the width to 100% too:

/* imgur center image embeds with 100% width */
iframe.imgur-embed-iframe-pub {
        display: block;
        margin-left: auto !important;
        margin-right: auto !important;
        min-width: 100% !important;
}

I also tested the code I previously gave to you against your site and it does not appear to negatively affect the imgur iframe embeds. I was not able to duplicate the issues you described.

But, based on what you said, you could use the first CSS snippet to align all regular img tags center & one of the second CSS snippets to center imgur embeds, and theoretically, this third snippet should prevent them from conflicting like you described:

/* imgur prevent img tag conflicts */
iframe.imgur-embed-iframe-pub img.post {
        display: inline-block;
        width: auto;
}

Again, I couldn’t duplicate the issues you described so I can’t test this, but it should theoretically work.

I applied your suggestion for imgur with 100% and IMHO the topic looks much better.

When this becomes an option in BSP I will remove my custom styles.

Thanks again.

Good deal. Marking as resolved, and I’ll keep thinking about the best way to implement this that would be helpful to most forum owners.