Blogshow

 

This is a quick tutorial on using Blogshow. This tool allows you to insert your photos in a vertical listing/stack of photos or as a slideshow. 

 

_____________________________________________________________________________________________________________________________

 

BlogShow allows for your images to be seen full screen.  therefore, it is our recommendation that you crop your images no smaller than 1200 pixels tall and allow the plugin to resample the images and fit them into the bounding box that you determine.  this will allow the viewer to see the largest image possible if they choose to view full screen. 

 

Slideshow images for full screen (1600x1200)

If you want to be able to use the fullscreen feature, you will want to crop your images larger and use a Resampling option so that it fits within the bounding box that you determine.  Our recommendation is:

• Crop your images:  minimum height of 1200 pixels tall
• Bounding box set to a similar ratio (that will fit within your blog post area)
• Resize/Cropping set to: Resize + Resample to Bounding Box (letter box)

_____________________________________________________________________________________________________________________________

 

Activating Blogshow

 

1. Log into Wordpress (WP)

2. Go the the Plugins Panel on the left hand side and activate Blogshow (WP)

3. Go to Posts. Either create a new post or edit and existing post

4. You will see a blue bull's eye icon just above the text area in Posts.... or a button that says "Open Blogshow" depending on which mode you are in.

5. Click the icon/button and start loading up photos for the blog.

 

_____________________________________________________________________________________________________________________________

 

Creating Sets

 

1.  Go to Image Sets tab

2. Click new in the bottom left hand corner

3.  Name the set and select Create Page

4. Once named you will see the set in your set lists. Select the new set. This will activate the right hand panel

5. Go to the "Image List" tab and select upload (bottom left of the right hand panel)

     - Select "Add files from your computer"  

     - Select the images you want to load. When done select Done.

 

_____________________________________________________________________________________________________________________________

 

Settings

 

While still in the "Image List" you will have options for this particular set. These settings can override the Global settings of Blogshow if you wish.

 

1. Override the Global Settings: This will make custom options for this set only.. 

2. Re-sizing/Cropping Handling: 

1. Do nothing: Will upload the images as is.  This will ignore the bounding box height and width and display the image at it's original size.
2. Resize + Resample to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height.  It will also resample the image if you have the watermark feature turned on.  
3. Resize to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height. 
4. Resize + Resample to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  Resample allows you to both save bandwidth and use the watermark feature. 
5. Resize to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  
6. Resize + Resample to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  Resample allows you to both save bandwidth and use the watermark feature. 
7. Resize to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  
8. Resize + Resample to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  Resample allows you to both save bandwidth and use the watermark feature. 
9. Resize to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  

3. Display size / Bounding Box:  This is the size of the viewing window people will see the slideshow in

     -Default is 800 x 450  (You can change this if you want a larger window)

4. Thumbnail / Toolbar height: This allows you to change the size of the thumbnails below the main photo

     -Default  75px

5. Transition effect: The transition between photos in the slideshow will have this effect

6. Effect Duration: How long the above transition lasts

     -slower times result in faster progression to the next photo

7. Slide duration: How long the viewer has to view the photo before the transition starts to come into effect.

8. Crossfade images: This will show an overlap in the pictures as one is fading out and the next is fading in.

    -Default False

 

_____________________________________________________________________________________________________________________________

 

Insert Tab

 

1.  Embed as slideshow: This creates the slideshow itself. If you do not choose this option The photo(s) will be loaded in a vertical listing/stack of photos.

