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!
- In you WordPress administration page, go to ‘Plugins -> Add New’.
- Search for ‘Image Wall’ and click ‘Install Now’.
- Activate the plugin under ‘Plugins -> Installed Plugins’
- 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:
- image_sizes: A comma-separated list of image sizes (medium, large, thumbnail etc) to include on the Image Wall. Custom image sizes are OK. Default is ‘thumbnail, medium’.
- column_width: An integer representing the width of the columns, in pixels. If left blank, it picks the width of the smallest image size selected. Default: ” (blank)
- column_proportion_restrictions: Comma-separated list of proportion restrictions for images spanning two or more columns. A value of ‘1.5, 3.0’ would require images spanning two columns to be at least 1.5 times wider than they are high, and images spanning three columns must be three times as wide as tall. No image could span 4+ columns. If this is left blank, then there is no restriction on column spanning, apart from the requirement that the image is large enough to fill the columns spanned. No image can ever span more than 10 columns, regardless of settings. Default: ” (blank)
- batch_size: The number of images to bring back per batch. If this is set to 0 or a negative integer, then no batching is done. Default: 50
- buffer_pixels: Number of pixels from the bottom before loading of a new batch of images. Default: 2000
- move_to_end: By default, the image wall is displayed where the shortcode is inserted. However, if you set this attribute to ‘true’, then the Image Wall is moved to the end of the HTML <body> tag. This may fix problems with image-related CSS interference from the rest of the theme. Also, the image wall will be as wide as possible. Unfortunately, the footer is shown above the image wall.
- open_links_in_new_window: By default, links are opened in new windows. Set this to ‘false’ to open links in the same window. (Note that when you click back to the Image Wall, you start from the start again.
- support_author: Show your appreciation of this plugin! Set this to true to let me place a link to the author’s blog and plugin page. Set it to hidden to include the link but make it invisible. (Still helps my search engine ranking.) Many thanks! Default: false.
- include_categories: Comma-separated list of categories of posts from which to grab images. Accepts ID (integer), name or slug (string). By default, no filtering is done.
- exclude_categories: Comma-separated list of categories of posts from which to not grab images. Accepts ID (integer), name or slug (string). By default, no filtering is done.
- include_tags: Comma-separated list of tags of posts from which to grab images. Accepts tag name, term_id or slug. By default, no filtering is done.
- exclude_tags: Comma-separated list of tags of posts from which to not grab images. Accepts tag name, term_id or slug. By default, no filtering is done.
- include_pages: (true/false) By default, images attached to pages are included. Set this to ‘false’ to exclude pages.
- background_color: The colour of the background behind the Image Wall. Any CSS colour string is accepted. Default: black
- gutter_pixels: The space in pixels between the images. Default: 8
- corner_radius: The radius of the rounded corners of the images, in pixels. Default: 8
- only_pages_number: Comma-separated list of post and page IDs to take images from. By default, no filtering is done.
- only_this_page: (true/false) Set to true to only grab images from the current page. Default: false
- link_to_image: (true/false) By default, images link to the page where the image is attached. Set this to true to link to the image file instead. Default: false
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)
- 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.
- 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.
- 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!
- By adding the support_author=”true” argument to your [image_wall] shortcode.
Requirements
- Minimum WordPress version: 3.5
FAQ
- Which images are shown by the plugin?
- For an image to show on your site, it has to:
- 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.
- 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.
- If the the image is attached to a page, then the ‘include_pages’ argument can not be set to false.
- 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 themove_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.
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.
- 90% of all bug reports that I get are caused by a optimizer plugin moving me JavaScript files around. One day I will try to fix this so that it is more resilient, but until then, if it doesn’t work for you, try to deactivate your over-zealous optimizer for the page where you have the shortcode.
- The arguments for including/excluding tags/categories or grabbing pictures only from selected pages or posts are not very well optimized. The plugin will bring back all images and then apply the filtering. It is meant to filter out a small subset of images. If your filter removes most images, then the image wall will be bringing back mostly empty batches and it may look like it doesn’t work or is really slow. Use these arguments at your own peril! One way to get around this is to turn off batching by setting the batch_size to 0. However, this then means that every images is brought back in one go, and this may put a large burden on your server.
- The following plugins have been reported to break the Image Wall:
- WP Sponsor Flip Wall v1.1
- Photon Jetpack
- HDW Player Plugin (Video Player & Video Gallery)
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:
- I will do fixes as soon as possible.
- I will do new features if someone pays me to do them.
- New features will be incorporated into the general plugin. Two reasons for this:
- I don’t want to support more than one code base.
- If I gave away the entirety of the Image Wall plugin after the work I put into it, then I hope that the people who pays for new features will be equally happy to share their paid-for features with the rest of the community.
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. 🙂
[…] Image Wall […]
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?
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.
What was the problem?
a great tool for you that will add a nice look on the web or blog
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!
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.
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!
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.
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.
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.
Hey, did you see? There’s a reply here now: https://github.com/desandro/masonry/issues/271
thx Gustav its a realy cool Plugin, next time i will spend.
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.
This is a great plugin, thumbs up and a 5-star rating 🙂
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
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.
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
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.
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
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.
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?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.
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,
Sorry, there is no such feature.
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.
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.
Ok, thanks! Will give it a try.
Thanks mate ive been looking for a plugin like this for a while now, works perfect with my new website cheers mate.
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 😉