New before/after images bbcode for forum
2 Attachment(s)
You can now attach images to posts, and then create a before/after slider graphic on the forum. :cool:
This will come in useful for posts where members, Site Staff and developers want to show off the comparisons (before and after shots) of video restoration work, photo editing, color corrections, Avisynth work, etc. We've long wanted such a feature on this site, but no off-the-shelf method existed. So I wrote one. It took quite a bit of research and testing, too! ______ Example of text immediately above comparison. (testing spacing.) Admin refused to unhide hidden content nothing will help to see hidden content Example of text immediately under comparison. (testing spacing.) ______ It works like this:
The bbcode looks like this: [hide][comp=news/2140d1324043287-before-after-images-deinterlaced-dropframe-540x405|news/2141d1324043287-before-after-images-deinterlaced-dropframe-540x405|540|405|interlaces][/comp][/hide] Or to maybe understand it better: [hide][comp=before.jpg|after.jpg|width|height|id][/comp][/hide] Let's add some color to help illustrate: comp=before.jpg|after.jpg|width|height|id There's 5 parts, in this specific order:
The full URL of an attached image will be in this format:
More notes: The [hide] tag is used to block non-members from seeing a broken mess on the page. Forum attachments (including images) are only viewable and/or downloadable by logged-in members. (And that should not be a problem, because the Free Member access level includes standard image/download permissions.) The vertical bar --- the | symbol -- is the separator between the 5 elements. After you've finished making your edits, and have saved your post --- you'll notice the slider isn't working! Reload (refresh) the page, and it will show up. Because each before/after combo has a unique ID, you can create multiple before/after image combos in a post. It does slow down page loading quite a bit, for pages where this code appears, so please use this feature in moderation. Anybody that blocks Javascript will see two images on top of one another. Of course, the site already has a top-of-screen warning for anybody that blocks JS. This site requires Javascript to function as intended, and there's no reason to block us anyway. Anybody not logged into the site will see two empty "broken image" boxes on top of one another. I've added a warning message, encouraging drive-by visitors to become part of our community. I've found a way to edit vBulletin core files to show warnings instead of broken links/images for normal IMG bbcode, but I've not yet figured out a way to block custom image-based bbcode. (I'd likely have to add the bbcode in part, or in whole, into the core bbcode templates. And I'm not quite sure how to do it ... yet.) And there we have it. :) |
Awesome! Thanks for the new feature!
|
Very cool! This should come in handy.
|
1 Attachment(s)
Quote:
Anybody not logged into the site will see this warning: Attachment 2144 This now applies to any image attached to the site. Previously, it showed links or broken image icons. This is much better, and lets people know something is missing. And they can get the missing content by simply joining the site, and being part of our community. Thanks for the feedback, Rob and Joe. :thumb: These mods have taken a significant amount of time to put into place, and I'll be submitting them to vBulletin.org, because most of what we've done here is not something that anybody has done before. At least not that I can see, and I've been pouring over vB.org searches for weeks. I'm rather pleased with how this forum is growing in features this year. |
Site design, images and content © 2002-2024 The Digital FAQ, www.digitalFAQ.com
Forum Software by vBulletin · Copyright © 2024 Jelsoft Enterprises Ltd.