2. Show toolbar: This tool bar allows for slideshow users to have features. (Play, pause, Select left or right options to move the slideshow backwards or forwards.

3. Auto-play: Choosing this allows for the slideshow to start playing once the viewer comes onto the page.

4. Shortcode:  Code that makes up the details of the Blogshow set you create

Once you have selected your options you will then  select the option on the bottom left of the right hand panel "Insert into Post!"

This will insert the short code into your Post or Page. Please not this does insert the code where the cursor is on the page.

 

_____________________________________________________________________________________________________________________________

 

Global Setup Tab

 

Design Tab

 

1. Font Style: Choose your font

2. Background Color: The color of the background on Blogshow.

3. Stroke Color:  There is a fine boarder around the installer this color will determine that border. If you do not want this please go to step 6.

4. Foreground Color:  The color of the icons in the toolbar area

5. Video Skin player: 

6. Draw Boarder around Slideshow/Images: See step 3 above.

7. Resampling Quality: Turn the percentage of of the server side re-sampling up or down to increase or reduce the size of the files.

8. Use Image Magick Library if available: (Not all servers have this.) Select “True” if you are using the server side re-sampling feature. This could process your images faster at higher resolutions.

9. Automatically Sharpen re-sample Images: Selecting True will sharpen the images as they are scaled down in the server-side re-sampling process. This will keep your images from looking soft.

 

_____________________________________________________________________________________________________________________________

 

Watermarking tab 

1. Use Watermarking Image: If you select “True” this will turn watermarking on. If you select “False” watermarking will be turned off

2. Watermarking Image: Upload an image you would like to use for your watermark. We recommend a one color logo saved as a transparent PNG.

3. Watermark X Offset: This helps you determine the horizontal position of the watermark. 0 will move the mark left, 100 will move the mark right.

4. Watermark Y Offset: This helps you determine the vertical position of the watermark. 0 will move the mark up, 100 will move the mark down

5. Watermark Opacity: You can control the opacity of the watermark with the numerical number.

6. Draw Crosshairs: if you select “True”, a one pixel “X” will be drawn over the image serving as a protective watermark.

7. Crosshairs Color: The color of the watermark lines can be determined by the color picker.

8. Crosshairs Opacity: You can control the opacity of the watermark with the numerical number.

 

 _____________________________________________________________________________________________________________________________

 

Standard Display Tab

 

1. Click the “Standard Display” tab 

2. Re-sizing/Cropping Handling: 

1. Do nothing: Will upload the images as is.  This will ignore the bounding box height and width and display the image at it's original size.
2. Resize + Resample to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height.  It will also resample the image if you have the watermark feature turned on.  
3. Resize to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height. 
4. Resize + Resample to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  Resample allows you to both save bandwidth and use the watermark feature. 
5. Resize to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  
6. Resize + Resample to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  Resample allows you to both save bandwidth and use the watermark feature. 
7. Resize to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  
8. Resize + Resample to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  Resample allows you to both save bandwidth and use the watermark feature. 
9. Resize to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  

3. Display size / Bounding Box:  This is the size of the viewing window people will see the slideshow in

     -Default is 800 x 450  (You can change this if you want a larger window)

4. Click "Save"

_____________________________________________________________________________________________________________________________

Slideshow Display Tab

1. Click the “Slideshow Display” tab 

2. Re-sizing/Cropping Handling: 

1. Do nothing: Will upload the images as is.  This will ignore the bounding box height and width and display the image at it's original size.
2. Resize + Resample to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height.  It will also resample the image if you have the watermark feature turned on.  
3. Resize to Bounding Box Width.  This will resize the image to the bounding box width and ignore the height. 
4. Resize + Resample to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  Resample allows you to both save bandwidth and use the watermark feature. 
5. Resize to Bounding Box Height.  This will resize the image to the bounding box height and ignore the width.  
6. Resize + Resample to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  Resample allows you to both save bandwidth and use the watermark feature. 
7. Resize to Bounding Box (letter box).  This will resize the image to fit into the bounding box while keep the correct aspect ratio.  
8. Resize + Resample to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  Resample allows you to both save bandwidth and use the watermark feature. 
9. Resize to Bounding Box (crop and fill).  This will crop the image (at the center) and fit it into the bounding box dimensions.  

3. Display size / Bounding Box:  This is the size of the viewing window people will see the slideshow in

     -Default is 800 x 450  (You can change this if you want a larger window)

4. Thumbnail / Toolbar height: This allows you to change the size of the thumbnails below the main photo

     -Default  75px

5. Transition effect: The transition between photos in the slideshow will have this effect

6. Effect Duration: How long the above transition lasts

     -slower times result in faster progression to the next photo

7. Slide duration: How long the viewer has to view the photo before the transition starts to come into effect.

8. Crossfade images: This will show an overlap in the pictures as one is fading out and the next is fading in.

    -Default False