Sometimes you need a proper image gallery to display particular images, and there
are plenty of plugins for that. Shellbot’s Easy Image Display is for those other
times, when all you need is an easy way to display some random images, or X latest
images uploaded to your site.

Download plugin

Current features include:

  • Include/exclude images based on ID
  • Widget, shortcode and template tag for maximum flexibility
  • Display images at various sizes
  • Control how many images are displayed and in how many columns
  • Link images to a lightbox, or remove link entirely
  • Uses gallery shortcode so will always fit your theme

Features soon to be added:

  • Filter by attachment status
  • Slideshow layout
  • Custom image sizes

Installation

1. Upload the ‘easy-image-display’ directory to the ‘/wp-content/plugins/’ directory
2. Activate the plugin through the ‘Plugins’ menu in WordPress
3. Add images using one of the three methods explained below
4. Enjoy!

Usage

Shellbot’s Easy Image Display provides 3 ways of displaying images; widget, shortcode and template tag. Each method accepts the same options and will result in the same display.

Widget

The Easy Image Display widget is the easiest way to display your images. The basic settings allow you to control image size, order and number. More advanced settings are collapsed by default to provide a simple uncluttered interface.

Choose your options, hit save, and rejoice.

Shortcode

To display images inside a post or page rather than a widget area, you need a shortcode.

Default settings:

[sb_easy_image]

Custom settings:

[sb_easy_image num="1" order="random" link="lightbox"]

Template tag

The template tag is available for users who are confident in adding code to theme files, and need to display images outside of the widget areas or main content area. The following function can be added anywhere in your theme files.

Default settings:

<?php sb_easy_image(); ?>

Custom settings:

<?php

$args = array(
    "num" => "1",
    "order" => "random",
    "link" => "lightbox",
);

sb_easy_image( $args );

?>

Options

If you’re using the widget, the options are all clearly marked. You can’t go far wrong.

If you’re using the shortcode or template tag, here’s what you need to know:

Parameter
Description
Options
Defaults ( widget, shortcode, template tag)
numNumber of images to display.Any number1, 9, 5
orderOrder displayed images by...Newest, Oldest, RandomNewest (all)
sizeSize of image to be loaded. The display size will depend on your theme and number of columns chosen.Thumbnail, Medium, Large, FullThumbnail (all)
linkTarget link when images clicked.None, File, Attachment, LightboxFile (all)
columnsNumber of gallery columns to display.Any number1, 3, 5
filterInclude or exclude images from results, or show only specified images.Include, Exclude, OnlyOnly (all)
idsImage IDs for use with the "filter" option.ID numbers, separated with a comma.n/a

