Garee’s Random Image

Garee’s Random Image is a highly customizable WordPress-plugin that shows a random image anywhere on your blog.

The output is generated from template-files or your own templates, which you can write with Mustache.

Main-advantages:

  • CSS only included if shortcode found on page
  • highly customizable with Mustache-templates

Version 1.1.1 | Live-Demo | Download from WordPress

Usage

Just insert the following shortcode anywhere in your blog (for use in a widget: use the text-widget and insert the shortcode there)

[random_image template='default']

Attributes

Here’s a list of all attributes the shortcode accepts. Additional attributes may be available depending on the chosen template

template
a predefined template consisting of a html- and optionally a css-file in the subdirectory “templates” of the plugin-folder. If left blank the template ‘default’ is chosen.
If the template-attribute is missing you have to define a template yourself (*). This can be done using the following enclosing shortcut:
[random_image_template]*[/random_image_template]
Check out the examples in the Live-Demo to see how to define your own template.
category
a number indicating the ID auf the category for your random image. The category will be the post-category where your image is published! When left blank a random image is chosen.
It’s also possible to submit more than one category by separating them via comma (e.g. category=”3,4″) (v1.0+)
Check out the admin-page of the plugin to get your categories and IDs
size
Either ‘full’, ‘large’, ‘medium’, ‘thumbnail’ or something like ’300,200′ to get an image that fits in a box with a width of 300px and a height of 200px. This picture can be used by the template. If left blank, ‘full’ will be chosen. (v0.5+)
filetype
Either ‘jpeg’, ‘gif’, ‘png’ or ‘any’. Restricts the search to this filetype. If left blank, ‘jpeg’ will be chosen. (v0.5+)
date_format
Choose the format for the Mustache-tag {{post_date}}. For more information check out the syntax of PHP-Date-function‘s format-parameter. (v0.9+)
exclude
Enter comma-separated IDs of images that need to be excluded from random selection. (v0.9+)
window_image
When set to “true”, “t” or 1 a link to an image opens a new windows/tab. (v1.0+)
window_post
When set to “true”, “t” or 1 a link to a post opens a new windows/tab. (v1.0+)

Template-Files

A couple of templates come with the plugin. You can write and install additional templates yourself. A template consists of a html-file with the Mustache-template and (optionally) a css-file with the same filename as the html-file. If your css-code has images, put them in a subfolder of the templates-folder named after your plugin. Then upload all files via FTP and insert the shortcode for your template. If you define your template directly in the shortcode, you cannot link to a additional css-file. Of course you can include css-styling directly into the html-template.

Mustache-Templates

The following components can be used to build your own html-template. Additional components can be generated by inserting custom attributes in the shortcode. The components are only available in the html-template, not in the css-file! Check out the template-files in the plugin to see how it’s still possible to change css-values with custom attributes from your shortcode. For more infos about Mustache-syntax check out the PHP-implementation and the manuals on http://mustache.github.com/

