GS Alternate Images


GS Alternate Images is a plugin that adds to the usability of the new wordpress 3.0 Featured Image Plugin.

This custom wordpress plugin lets you add additional images to a page or post in a panel that is directly under the featured image area.

See the following screen shots:

Click the "Add Alternate Image" button to bring up the media library

Click on an image to add it as an Alternate Image

After images are added to your “Alternate Images” Panel they can be ordered and deleted as well.

There are various ways to get the images out. This simplest of which is to use a shortcode

[gsaltimg]

The short code accepts the following arguments:

order = the image in the order as it’s displayed in the panel
size = the displayed image size (thumbnail, small, array 100,100) example size=100,100 Defaults to thumbnail
class = the class that will be inserted into the img tag

for example:

[gsaltimg order=1 size=100,100 class=my_class]

Would show the first image in your alternate images, with a width and height of 100px and a class name my_class

[gsaltimg]<a href = "/some_url">{img_html}</a>[/gsaltimg]

allowed tags are

  • {img_html} = full img html for the image ex <img src = “….” class = “…” />
  • {img_url} = the urls to the sized image
  • {img_att_url}= the url to the full sized attachment

For programmers there are also various ways to get the alternate images out
// returns an array of attachment IDs. $post_ID is required
$array_of_ids = gs_get_alt_image_ids($post_ID);

It’s also possible to get an array of objects of all alternate images like this:
$args = array (
'post_id' => int
'class'   => string
'size'    => string/array
);
$array_of_objects = gs_get_alt_images( $args );

  • post_id = the numeric ID of page/post, if left black the current post is assumed.
  • class = a class name that will be appended to the image html that is generated
  • size = string/array // if it’s a string us standard WP imagse sizes ex: ‘thumbnail’ or you can define width and height in an array like this array(100,100). If left blank it defaults to thumbnail

Example: Here is a way to build a gallery with your alternate images, all this css could of course be replaced with 1 class tag, but it’s shown here for clearity
[gsaltimg size=80,80]<div style = "text-align: center; float: left; clear: none; margin-left: 10px !important; cursor: pointer; background-color: #0000FF; padding: 3px;" onclick = "alert('hello I am {img_att_url}');">{img_html}<p style = "color: #FFF; text-align: center;clear: both;">Click me</p></div>[/gsaltimg]

builds this result

Click me

Click me

Click me

5 Responses to “GS Alternate Images”

  1. Jeff

    Aug 12, 2010

    How do you make an image link to another page?

  2. admin

    Aug 12, 2010

    The easiest way to do that is to use a short code with custom content like this.
    [gsaltimg size=50,50 ]<a href="http://www.google.com" >{img_html}</a>[/gsaltimg]

    You can specify the URL of the link and then the plugin will replace {img_html} with the image.

  3. OC-webdude

    Aug 14, 2010

    I like it. I was looking for something like this for a client site a few weeks back, and couldn’t find anything that did quite what I needed. I tried this and it did the trick. Thanks, nice work!

  4. Liam

    Dec 09, 2010

    Hi I’m having some problems getting the GS Alternate Image to display on the page.php template files, using the code you supplied in your help page.

    // returns an array of attachment IDs. $post_ID is required
    $array_of_ids = gs_get_alt_image_ids($post_ID);

    I’ve put the code in the loop but no image is displaying. And I’ve checked the loop is displaying the correct ID for the page/post and it is.

    I’ve tried using the short tags in the article and that works and displays the image, however I don’t want the images in the content section of the page.

    Any help you can provide would be a great help.

  5. Jeff

    Dec 09, 2010

    That code I provided and the script only points you to the ID of the images. This lets you use any existing source to display/format the images.

    For example you would need to do something like this.

    Refer to this codes page to get more info about displaying an image from and ID
    http://codex.wordpress.org/Function_Reference/wp_get_attachment_image

    < ?php
    global $post;
    $array_of_ids = gs_get_alt_image_ids($post->ID);
    if (is_array( $array_of_ids) && count ( $array_of_ids) > 1 ) )
    {
    foreach( $array_of_ids as $img_id ) { echo wp_get_attachment_image( $img_id,'thumbnail' ); }
    }
    ?>

    Or, if you want to do it with a short code you can make a small gallery like this.
    [gsaltimg size=80,80]<div style = "text-align: center; float: left; clear: none; margin-left: 10px !important; padding: 3px;">{img_html}</div>[/gsaltimg]

Leave a Reply