wordpress gallery tutorial

WordPress Gallery Tutorial

In Tutorial, Wordpress by Steve CartwrightLeave a Comment

WordPress gallery tutorial

How to create a WordPress Gallery

This WordPress gallery tutorial will show you how to create a responsive WordPress gallery.  It will incorporate using some free plugins to enhance the user experience, visual appeal and to automate certain tasks for you.

  1. To begin, login to your WordPress site’s dashboard.
  2. Once you are logged in, click on ‘Pages’ (or ‘Posts’ to add a gallery to posts instead).wp-gallery-1
  3. You can either edit an existing page or create a new page to add the gallery into.
    – For this example I will create a new page which will only include the gallery, but any amount of content can be placed around the gallery if you’d prefer that.
  4. Click ‘Add New’ to create a new page.  Then give it an applicable title.wp-gallery-2
  5. Once you have set up the page as you would like it to be, click ‘Add Media’.  This will enable you to choose / upload images to use in the gallery.wp-gallery-3
  6. Click ‘Create Gallery’ in the top left.  You can either select a range of images already in your media library or upload new ones to use.  You can either:
    – Click individual images and each one you select will be added to the gallery.
    – Click the first image, hold down ‘Shift’ and then click the last image to select all images between the first and last.
    – Or click multiple separate images while holding ‘cmd’ (mac) or ‘Ctrl’ (windows) to select a random selection of multiple images.
    – If you would like to upload new images to use instead; click ‘Upload Files’.  You can either drag all the photos you want to use or ‘Select Files’ manually.  Any images you add should automatically be selected.  (If uploading a lot of images at once it could take a little while so be patient.)
    * You will see any selected images appear at the bottom of the pop-up window
  7. Once you have a selection of images to use; click on ‘Create a new gallery’, bottom right of the window.wp-gallery-4
  8. In the next area that appears you will be able to edit the layout and functionality of the gallery.
  9. You can edit your selection of images.  To remove any simply click the X in the top right corner of each image.  To add; click ‘Add to gallery’.
  10. To rearrange images; simply drag them into the order you’d like.
  11. If you would like larger previews to appear when images are clicked, then select options from the ‘Link to’ Dropdown.
    – ‘Attachment Page’ will load a new page showing the full image along with its title and other information.
    – ‘Media File’ will display the full image.  If you use this in conjunction with a plugin like L you can have a more useful pop-up preview or slideshow of larger images.  I’ll expand on this below.
    – ‘None’ will not do anything, the images will just appear on the page.
  12. You can choose how many columns you want the image appear on the page.  For responsive sites this will change on mobile devices and smaller screens so this setting is mostly for larger screens.
  13. When choosing size;
    – Thumbnail will show a square thumbnail of each image, similar to the preview you get when choosing images.
    – ‘Medium’ and ‘Large’ are pretty much what they say.  I would recommend using one of these 2 settings.
    * There is currently a bug when using ‘Full Size’ images in some instances, where they do not display properly on responsive sites.  They will not scale down correctly when a window is resized and can look messy so I’d avoid using this.
  14. The last option on this page that is worth mentioning is the Captions.  Simply click below each image to add relevant text about each image.  Leave these as they are or blank to not display any info.
  15. Once you’re done click ‘Insert gallery’.  This will create the gallery for you and you should see the images appear in your page or post editable area.
  16. If you would like to edit your gallery, simply click on the images, and select the pencil icon that appears.  This will allow you to change settings or amend your choice of images to use.
  17. When you are happy with everything and have ‘Previewed’ your page, then click ‘Publish’ to put the page live.
    – If you have created a new page it may need to be added to your menu before it can be accessed by everyone.

In addition to the basic WordPress gallery tutorial, I will list further customisation / automation of your galleries below.

Automatic resizing of images

If you would like to automate the resizing of images uploaded to use in the gallery, I would suggest using a plugin called ‘imsanity’.

This will allow you or your client to easily upload a batch of images – which may be different sizes – and have them automatically resized on upload.  By doing this it will create a much neater gallery for you with consistently sized images.  (I personally usually do this in Photoshop by setting up an action to batch resize images but this is not always an option for everyone.)

