Image Wall Plugin

Screenshot

Screenshot

What is it?

A wordpress plugin that allows visitors to browse posts or pages by their images, displayed randomly on an infinitely scrollable Image Wall. The images link back to the post or page on which they are attached.

If you haven’t already, check out my own Image Wall for a demo.

What is it good for?

Images are powerful. They catch our attention like nothing else. Hopefully you use them in your blog posts to anchor the fickle attention span of today’s readers. Display all these great images on a nice looking page, and your visitors will browse for a while, captivated. Hopefully, one image will stand out for whatever reason and compel your visitor to click it to find out more. And just like that, some old blog post you thought buried by the sands of time has gotten another view, thanks to your Image Wall.

Great! How do I get started?

The installation is simple, but before I go through it, I want to mention that this plugin is in BETA mode. I’ve tested it as much as I can, it seems stable enough to me and I use it without problems on my site. However, I am currently looking for people to install and test the current version and give me feedback, such as bug reports or improvement suggestions.

Sound good? Then this is how you install the Image Wall!

  1. In you WordPress administration page, go to ‘Plugins -> Add New’.
  2. Search for ‘Image Wall’ and click ‘Install Now’.
  3. Activate the plugin under ‘Plugins -> Installed Plugins’
  4. Add the shortcode [image_wall] to the page where you want to show the image wall.

Upgrading from a previous version? Then you must first deactivate and then delete the old version under ‘Plugins -> Installed Plugins’.

The [image_wall] takes the following optional arguments:

As an example, the Image Wall on The Modern Nomad is created using the following shortcode:

[image_wall image_sizes="medium , large" column_proportion_restrictions="2.0" support_author="true" move_to_end="true"]

For those wishing to style their Image Wall with some CSS magic can take advantage of the fact that any page featuring an Image Wall will have the class ‘image-wall’ added to the <body> node.

Four free ways to show your appreciation

If you like the plugin and want to show your appreciation for the work behind it, then:

(Copyright Jornal de Notícias, Lisbon)

  1. Give it a good rating on the WordPress plugin directory! Not only does it make me very happy, but it helps others find the plugin too.
  2. Contact me and let me know what you think of the Image Wall! I would love to hear from you. I might also link to your Image Wall from this page so others can see more Image Walls in action.
  3. I’m a nomad trying to prove that a nomadic lifestyle of continuous travel can be both sustainable and rewarding. This blog, The Modern Nomad, is my main platform for spreading my message, but building a readership is hard! You can help me a lot by sharing the blog on your favourite social networks. Oh, and remember that you can subscribe to the blog too!
  4. By adding the support_author=”true” argument to your [image_wall] shortcode.

Requirements

FAQ

Which images are shown by the plugin?
For an image to show on your site, it has to:

  1. Be big enough. If you are showing images of size ‘medium’, and your medium images are 300px wide, then the image has to be at least 300px wide.
  2. Be attached to a page or a post. You can check what page or post an image is attached to by going to Admin -> Media -> Library and look at the ‘Uploaded To’ column.
  3. If the the image is attached to a page, then the ‘include_pages’ argument can not be set to false.
  4. If the image is attached to a post, the post should not be filtered by a exclude/include tags/categories argument.
Where do I upload the images to the Image Wall gallery?
You don’t upload images to the image wall, and the image wall is not a gallery. The image wall is a navigation tool. It pulls in all images on your existing posts and pages and displays them with links back to the original page or post. I may one day make a gallery function. See the new features section.
I’m using WordPress.com. Can I use the image wall?
Sorry, impossible. If you are ready to move to a self-hosted wordpress installation, I’m available for hire to help you make the transition!
Can I include external images from e.g. Flickr, Picasa, Instagram etc?
No, sorry. Not at this point. It could be a potential new features.
Does the Image Wall work with NextGEN?
Not really. NextGEN bypasses WordPress’s native media handling techniques. Specifically, it doesn’t attach the images to the relevant pages or posts, which means that they are excluded from the Image Wall. You can manually attach them though, in which case they’ll reappear.
Can I manipulate the target link of the images? Can I open the images in a lightbox popup?
No. They always point to the relevant page or post. This also means that you can’t open the image in a popup. Unless this is requested as a new features (with money for development), this will remain so.
My Image Wall is too narrow. How can I make it full-width?
The Image Wall will fill the space it is given, but that space is determined by your theme. The image wall adds the class ‘image-wall’ to the body tag of any page that shows the image wall. You can use this to hide the footer element if you can get access to edit your CSS. So to e.g. hide your footer on the image wall page, use something like this CSS: body.image-wall #footer {display: none;}
Alternatively, you can use the move_to_end="true" argument to move the whole image wall to the very end of your page.
Can the image wall display videos?
Nope. It’s the image wall. Maybe you can request a video wall as a new features. 🙂
Can I set the Image Wall to only show the featured image of each post?
No, not at this moment. It is a good idea though. It’s not something I would need for The Modern Nomad, but I might still add the feature if requested through the new feature process.
Can I filter based on a custom post type?
No, not yet. It is a good idea though. Given some funding, I’d be happy to build it as part of a new feature request. 🙂

