You can now attach images to posts, and then create a before/after slider graphic on the forum.
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.)
| You must be logged in to view this content; either login or register for the forum. The attached screen shots, before/after images, photos and graphics are created/posted for the benefit of site members. And you are invited to join our digital media community. |
Example of text immediately under comparison. (testing spacing.)
______
It works like this:
- Prepare your images. They MUST be identical pixel sizes. For example, both 640x480.
- 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
- Write out all of your text, etc. Do that part now. Then publish the post.
- 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.
- 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:
- Before image
- After image
- Width
- Height
- 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.