To get this working on your site please follow the instructions below.  Once this has been installed and setup on the site it should work automatically.

  1. Install the plugin.  You can do this by clicking on ‘plugins’ from your WP dashboard and then choose the blue ‘add new’ button.
  2. Simply search for ‘imsanity’ and then choose ‘Install Now’ beside the imsanity plugin box that appears. (It should be the first one to be displayed in the search results.)wp-gallery-advance-1
  3. You will obviously need to activate the plugin once you have installed it.
  4. Sometimes when you activate a plugin it can be hard to find where the settings for it are, as it may hidden under one of the WP dashboard tabs.  To access Imsanity’s settings; click on ‘Settings’ and then select ‘Imsanity’.
  5. Once the Imsanity settings page has loaded you should see something similar to the options below:wp-gallery-advance-2
  6. I will now explain the options shown above.These are pretty straight forward, so I’ll just give a brief summary of them.
  7. The first three options allow you to choose which images to resize according to where they are uploaded within WordPress.  I think this is a nice touch with this plugin as it gives you options to only resize certain images while retaining the size of others.
    – I find that setting the ‘Images uploaded within a Page/Post’ works best for batches of gallery images, as I prefer to upload the images from within the page I am working on, rather than adding them in the media library and creating the page to select the images after.
  8. You can stipulate any size for the ‘Fit within’ fields.  My preference is to set a width e.g 800px / 1024px and leave the height automatic, as this is works well for responsive grid layouts.  I would of course suggest always using images that have the same aspect ratio, but this isn’t always possible, so you may have to experiment with these settings to get them right for your particular project.
  9. You can edit the ‘JPG image quality’ to be less if you find that your gallery page is loading too slowly but bear in mind that this will compromise the quality fo the images you are uploading.
  10. For the convert options, I would leave these as they are cause I often use pngs within my page designs and it would be annoying to lose their transparency, but you can change these if necessary.
  11. There is an option to ‘bulk resize images’, but I would NOT use this feature! It will resize all images uploaded to your WP site and could really mess up your design and layout.  It is far better to size images appropriately before using them on your site, and just use this plugin for large bulk uploads of media for a particular purpose.
  12. As I mentioned in the point above; I would be more inclined to resize images before uploading them to the site. So I would suggest only using this plugin for certain uploads and either disabling the resize features by entering ‘0’ into the ‘Fit within’ fields when this is not needed.

You can find out more about the imsanity plugin here.

Using Lightbox / larger pop up images

While the native WordPress gallery function is great, there are certain limitations that are in place, which I am not too fond of.  For example when you click on gallery thumbnails, these are usually set to open in a separate page.  When these new pages load, you will likely need to use the browser back button to return to the gallery page which I don’t find particularly user-friendly (or pretty).

To provide a better user experience, I like to use a lightbox plugin.  This allows users to click a gallery thumbnail, which will pop-up at a larger size, with additional options to scroll through a set of similar images etc.  There are a lot of different options out there, but I have found that ‘Responsive Lightbox’ by dfactory works pretty well and has a wealth of options available (both paid and free).  Some of the plugins available, may not be responsive and therefore, will not work correctly on smaller devices such as mobiles.  These should be avoided at all costs.

Follow the instructions below to set up the plugin and get your gallery looking awesome!

  1. Install the plugin.  You can do this by clicking on ‘plugins’ from your WP dashboard and then choose the blue ‘add new’ button.
  2. Simply search for ‘Responsive Lightbox’ and then choose ‘Install Now’ beside the Responsive Lightbox by dFactory plugin box that appears. (It should be the first one to be displayed in the search results.)wp-gallery-advance-3
  3. After you have installed and activated the plugin, you will be able to set it up by clicking on ‘Settings’ and then selecting ‘Responsive Lightbox’ from the dropdown that appears.
  4. A lot of the settings on this page will allow you to change the appearance and automation of the plugin.  I would suggest trying the different settings out on a draft page to see what your personal preference is.  I will therefore not go into much depth with these settings as they will vary from project to project, but I will instead just list the useful options for creating a WP gallery.
  5. The main options, I would like to discuss here are the automated functions, to add lightbox effects to certain media types.
    – I would definitely select the check box beside ‘Galleries’, as this is the specific purpose I am talking about.  If you only want to use the lightbox effect for your galleries and not every image uploaded to your site, then I would suggest disabling / unchecking the tick boxes beside ‘Image links’ and ‘Video links’.
  6. This will allow any galleries you create to look much prettier and be more user-friendly too.
  7. Have fun playing around with the settings or you could even think about customising the styles with CSS create a completely bespoke look and feel.  I am happy to help with settings these elements up, or styling them to match your brand, so get in touch if you’d like further help.
WordPress Gallery Tutorial was last modified: April 18th, 2016 by Steve Cartwright

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.