Known Issues

Hopefully, this plugin isn't a ticking bomb.

Hopefully, this plugin isn’t a ticking bomb.

No one is perfect, and the same goes for software. These are the current issues with the plugin. Let me know if you have a good way of fixing them.

Change Log

Please refer to the official wordpress plugin directory change log.

New Features

I get a lot of requests for new features. I wish I could accommodate everybody, but I need to focus on making a living right now and have no time left to do anything else but bug fixes. (I’m poor!)

So, I’ve decided to adopt the following attitude towards the image wall plugin development:

Oh, and since I hate hate hate pricing my work and coming up with estimates, I will ask the people who want the features done to tell me how much they are willing to pay for it, and then I either say yay or nay. 🙂

30

What do you think of the Image Wall?

Skip to bottom
  1. Hi Gustev,

    I’ve downloaded the plugin and added [image-wall] to the HTLM page, but all I’m getting is a pop up saying “loading the next set of posts” in a box with no images displayed. This scrolls for a few times and finishes with the message “You have reached the end of the internet” Are you able to help please?

    1. Just wanted to let anyone reading this know that the issues I had on Jan 13th has been quickly resolved by the Nomad. Great job Gustav. Had a couple of extra issues that Gustav was happy to assist me with. If you want a great pluggin to show case your photos, then give the image wall a go.

      1. Ayal says:

        What was the problem?

  2. a great tool for you that will add a nice look on the web or blog

  3. Breathe out says:

    Really love the plugin, was actually searching to make image galleries with a plugin which orders pictures just like this (and tumblr/google image search) do. Still like it and implemented into my site, if you want you can take a look, big thanks for the plugin!

  4. I love your plugin and just installed it on my apple news blog. The only real trouble is that the images always show up in the same order. It would be really nice to get a random viewing.

    1. Glad you like the plugin! Go to Settings -> Image Wall and you can set it to re-generate the order daily, weekly or monthly.

      Oh, and if you could please give the plugin a top rating on the WordPress plugin directory, that would really help me spread the plugin to more users! Thanks!

  5. Hi Gustav,
    nice plugin. So far it does just what I expected, and does it well, thanks.
    I noticed one little thing though and wonder whether it would be easy to fix: images should only be allowed to span columns that are really there, i.e. if the screen’s so small that only one column fits on, images shouldn’t be allowed to span three. I noticed the behaviour on my iPhone, it allows just one column.

    I haven’t had a look at the code yet, but the fact that the order can be randomized at intervals set on the server might mean that the images/sizes are pre-selected on the server as well. In which case…

    Well anyway, thought I might mention it.

    1. Thank you for the feedback.

      It’s kinda technical, but something is lacking in Masonry, the code library that does the image layout, that would allow me to do screen-size-dependent column spanning.

      I’ve raised a support query with the author of Masonry, but I’m not getting much response.

      You can see this support ticket here.
      https://github.com/desandro/masonry/issues/271

      Feel free to pester the author to look at this and as soon as he does, I will fix the Image Wall!

      In the meantime, since the image wall isn’t that great of a user experience on a small screen anyway, (as it’s just a long column of images) I hope that the issue isn’t too horrible to live with.

      1. No, sure, not that big an issue. I just tested how the page would look on the small screen and stumbled over it.

        I’ll leave a comment to the ticket. Maybe it helps.

  6. Tachio says:

    thx Gustav its a realy cool Plugin, next time i will spend.

  7. Sharon says:

    Lovely plugin – very fast in the unfiltered form – one of the best masonry galleries I have seen – and I’ve been looking at every one I could find (paid and unpaid) for almost a year.

    Lovely blog – voted for it.

  8. Andreas says:

    This is a great plugin, thumbs up and a 5-star rating 🙂

  9. Sumit says:

    What an awesome plugin, Gustav.

    Facing a small problem.
    I have added [image-wall] to a page. The only thing that shows up is a small pop up saying “You have reached the end of the internet”.

    Will be great if you could please help.

    Regards

  10. Carlos says:

    Thank you so much for this plugin. My site looks so professional now.

    At first the wall was slow to load but then I read the above and exluded Image Walls .js files from the Auto -Optimize Plugin I use and the wall loads much more quickly now. Great advice!

    Thanks again.

  11. Wilman says:

    Hi,

    Cool plugin you have here. Just wondering. Is it possible to customise the Image Wall Plugin to work something like the following link? The images fly in as I’m scrolling down the page. Thanks!

    http://www.lucidco.net/index.html#to_showcase

    1. With code, you can do anything. But, I am not going to make that feature. However, the code is available for anyone to edit and enhance, and if I think that the new version is safe and good, I will publish it as an official new version.

  12. Glen says:

    I tried this plugin on my iPod and PC but all the images were blurry. Is it easy to fix this. Maybe they need to have the resolution doubled for 4K screens.

    Also is there an easy way to show certain categories only? I want to show my artwork on my site but not every image. Just being able to add a category to remove photos would be cool or being able to add one to show files.

    This plugin is so nice. Thank you for putting in so much time and effort into making it. You can see it here: http://a4jp.com/wall/

    I can help translate the user options into Japanese if you like.

    I’m also making a plugin but it is an image search with filters, maybe having the results show up like in your plugin would be cool. Is it okay if I try and add the code you made? I’m not sure if I can but I just wanna try. I would add your name to any plugin I published with the code in it, if you like.

    Have a wonderful day.

    Regards,

    Glen

    1. The resolution is picked by the image sizes you include in the image wall shortcode. So, if you want hi-res photos, pick a high-res image size.

      You can chose to only show images from certain post categories, but that is it. The Image Wall is intended as a navigation tool rather than a image gallery.

      You are free to dig around the source code as you see fit. If you find stuff you can re-use for your own project, awesome! Go right ahead.

      If you want to make improvements to the image wall plugin itself, you have to go through me. First discuss it with me, then make the changes and email me the new files. I’ll go through them and if they are solid, I’ll publish them as a new Image Wall version for all to enjoy.

  13. Glen says:

    I’m so sorry I didn’t see the settings file before. I tried this [image_wall include_categories='wall' include_pages='false'] but the pages are still showing. Is this code right?

  14. Tony Bear! says:

    The IW plugin is ALMOST exactly what would fit the bill for me, if there were a way to pull in the blog title and lead sentence, or the image title and caption accompany the image… some things to make the wall more enticing for someone to click and read more.

  15. Niicaux says:

    Hi Gustav,

    Thank you for this awesome plugin. This is just the one I have been looking for.
    But I was wondering if there was any way I could have my images ordered by date instead of being random?

    Cheers,

    1. Sorry, there is no such feature.

  16. Lisa says:

    Hi Gustav,
    Love this plugin! I would like to make one little adjustment. The graphic/js at the end that shows the “loading bar” and the then the pop up that says “you’ve reached the end of the internet”, I would like to turn these off. How that I do that, please.

    1. There isn’t a built-in way to change that, but you could add the following CSS to your theme.

      #tmn-image-wall-scroll-messages { display: none; }

      How to do that, I’m not gonna cover here. Just google it.

  17. Lisa says:

    Ok, thanks! Will give it a try.

  18. lee getty says:

    Thanks mate ive been looking for a plugin like this for a while now, works perfect with my new website cheers mate.

  19. Jeremy says:

    I’d like to point out a small caveat in the option:
    move_to_end “… Unfortunately, the footer is shown above the image wall.”

    If the footer were to be shown below the image wall, it would be inaccessible as the wall would keep loading images as you try to get to the footer.

    Granted, the footer can be accessed from any other page presuming it’s a static footer…

    Cool idea though! That’s how I’ve been browsing your articles 😉

Leave a Reply to Lisa Cancel reply

Click to see allowed HTML.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <ol> <ul> <li>

Notify me of followup comments via e-mail. You can also subscribe without commenting.