58 Comments

  1. Hello!

    I have a problem with this plugin: Nothing happens when I click on “Advanced settings” (I’m trying to use it as a widget).
    Wordpress version is 3.7. Thank you in advance!

    Reply
    • Hi Marko

      You’re right, it doesn’t appear to be expanding properly when the widget is first dragged into a sidebar. I’ll push out a fix for this with the next update, but in the meantime you should be able to get it working by refreshing the widgets page. Not ideal, but it should work!

      Reply
  2. Hi
    Thanks for a nice plugin.
    1) Any idea how to center the photo in the page/post. The short code is not responding to

    [sb_easy_image num="1" size="full" order="random" link="none" ids="1,2"]

    2) Any way of including the title of the photo in the short code?
    Regards
    Migo

    Reply
    • 1) Try adding column=”1″ to the shortcode, if it still doesn’t center then the problem lies with your theme’s handling of gallery styles.

      2) Not currently, though the caption should display so you can always make sure the caption matches the image title as a workaround for now.

      Thanks!

      p.s. I also replied to your post on the support forum with more details

      Reply
  3. awesome plugin, template tags work perfect! just one thing i noticed, the code under ‘Custom Settings:’ in the template tag should read…

    $args = array(
    “num” => “1″,
    “order” => “random”,
    “link” => “lightbox”,
    );

    sb_easy_image( $args );

    ?>

    anyways, thanks again! cant wait to use this on more sites!

    Reply
    • Oops! You’re right, good catch. You’ll forgive me for editing your comment, I’m sure ;)

      Thanks so much for the kind words, it’s my first plugin so reactions like this always help!

      Reply
      • thank you, i was so embarrassed with my inability to post a useful comment o_O

        but yes, very good plugin, very easy to use, quickly becoming one of my favorites!

        Reply
  4. Hello,
    The plugin is working great but I’m getting a grey border around each of the images. Do you know why this is happening? How can I remove this border?
    Thanks.

    Reply
    • Hi Matt, it sounds like that’s the gallery styling from your theme so you should be able to override it with a bit of CSS. If you need help drop me a message through the contact page with a link to your site and I’ll take a look when I can :)

      Reply
  5. Hi,

    Thanks for this nice plugin, but I have discovered one minor issue:

    Using 4 images in 4 columns to create 4 thumbnails horizontally across with random selection. even so we have 36 images in the library, we do get duplicates displayed. Is there any chance to amend the code in the next version(s) to allow for each image to only be selected once?

    Reply
  6. I don’t get it!

    There’s no information on how to actually upload the images. They are not taking them from my media library. The term ‘Image ID’ is not used in the image library so I can’t see how to use that.

    Weird there’s no instructions for widgets like there is with shortcode or template tag, which are for people that actually know about coding.

    Gonna have to try another plug-in as need this up asap :-(

    Reply
    • Hi Dave

      The plugin should in fact be pulling in images uploaded through your media library, so I’m sorry it doesn’t seem to be working for you. This isn’t a problem that has been reported by other users, so it may be an incompatibility with a particular theme or plugin in use on your site.

      If you’d like me to investigate please get in touch through the contact page and we’ll look into it together, hopefully I can fix the incompatibility and avoid others running into the same problem.

      Reply
  7. Very nice PlugIn! A welcome find.

    I am curious about the link=”attachment” option. That seems to take me to a thumbnail of the image itself. Maybe I’m misinterpreting, but is not the image itself the ‘attachment’? I was hoping it would take me to the post that included the image as an attachment. Is there a mechanism to make that happen?

    Thanks for any input/suggestions!

    Reply
    • Hi Russ. “Attachment” in WordPress terms is basically just the file itself, but displayed inside your theme (by comparison “file” will just lead to the actual file without any theme styling around it).

      At the moment there is no option to link the images to a post, since many images may not be attached to posts at all. It’s something I’m looking into as part of the “Filter by attachment status” upcoming feature.

      Reply
  8. Hi,
    The site I am working on is in development right now. I am having a problem with the image not always changing. When I change from page to page, it sometimes changes, sometimes it does not. Any way to force it to change every time? I am using the widget in my right header to change the image there.

    Thanks,
    Ken

    Reply
    • Hi Ken. It sounds like you’re using the “random” display order to generate your images? Unfortunately this will just pick a random image on each page load which will sometimes result in the image not changing (especially if there aren’t many images to choose from).

      I’m not sure if there’d be a reasonable way to “fix” that, as it is behaving as intended, but if a flash of inspiration strikes I’ll certainly let you know.

      Reply
  9. Thanks for the fix for PHP 5.4. Is there a way to write the short code so it only pulls jpg images? I have some png and pdf files in my media and don’t want those pulled.

    Reply
  10. The shortcode works perfectly when I insert it right into a page, but when I inserted it into a php include page it just shows the shortcode and no images. Anything else I put into the php include page shows up fine. Any ideas why this might be? I was using another Random Image plugin prior to switching to Easy Image Display and it worked fine in my include file.

    Reply
    • By “php include page” do you mean one of the .php files in your theme? In this case you should be using the template tag, rather than the shortcode. I just woke up so if I’m misunderstanding your question, apologies! :)

      Reply
      • No, I create a text.php file with the shortcode in it and then use a php include where I want the code to show up. I have a plugin that lets me create php includes, but to insert a php include into a page it requires its own shortcode so maybe inserting a shortcode via another shortcode is just not working!!! LOL No worries, I just added it to all my pages directly, but just today, I decided I wanted to change from 3 to 4 columns so I had to go to every page that displays the photos to make the change and it would have been so much easier to just go to the one text file and make the change.

        Reply
    • Hi Leris, I just woke up so forgive me if this makes little sense.

      You’ll need two settings to make this work. The filter option should be set to “only” and you’ll need to enter a the image IDs you’d like to display in the IDs option, separated by commas.

      To find an image ID (I need to add this to the main instructions/FAQ, sorry):

      If you click through to a particular image in your media library, the URL at the top of your browser will be something similar to this:

      yoursite.com/wp-admin/post.php?post=THISISTHEIMAGEID&action=edit

      So the IDs option should be set to something that looks like this: 12, 43, 325, 31 to show just those four images.

      Reply
  11. Probably dumb question, but does your plugin allow sequential display of random images (in the same location)on browser refresh? If not, do you know of any plugins that do?
    Thanks a bunch.

    Reply
  12. Thanks for the plugin, it seems to be perfect for what we need. I cannot figure out how to get it to display the full image though. My shortcode is: [sb_easy_image num="1" order="random" link="none" size="full" column="1" ids="110"] and I keep getting a thumbnail size image. Changing to size=large or size=medium, also seem to have no effect. (size=thumbnail does give me a square thumbnail) Thanks for any advice.

    Reply
    • Hi, sorry I just had chance to check this and I can’t see the problem on your site. Did you already figure it out? If not I’ll be happy to help debug over the weekend.

      Reply
  13. Nice plugin, but..
    I have a problem with it.
    As soon as I enable the plugin, all my Jetpack Tiled Mosaic Galleries are broken. They go back to a normal Gallery. Is there a workaround?
    regards Blacky

    Reply
  14. thank you, it’s great, very simple and easy to use for the client/user and to maintain for developer!

    I just wonder, if it is my mistake or what is the issue that when I add image to post and add custom url to it, it is “clickable” only on the right half of the picture? I have a completely self-made theme so the problem might be on my side.

    Reply
    • Hi, that sounds like a CSS issue but it may very well be a combination of both plugin and theme. Could you post a link here or through the contact form and I’ll take a look? Thanks.

      Reply
  15. Hi
    Thanks for this plugin. It is really what i needed. I have only one issue with it. I’m placing in in a footer and want to display as a grid of 9 pictures in 3 rows and 3 columns. The problem is that there is a huge gap between rows. The columns are fine. Is there any way I could edit the css to get images to look like a grid? I attached a link above

    Reply
  16. Hello! Thank you for a perfect plugin!
    It works great!
    I have two questions:
    1. I use quite a lot of pictures to rotate and it’s hard for me to print their ID’s with hands. Are there any other ways to of it? 3557-3597 instead of 3557,3558,3559 etc
    2. How can I make some spaces between pictures? For example, in this page: http://skrebeyko.com/mak-cards/power_and_weekness/
    Thanks again!

    Reply
    • Hi Olga. Thank you for the kind words :)

      There is currently no way to enter a range of IDs but this is a good idea. I’ll see if it’s possible to implement something like this for the next version. Added to the top of my todo list!

      For your second question, adding something like this to your CSS should work:

      .site-main .gallery .gallery-item { margin-bottom: 10px; }

      Reply
  17. Hi! I am trying to use the shortcodes to display full-size, random images on my website, but they keep appearing as thumbnails, and if I include size=”full”, then the thumbnail is squared, cutting off two thirds of the rectangular images. The images are 980 x 300 px

    I’m using the responsive theme, iFeature Pro 5, by Cyberchimps. My testing page in which I’m using your plug-in is at http://www.locatehome.com/test-page/

    In an HTML box, directly under the menu area, I’m using this shortcode:
    [sb_easy_image num="1" column="1" order="random" link="none" size="full" ids="69, 67, 65, 63, 61, 59, 57, 55"]

    In that area, the entire image is displayed, but in a small thumbnail, only about one-third the size of the area, plus a lot of margin or padding around the image.

    Inside the Page area in the theme, I have not specified the size, and although the size is larger, two-thirds of the image is cut off. I am using this shortcode:
    [sb_easy_image num="1" column="1" order="random" link="none" ids="69, 67, 65, 63, 61, 59, 57, 55"]

    Each shortcode has the same result in whichever area I place it. I’ve also tried deleting the references to column and link, but that didn’t make any difference.

    By the way, if there is to be no more than one column and no links, should those just be left out anyway? And is there way to reduce the padding around the images or is that probably just a function of the theme I’m using?

    Reply
    • I took a look at the page you linked, it seems the gallery code is being output as if 3 columns were in use (which explains why it’s only roughly a third of the width of your page). Could you double check the column is definitely set to 1 in your shortcode? If so I’ll need to do some testing of that and see if I can reproduce.

      The default settings for the shortcode are to output 3 columns and link to the image file so that’s what will happen if you leave those parameters out, check the table in the post above for any other defaults you need to know.

      Reply
  18. Thanks for a great plugin!

    Two questions (not completely different from Olga’s above):

    1. When specifying image IDs (e.g. ids=”502,510,507″ with columns=”3″), is there a way to make the sort order match the order in which the IDs were specified? (instead of random / oldest / newest)

    2. Same scenario, what CSS magic would insert some padding around the images, so their not “touching” each other on the sides? (trying to set margin-left/right makes the last image wrap to the next line)

    Reply
    • Hey Itamar

      1. That isn’t currently an option, but it’s such an obvious thing for people to need I can’t believe I didn’t add it in the first place! I’m pushing out a new version next weekend and will make sure this is included :)

      2. Unfortunately it kind of depends on your theme since every theme styles the gallery differently. If you’d like to leave a link I’ll happily take a look.

      Reply
      • Thanks!

        Glad to hear you’ll add in my sort order suggestion :-)

        In this test post you can see 2 layout issues: http://wpsandbox1.ostricher.com/2013/09/quick-evernote-template-based-note-creation-with-launchy

        In the beginning of the post (about 3 paragraphs in) there are 3 images (displayed with columns=”3″, in “gallery-1″ div) that interfere with a “share-it” block (id “tr_shareit-4570″) from the ShareIt plugin, which makes the layout pretty messed up.
        In that case I would have liked the “gallery-1″ div to move (up or down the page) so it doesn’t break like this.

        Around the middle of the post you can find “gallery-2″ div, that shows the no-padding-between-images that I referred to in the previous comment.

        My theme is BuzzBlog Theme.

        Reply
        • Looks like your theme is struggling when you choose an image size that would be bigger than the gallery item and needs to be limited width-wise. Try something like this:

          .gallery img {
          max-width: 90%;
          padding: 5%;
          }

          Or ofc you can do it just for a particular gallery like this:

          #gallery-1 img {
          max-width: 90%;
          padding: 5%;
          }

          You might find the CSS selector needs to be more specific if there’s something else affecting those images from your theme CSS.

          As for the other problem, you should be able to clear the share box like this:


          #gallery-1 {
          clear: both;
          }

          Hope that helps!

          Reply

Leave a Comment.