New before/after images bbcode for forum
 

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:

1. Prepare your images. They MUST be identical pixel sizes. For example, both 640x480.
2. Make a new post. Attach both images (JPEG, PNG or GIF) to the post. Do not make them "inline" attachments; that is, you'll upload the images to the site, but you won't "paperclip" them into the post itself, as you'd normally do for images
3. Write out all of your text, etc. Do that part now. Then publish the post.
4. Immediately go back and quick edit the post. The "quick" edit is when you can edit the post without going to the dedicated posting/editing page.
5. At this point, you'll enter some specific information. You'll have to know the full URL for the attached image. (This before/after ONLY works on attached images right now.) Right-click on the attachment link at the bottom of the post, which you'll still see in quick edit mode, and copy the URL. Copy it into the post, or into Notepad, and we'll use it to edit.

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:

1. Before image
2. After image
3. Width
4. Height
5. Any unique name for the div container

The full URL of an attached image will be in this format:

• http://www.digitalfaq.com/forum/attachments/news/2140d1324043287-before-after-images-deinterlaced-dropframe-540x405
• news/2140d1324043287-before-after-images-deinterlaced-dropframe-540x405 is all you need
• Do note that there is NOT a .jpg, .gif, etc on these attachment URLs.

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.

This is now fixed. :thumb:

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.