Instruite's Blog

Before After Plugin: Display before after effects with photos.

Detailed Description:
Before After plugin integrates jQuery Before/After Plugin in the wordpress.
It can be used to show the difference between edited and original photo, before and after photos of changes, etc.

Please check ‘Other Notes’ for the Usage instructions to see how to use it on your blog.

Download: Before-After Wordpress Plugin.

Demosites:

1. Operation with Default wp theme

Installation:

• Plugin folder in the WordPress plugins folder must be `before-after`
• Upload folder `before-after` to the `/wp-content/plugins/` directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Check out ‘Usage Instructions’ for using it on your blog.

Limitations:

• Presently this plugin can only show before after effect on single post/page
• This plugin will show the effect only for 1 set of photos on single post/page

Usage Instructions

• Write the content of your post other than the images
• Switch to ‘HTML-editor’ mode of the post editor area
• Click ‘BeforeAfter’ button (This will start the ‘[beforeafter]‘ shortcode)
• Add the photos to your post through the wordpress image/media uploader
• Atleast 1 photo should be left align when you insert the images on your post
• The ‘left-aligned’ photo is taken as before photo so please align your photos accordingly
• After you have inserted the two images in the post Click ‘BeforeAfter’ button again to close ‘[/beforeafter]‘ shortcode.
• You can add more content to your post after closing the ‘[/beforeafter]‘ shortcode
• The content other than image information withing the ‘[beforeafter]…[/beforeafter]‘ is ignored when the shortcode is executed, in other places like home page archive page the content will be shown as is in the post.

Recent Photos Plugin: can be used to display recent photos from your media library in the sidebar.

Detailed Description:
Recent Photos Plugin provides with a widget to display n numbers of photos in the sidebar.
The display can be customized through custom css or integrated in main style sheet file of your theme. Plugin also provides an option to use Thickbox (along with the patch code necessary for running thickbox on wordpress).

Download: Recent Photos Plugin.

Demosites:

1. Demo with Default WP Theme
2. This website shows the use of this plugin customised by css.

Installation:

• Plugin folder in the WordPress plugins folder must be `recent-photos`
• Upload folder `recent-photos` to the `/wp-content/plugins/` directory
• Activate the plugin through the ‘Plugins’ menu in WordPress
• Go to WP Admin > Appereance > Widgets and put the ‘Recent Photos’ widget in your sidebar
• Configure the options as per your requirements and wordpress installation

Configuration Options:

• Title: Title for the widget will be displayed as per your theme
• Number of the photos: Number of photos that will be displayed in the sidebar
• Browse Photo Link: Full link to your photos/gallery page
  Leave blank if you don’t want to show the link.
• Use Thickbox: Enables/Disables the use of thickbox for this widget
• Wordpress Path: Applicable only if Thickbox is enabled
  This option is necessary to provide the patch for thickbox to correctly display thickbox related images (loadinganimation and close). If your wordpress installation is in a subdirectory provide the path for the same followed by a forward slash
  Eg. wordpress/ When the WP installation is in ‘wordpress’ subdirectory
• Use Custom CSS: Enable/Disables the use of Custom CSS
• Custom CSS: For styling this plugin requires following CSS ids and classes to be defined

  #recent_photos_envelope{margin:0 0 30px 0;}
  .recent_photo_image a {float:left;display:inline;margin:0 16px 15px 0;border:1px dashed #888;padding:5px}
  .recent_photo_image a:hover {border:1px dashed #000}
  

  The above css code is default css provided with the plugin

Frequently Asked Questions
Q. How to integrate css code in your default style sheet?
A. Copy the default css code into your style sheet
#recent_photos_envelope{margin:0 0 20px 0;}
.recent_photo_image a {float:left;display:inline;margin:0 16px 15px 0;border:1px dashed #888;padding:5px}
.recent_photo_image a:hover {border:1px dashed #000}
#browsephotos{margin: 0 25px 10px 12px; float:right;}
Enable Use Custom CSS option in the widget admin
Make sure Custom CSS code textarea is blank (Should contain no spaces also)