the magic touch for Wordpress image galleries

How it works – manual embedding

Simplest Gallery can be easily integrated in a theme or in a page, just grasp the basic concepts.

How it works

Simplest Gallery provides a layer of “intelligence” between WordPress (“gallery” shortcodes + media files, actually) and the code needed to render the gallery itself, namely a Gallery style plugin.

Its purpose is to provide a common system for all galleries. With Simplest Gallery if you want to choose visualisation style, you can do it easily and don’t need to re-create galleries and you are not bound to any specific theme.

Simplest Gallery, thus, runs in two moments:

  1. At the page header creation time (when HEAD section of the page is produced). In this phase it puts the necessary code in the page, so that scripts and CSS files for the desired gallery get loaded by the browser, and
  2. Each time a [ gallery ] shortcode is encountered, by calling the chosen gallery ‘s rendering function to generate the visibile images, necessary code, etc.

Manual Embedding via PHP code

As a rule of thumb, if you want to insert a gallery in a theme’s page manually you should use the following code (please note that space before “gallery” must be deleted, we placed it here just to make the shortcode readable in the page for you):

<?php echo  do_shortcode('[ gallery ids="5,6,7,8,9,10,11,12"] ; ?>

 

Pretty easy huh?

 

Now let’s move forward.

You know that Simplest Gallery supports multiple gallery styles. How it is supposed to guess the style of gallery that you want to produce then?

 

Answer #1. Simplest Gallery will look into the Settings : Simplest Gallery : Gallery Style setting you have set in WP-Admin. The lightbox style is the default.

Answer #2. If the page/post specific Gallery Style setting has been set in the specific backend box, then this setting will have precedence on the previous one.

Answer #3. You can specify the desired gallery in the shortcode via the type=”” attribute. Example:

This will force the gallery to be rendered by using the “imageflow” style:

 

<?php echo  do_shortcode('[ gallery type="imageflow" ids="5,6,7,8,9,10,11,12"] ; ?>

 

So, even if lightbox can be the default for the current page/post, the gallery will be rendered with the imageflow style.

 

Please note that the quoted value “imageflow” is an ID and it’s actually case sensitive. A list of style IDs follows:

  • imageflow – Imageflow style gallery
  • lightbox – Standard lightbox without labels
  • lightbox_labeled – Standard lightbox WITH labels
  • cycle – jQuery Cycle
  • … more will be added

 

Now comes the trickest part.

Each gallery style needs some CSS and javascript/jQuery code to be loaded by the browser, usually this code must be included in the HEAD section of the page.

Therefore, when the page is getting generated, the point where the gallery is rendered is below in the BODY of the page, therefore it’s usually too late to load necessary when the gallery gets rendered.

We need to place necessary code in the header before the generation of the gallery itself.

So we get this:

 

Important principle

When a page header gets generated, it is not usually possible (or not trivial) for Simplest Gallery to detect how many and which galleries are about to be rendered, later in that page.

Understanding this is crucial to take the necessary action to let the galleries work.

  • If you are about to generate a gallery style (or type) which is your site’s default, then you need to do nothing special to generate the page’s header.
  • If you are about to generate a gallery whose style (or type) has been set (in the page backend page) as default for that specific post/page, you need to do nothing special. The page/post options for Simplest Gallery box is the way we use to tell Simplest Gallery which type of gallery we will use in that page.
  • In all other cases you should insert a snippet of php code before calling wp_head(); to let the gallery plugin to place necessary code when generating the header. Typically, this code snippet could look like this:
 <?php
  if (is_front_page() && function_exists('sgif_init')) { // If HOME and ImageFlow plugin present...
  sgif_init(); // Initialize Imageflow
  sga_head('imageflow'); // Force necessary header scripts for Imageflow
  } 
  ?>
 <?php wp_head(); ?>

Please note that the function names are plugin-specific. Thus sgif_init will work only for ImageFlow plugin. Inspect the specific plugin or ask for support if in doubt!

 

Finally, see the result of manual inclusion in a homepage here.