YD-Gallery Documentation

 

You're welcome to contact me for paid customization ... Plugins or Design in general

>> Welcome & Intro. <<<

Thank You For Purchasing the YD-Gallery Plugin.

YD-Gallery can be used to replace the generic WP Gallery function

I will maintain the plugin. You will be entitled to all the updates so please follow me on twitter

Important Notes

  • Please take the time to read through the documentation, as many support related questions can be answered simply by reading these instructions.
  • This Plugin works only with Wordpress 2.9 + versions. Older versions are not supported.

YD-Gallery Features

  • You determine the gallery's width & Height
  • Set Thumbnail width & Height
  • Has basic style features, Border & Background color
  • Uses any Post/Page post images
  • Add Multiple YD-Gallery's
  • 12 Transition Effects
  • Comes with FancyBox Lightbox (Option to disable)
  • Uses VT-Image resize instead of TimThumb.
  • I should have named this Gallery Simplicity, I really tried my best to keep it simple to implement & maintain

1. Installing and setting up YD-Gallery

Installation

  • Login to your self-hosted WordPress site
  • Go to Plugins->Add New
  • Search for the YD-Gallery Plugin and Click Install
  • Activate the plugin when it asks you to
  • Once activated, go to YD-Gallery (admin-sidebar) and add your image sizes etc.

2. How to use the YD-Gallery

  • I assume that you are familiar with uploading images and attaching them to posts & pages. If you're not read more here . You wont use the [gallery] shortcode. You also dont need to specify columns etc. simply upload the images then use my the YD-Gallery Shortcode

YD-Gallery uses attached post images to create the gallery


Once you've uploaded images to a post / page you simply place the shortcode in the text-editor where you want said gallery to display
[yd_gallery post=160]
post= is the post ID of attached images you want to display ::: You can use images from any post, does not necessarily have to be from the post you're currently adding the shortcode to :::



It's fairly simple to determine the Post ID, hover over the edit button in any page/post



At the bottom of your browser you will see something like post=160 where 160 is your post/page id.



Note !! You dont need to specify a post ID in the shortcode if the images originate from current post/page your editing ::: Simply use [yd_gallery]

3. YD-Gallery Options Page

Options Page

I've tried to keep the options as simple as is possible



Options

  • (1) Main Gallery Width & Height :: In this documentation I've added some predefined sizes, you can use it as a base to work from
  • (2) Thumbnail Width & Height :: If you dont need the thumbnails leave these values empty.
  • (3) By default the YD-Gallery uses fade
  • (4) Timeout is simply the time the image will be static before moving on to the next.
  • (5) By default the gallery uses Fancybox, If you're want to use your lightbox of choice simply leave empty
  • (6) & (7) Add your own color values that suites your theme
  • (8) If you're comfortable with CSS you can add your own custom style. By default I added the box shadow style. You can remove if theres no need.

4. Image size's >> Guide

Main Image area

If you're using the gallery as a full page gallery like featured "header" gallery, make sure your uploaded image supports the sizes you specify



IMPORTANT!! As a rule of thumb specify an image width 30px smaller (less) than your theme can cope with. ::: For instance if your post area supports a width of 620px set the main image width to 590px (If you dont do this the YD-Gallery could break your theme) ::: Calculate your height to be proportional


Thumb Nail Images

Thumbnails require some carefull planning if you want them to fill the total width below main image :::


Use Below sizes as a guide ::: I only specify the width, height will depend on your own image proportions

  • Main Image : 100px (w)  Thumbnails : 47px (w)

  • Main Image : 200px (w)  Thumbnails : 97px (w) / Thumbnails : 59px (w)

     
  • Main Image : 300px (w)  Thumbnails : 65px (w) / Thumbnails : 37.5px (w)

     
  • Main Image : 300px (w)  Thumbnails : 65px (w) / Thumbnails : 37.5px (w)

     
  • Main Image : 400px (w)  Thumbnails : 54px (w)

  • Main Image : 500px (w)  Thumbnails : 71px (w)

  • Theres a simple formula to calculate thumbnail sizes (w) ::: Image width (px) 500 + 28 / 6 (total thumbnails inline) - 17 = 71

5. Full CSS File

If you need to update the CSS file for your own use ::: (Note !! Need to be an experiences web developer)



/****************************
   mini-gallery default
*****************************/
#ydcoza ul.mini-feat-pagination{
   list-style: none;
   margin-left: 0px;
   list-style-type: none;
}

#ydcoza #mini-featured-wrapper{
   position: relative;
   margin-left:auto;
   margin-right:auto;
   width:/*Created Dynamicaly*/;
}

#ydcoza #mini-featured-area{
   margin-top: 0;
   margin-bottom: 0px;
   padding: 12px;
   overflow:hidden;
   width:/*Created Dynamicaly*/;
   height:/*Created Dynamicaly*/;
   border: 1px solid /* color >> Created Dynamicaly*/;
   background-color: /*Created Dynamicaly*/;
}

#ydcoza #mini-slideshow .mini-slide{
   display:none;
   background:/*Created Dynamicaly*/;
}

#ydcoza #mini-slider-thumbs{
   padding:15px 0px 0px 0px;
   position: relative;
   width:/*Created Dynamicaly*/;
}

#ydcoza #mini-slider-thumbs ul li{
   float:left;
}

#ydcoza #mini-slider-thumbs ul li a{
   float:left;
   margin:0 3px 5px 0;
   list-style-type:none;
   line-height : 0;
   text-decoration: none;
   outline: none;
   -moz-outline-style: none;
   border: 1px solid /* color >> Created Dynamicaly*/;
   background-color: /*Created Dynamicaly*/;
}

#ydcoza #mini-slider-thumbs .mini-framed img{
   padding:6px;
   border: none;
   width: /*Created Dynamicaly*/;
   height: /*Created Dynamicaly*/;
}

#mini-slider-thumbs ul li.active img{
   opacity:0.3;
   filter:alpha(opacity=30)
}

/***** Clearfix (all browsers) ****/
.clearfix:after {
   content: ".";
   display: block;
   height: 1px;
   clear: both;
   visibility: hidden;
}

6. Resources

  • jQuery Cycle Plug-in - http://jquery.malsup.com/cycle
  • Fancybox Lightbox: - http://fancybox.net/
  • VT-Image Resize: - http://core.trac.wordpress.org/ticket/15311

7. Changes Log

 

*** YD-Gallery Changelog ***

2010.12.26 - version 1.0

* First Release

2010.12.26
**********************************