Go Back    Forum > Featured > General Discussion

Reply
 
LinkBack Thread Tools
  #1  
12-16-2011, 07:45 AM
admin's Avatar
admin admin is offline
Site Staff | Web Development
 
Join Date: Jul 2003
Posts: 4,310
Thanked 654 Times in 457 Posts
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.
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.


Attached Images
File Type: jpg Deinterlaced-DropFrame-540x405-Before.jpg (34.9 KB, 121 downloads)
File Type: jpg Deinterlaced-DropFrame-540x405-After.jpg (34.9 KB, 123 downloads)

- Did this site help you? Then upgrade to Premium Member and show your support!
- Also: Like Us on Facebook for special DVD/Blu-ray news and deals!
Reply With Quote
The following users thank admin for this useful post: robjv1 (12-16-2011)
Someday, 12:01 PM
admin's Avatar
Ads / Sponsors
 
Join Date: ∞
Posts: 42
Thanks: ∞
Thanked 42 Times in 42 Posts
  #2  
12-16-2011, 05:13 PM
Joekster Joekster is offline
Free Member
 
Join Date: May 2011
Posts: 24
Thanked 5 Times in 4 Posts
Awesome! Thanks for the new feature!
Reply With Quote
The following users thank Joekster for this useful post: admin (12-18-2011), kpmedia (12-16-2011)
  #3  
12-16-2011, 09:05 PM
robjv1 robjv1 is offline
Free Member
 
Join Date: Jun 2009
Posts: 187
Thanked 37 Times in 33 Posts
Very cool! This should come in handy.
Reply With Quote
The following users thank robjv1 for this useful post: admin (12-18-2011), kpmedia (12-17-2011)
  #4  
12-18-2011, 07:15 AM
kpmedia's Avatar
kpmedia kpmedia is offline
Site Staff | Web Hosting, Photo
 
Join Date: Feb 2004
Posts: 4,311
Thanked 374 Times in 341 Posts
Quote:
Originally Posted by admin View Post
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.)
This is now fixed.

Anybody not logged into the site will see this warning:

notlogged-warning.jpg

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.

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.



- Did my advice help you? Then become a Premium Member and support this site.
- Please Like Us on Facebook | Follow Us on Twitter

- Need a good web host? Ask me for help! Get the shared, VPS, semi-dedicated, cloud, or reseller you need.
Reply With Quote
Reply




Similar Threads
Thread Thread Starter Forum Replies Last Post
Resize displayed images in vBulletin 3.x, [IMG] bbcode hack admin Website and Server Troubleshooting 0 06-01-2011 04:20 AM
Scanning with ICE vs no ICE [Sample Images] kpmedia Photo Processing, Scanning & Printing 11 03-25-2010 07:33 PM
Background images with orange swirl design ndbs9u3 Author, Make Menus, Slideshows, Burn 2 12-11-2007 08:34 PM
Jittery/Shaky DVD Menu Images Konfusion Author, Make Menus, Slideshows, Burn 4 07-22-2007 12:40 AM
Jittery/choppy images w/ old VHS Triassical Capture, Record, Transfer 3 11-13-2004 06:13 PM

Thread Tools



 
All times are GMT -5. The time now is 08:31 AM