{{image_title}}
the title of the image as set in the Media Library
{{{image}}}
inserts the image (generated using the following template: "<img src=’<{{image_url}}’ alt=’{{image_title}}’ title=’{{image_title}}’ />")
{{image_url}}
url to the image used to show or link to it
{{image_width}}
width of the image in pixel
{{image_height}}
height of the image in pixel
{{image_size}}
image-size for use in an <img>-Tag (generated using the following template: "width={{image_width}} height={{image_height}}")
{{{full_image}}}
inserts the image (generated using the following template: "<img src=’<{{full_image_url}}’ alt=’{{image_title}}’ title=’{{image_title}}’ />")
{{full_image_url}}
url to the image used to show or link to it
{{full_image_width}}
width of the image in pixel
{{full_image_height}}
height of the image in pixel
{{full_image_size}}
image-size for use in an <img>-Tag (generated using the following template: "width={{full_image_width}} height={{full_image_height}}")
{{{large_image}}}
inserts the image in the format ‘large’ (generated using the following template: "<img src=’<{{large_image_url}}’ alt=’{{image_title}}’ title=’{{image_title}}’ />")
{{large_image_url}}
url to the large image used to show or link to it
{{large_image_width}}
width of the large image in pixel
{{large_image_height}}
height of the large image in pixel
{{large_image_size}}
large-image-size for use in an <img>-Tag (generated using the following template: "width={{large_image_width}} height={{large_image_height}}")
{{{medium_image}}}
inserts the image in the format ‘medium’ (generated using the following template: "<img src=’<{{medium_image_url}}’ alt=’{{image_title}}’ title=’{{image_title}}’ />")
{{medium_image_url}}
url to the medium image used to show or link to it
{{medium_image_width}}
width of the medium image in pixel
{{medium_image_height}}
height of the medium image in pixel
{{medium_image_size}}
medium-image-size for use in an <img>-Tag (generated using the following template: "width={{medium_image_width}} height={{medium_image_height}}"
{{{thumbnail}}}
inserts the thumbnail (generated using the following template: "<img src=’<{{thumbnail_url}}’ alt=’{{image_title}}’ title=’{{image_title}}’ />")
{{thumbnail_url}}
url to the thumbnail used to show it
{{thumbnail_width}}
height of the thumbnail in pixel
{{thumbnail_height}}
height of the thumbnail in pixel
{{thumbnail_size}}
thumbnail-size for use in an <img>-Tag (generated using the following template: "width={{thumbnail_width}} height={{thumbnail_height}}")
{{{post}}}
link to the post the image is attached to (generated using the following template: "<a href=’{{post_url}}’>{{post_title}}</a>")
{{post_url}}
url of the post the image is attached to
{{post_title}}
title of the post the image is attached to
{{post_date}}
date of the post the image is attached to (formatted with the date_format-option or automatically if option missing)
{{post_author}}
name of the author who wrote the post which the image is attached to (v0.9+)
{{window_image}}
indicates if a link to the image should be opened in a new window. (v1.0+)
{{window_post}}
indicates if a link to the corresponding post should be opened in a new window. (v1.0+)

49 Responses to “Garee’s Random Image”


  • Hi Garee, Im using your Random image plugin and it's great, though I need a way to have it choose from images that do not appear in a category (eg. in a gallery on a static page) can you help?

  • Hi,

    I am using the plugin for a welcome random image. I modified the default template in order to link the image to the post.

    <a title="{{image_title}}" href="{{post_url}}"><img alt="{{image_title}}" src="{{large_image_url}}" width="600" / ">
    </a>

    I have an embarassing issue though : is there a way to exclude images from private posts?

  • Firstly, very nice, neat plugin!

    I'd like to change the action on clicking the picture. Currently it opens the image in a new tab once clicked, where id actually like the action to open another URL to my website.

    Cant seem to find it in your source code, could you point out where this is defined.

    Cheers,

  • Hallo,

    im Dashboard erscheint ein \n zwischen Admin-Panel und Menü. Das \n ist hinter dem Flattr-Script. Ich hab den Fehler bei mir aus der garees_random_image.php korrigiert (Zeile 297). Das könnte man für die nächste Version noch fixen ;)

  • How Can I use it using php on the sidebar.php? is it possible? Thanks!

  • Hi,

    Nice plugin! Are you still actively developing it? Is it possible to show multiple instances on one page and prevent repeats? Every image on the page would be unique?

    Thanks

  • Hi there!
    Is it possible to remove the link function? I just like to show the random images, not to link to a post… If not, then is it possible to show the images in a lightbox instead of a page?
    tnx in advance!

  • Hi. Enjoying the plugin. One minor cosmetic issue. On line 297 of garees_random_image.php, the new line character is appearing at the top left of my wordpress admin section, as shown here: http://dev.shuchter.com/plugin-gremlin.jpg. It disappears when I delete it from line 297.

  • I'm using WP 3.3.2 & I've installed the plugin through wordpress.

    I've added a gallery of 6 images to a post which is linked to category with ID=5, but when I add the short code [random_image category="5"] to a page nothing is displayed. The page actually takes a long to complete loading. If I click on the example for this category ID in the plugin's config page I see a PHP warning and a PHP fatal error:

    Warning: require_once(C:\wamp\www\wp-content\plugins\garees-random-imagewp-load.php) [function.require-once]: failed to open stream: No such file or directory in C:\wamp\www\wp-content\plugins\garees-random-image\garees_random_image_category_check.php on line 5

    Fatal error: require_once() [function.require]: Failed opening required 'C:\wamp\www\wp-content\plugins\garees-random-imagewp-load.php' (include_path='.;C:\php\pear') in C:\wamp\www\wp-content\plugins\garees-random-image\garees_random_image_category_check.php on line 5

    I looked in the folder wp-content\plugins\ and the php is not there. I've re-installed numerous times.

    Any ideas?

  • how many images need to be in a category before it works right? it seems if there's only two or three, it will go outside the category i chose and grab a random image from the entire library.

  • hi,

    this plugin is great !
    do you know if it's possible to specify "media tag" instead of a category ?
    this way, the plugin would display only images with the tag "featured" as an example (?taxonomy=media_tag&term=featured)…

    thanks for all

  • Larry Bradshaw

    Any possibility of opening in lightbox when a user clicks on image?

  • I'm using the 'featured image' function in WordPress. These are in a different, low resolution (only used as thumbnails om my frontpage).
    Is there any way to exclude these featured images from your plugin?

  • hi garee thanks for an awesome plugin!

    I have a problem unfortunately with my case… I started my blog in blogger and then transferred it all to wordpress. I noticed that whenever the random picture is selected from the older posts from before the move, it gives link to a certain recent post, though it's the wrong post and it's always the same one for each category… it's weird but the result is a lot of mistakes in titles (and therefore also in the like to the post).

    The code I used:
    [random_image category='26' window_image=1 size = 'medium'  ] 

    Help! I really want to use this plugin it's so nice!

  • Can the plugin pull images randomly from a folder of images not assigned to posts or categories?

    • Hi Don
      No, the plugin only shows images from the wordpress-medialibrary. These images have alt-captions, date/time and other info that can be displayed along with the image, depending on the selected template. So, the plugin takes a different approach, than just selecting a random file from a folder.

  • I'm having trouble figuring out how to use the Exclude feature. Right now, I have a number of pictures in my library, very few of them affiliated with posts, so they have no "category". I'm using the line:

    [random_image filetype="any" template="polaroid" exclude="3" polaroid_width="360px"]

    but images from category 3 keep getting displayed.

    Do I have something wrong in the syntax, or is there a different way I should be trying what I want to do?

    -Q

    • Hi Eriq
      The problem is, that the exclude-options only works for single images. If you check the media-library you'll see that every image has a unique number, the id. With something like

      exclude="12,342,1354"

      you can exclude 3 images. But there's no option to exclude a whole category. You could list all the other categories with the category-option. But then the pictures without category won't show up.

      If I find time I'll try to add an exclude_category-option. That would make it possible to choose random images from any category not included in the exclude_category-option, including pictures without category.

      • Great, that makes sense. Right now, there are only a couple of images I'm wanting to exclude. The documentation wasn't clear that the exclude option needed the id of the images themselves to exclude.

        I'll give this a go, but that should take care of it. Thanks!

        -Q

  • I'm running some browser tests now, but it seems like images are not showing up in IE 7 & 8.

    Have you had any experience with this?
    http://www.architecturefoundationbc.ca/

    • Hi Lili
      That's strange. I'm sure I tried some IE-version. But maybe not with all the templates. Some of them are using CSS3 and might not work that well in IE. Can you tell me which template you tried?

    • Hello,

      I am trying to use the Polaroid template and doesn't show in IE8.

  • Hi,

    Great plugin and almost perfect for what I'm after. Only thing I am trying to do is move the post title above the image – at the moment it always appears underneath. Any help you might be able to give would be appreciated.

    Thanks.

    • Nevermind, figured it out after re-reading some of the posts below. Went into the default html and moved {{post}} to the top. Thanks again for a great – simple – plugin.

      • Hi James
        Thanks for using the plugin and sorry I wasn't fast enough to help you! I'm glad you found out how to edit the template. You're the first person I know of that uses the main-feature of my plugins and the reason I wrote this plugin: the templates!

  • Hello,
    I love the plugin… but, it works great on some pages
    http://contextural.ca/wp/2011/charis-birchall/
    and on others it shows that there is no images for that category
    http://contextural.ca/wp/2011/tara-niscak-4/
    even though in I have galleries in posts under that category and the category list in the plugin's instruction page lists that there is 5.
    If I change the category, the page works.
    Do you think that it could have something to do with double digit category numbers? (It seems to be effecting only the categories that are 10 or higher)

    Thanks so much for your time, and your plugin.
    Tara

    • Hi Tara
      I'm trying to think what could be the problem with the plugin not working in some of your categories. I don't think it has something to do with the category-number, because my categories are higher than 10 and for me it works.
      Please make sure that the value for the shortcode-option "category" doesn't contain any spaces (category="15" and not category="15 " or for a list of categories: category="12,14" an not category="12, 14").
      The pluginpage shows the number of published post for each category, but that doesn't necessarily mean that any of these posts has images associated with! So if you're using a special gallery-plugin – different from the one integrated within wordpress – it might be that the images are not associated with a post of your category and so the plugin can't find an image.
      Finally it is possible that the plugin fails if you have a lot of categories with many images and in one category there are only a few images. The plugin selects a random image and checks if the image is in the desired category. If not, it selects again. This is repeated 100 times. If there's still no image found, the plugin gives up and shows the error-message.
      ¨Next week I'll release a new version of the plugin which will run faster and won't stop after a certain number of tries, but then will go through all posts of the category in random order and select the first image. Thus – if an image is associated with a post of the category – the plugin will find and show it.

    • Version 1.1 is now available. On the admin-page in the category-table you can click on "show" to check if there are images associated with the category.

  • Hi, I am having trouble to exclude categories or add many categories at once. I would like to have this code:

    [random_image size='thumbnail' category='12,11,5' ] {{{image}}} {{{post}}} [/random_image]

    But i get the error: “time out”. What can i do?
    Thank you so much for this plugin :)

    • Hi Cynthia
      You get the error because the plugin doesn’t support comma-separated category-IDs and so isn’t able to find an image from a post with the category ’12,11,5′. But actually it would be great to have that possibility. I’ll be releasing version 1.0 in a couple of days with your request implemented.

    • Listing of category-IDs is available in version 1.0 which I just submitted to wordpress…

  • Great Plugin…works like advertised. I do have a quick question. Here is the short code I’m using..

    [random_image category='7']

    It brings up the image and puts the link underneath it to the post. Is there a way to make the link open up a new tab or window when clicked? I looked at the plugin files, but couldn’t get it. Any help would be great. Thanks

    • Hi Bill
      Thanks for the comment! I should add an option to open links in a new window. Maybe in the next update… For now you have to edit the template: Open the file “default.html” which is in the template-folder of the plugin. Then look for this line:

      <a href='{{full_image_url}}' title='{{image_title}}'>

      and insert ” target=’_blank’ “. The line should look as follows:

      <a href='{{full_image_url}}' title='{{image_title}}' target='_blank'>

      Now, you’ve made a small change to the default-template and the image-links should open in a new window/tab. If you’d like to open the link to the post also in a new window you’d have to change the line

      <small>{{{post}}}</small>

      to

      <small><a href='{{post_url}}' target='_blank'>{{post_title}}</a></small>
      • Thank you very much for the reply, but I’m having an issue that I can’t figure out. I’m using the plugin to randomly generate images of tarot cards to simulate a random reading. In the chrome browser the plugin works great. It brings up the image, the image title, and a link to the post. In firefox, IE, Safari, maybe others, it only genrates the same image for every spot. I find it very odd that it works so well in chrome, but not other browsers?

        Here is what I have.

        Here is the code for the plugin: (I added the image title and the code from the post link you gave me)

        Name of File: garees-random-image/templates/default.html

        {{! very basic template: shows a thumbnail linked to the full image. underneath the thumbnail is the post-title with a link to the post itself. If ‘size’ isn’t set, display thumbnail, else take ‘size’ }}

        <a href=’{{full_image_url}}’ title=’{{image_title}}’ target=”_blank”>
        {{#size}}{{{image}}}{{/size}}{{^size}}{{{thumbnail}}}{{/size}}
        </a>
        {{image_title}}

        <a href=’{{post_url}}’ target=”_blank”>{{post_title}}

        Then, here is the code snippet from the page

        [random_image category='7']

        I don’t understand how it can work so well in Chrome, but not other browsers.

        Here are a couple screen shots – - Chrome (working)
        http://www.freetarotcardreadingsonline.com/wp-content/uploads/2011/11/Card-layout-chrome.jpg

        ——-Firefox (not working, every image is the same)
        http://www.freetarotcardreadingsonline.com/wp-content/uploads/2011/11/Card-layout-firefox.jpg

        Sorry to bother, but I really like the plugin and it works well for my needs, but I obviously need it to work in other browsers. Please let me know if this is an issue you think you can fix. Thanks for your time.

        • Here is the link to the page – sorry I left it out -

          http://www.freetarotcardreadingsonline.com/tarot-reading-celtic-cross/

        • Hi Bill
          Sorry to hear that you have problems with the plugin. But it can't be the browser, since all my plugin's code runs on the server and therefore is independent of the used browser. For me, it too shows always the same card, no matter which browser (firefox, opera, safari, chrome). My guess is that you use some kind of cache-plugin for your blog. I quickly made a test with "WP Super Cache": it actually does show different images on my testpage, but upon reload they stay the same, because the page is cached and no new random images are generated. Also the plugin only caches pages for anonymous users. So if you're logged in with chrome, because you're working on your blog, then in the preview you get dynamic content in chrome. But if you just start up firefox and visit the blog without logging in, you get the static content from the cache. Maybe there's even have a cache-plugin that caches shortcodes: So [random_image category='7'] is only run once, then all other shortcodes which look similar to the cache-plugin are not run, but just replaced with the output of the first shortcode. That would explain why there's always the same image.
          I'm sorry I don't have a solution to your problem. But I'd look for something related to caching….

          • Man…That was it! As soon as I deactivated the Wp-Cache it worked. I feel so stupid! Well, live and learn. Anyway, I wanted to let you know I'm going to make a donation to the plugin because I appreciate the time you spent helping. Thanks and Have a great weekend :)

          • I used the donate button, but it goes to flattr and I would just rather make a donation via paypal. If you would like email me your info for paypal and I will make a donation. Thanks -

          • Again, thanks…. just added a paypal-button to my plugin-site.

    • The just-released version 1.0 includes to new options for opening links in a new window. To open an image-link in a new window use the following shortcode:

      [random_image category='7' window_image=1]

      to open a post-link in a new window:

      [random_image category='7' window_post=1]

      Of course both new options can be combined.

      [random_image category='7' window_image=1 window_post=1]

  • Does this work with query post or only in the basic loop?

    • Hi Todd. It works with get_posts and is completely independent of the loop. So if you insert a random image into a post, the image probably won’t be an image from the current post. It’s probably best to use the plugin on a separate page or in a sidebar in a text-widget. Unfortunately css isn’t loaded if you use the shortcode in a sidebar, due to my mechanism of detecting the shortcode on the page, which I’m going to improve…

      • Version 0.9 fixes the issue with css not being loaded if the shortcode is in a text-widget.

        • I tried this in text widgets but doesn't seem to work. Using the shortcode: [random_image category="8" size="120,120"] Category "8" is the actual category number. I also tried the category name "ad1" which didn't work either. This added to my main side bar causes other some other widget areas to disappear, makes my footer disappear and causes the WP menu at the top of each page/post (when logged in) to be an empty bar.

          • Hi Steve
            Can you try to add the shortcode that doesn't work in the widget to a normal page or post? Just to see if the problem is related to the widget?
            Thanks, Garee

  • Hello!
    I’m experiencing some issues with your plugin

    Warning: Missing argument 1 for plugin_dir_url(), called in /var/www/XXX/wp-content/plugins/garees-random-image/garees_random_image.php on line 55 and defined in /var/www/XXX/wp-includes/plugin.php on line 596 No input file specified.

Leave a Reply

*

If you like Garee's Random Image plugin, you can buy me a coffee!

Flattr this
or