Galleries

Introduction Back to Top

The primary focus for almost all portfolio based sites, is the presentation of your work. We've always made it a priority to put image galleries as a top priority when building our themes. This is even more of a focus in version 2 of our themes, where we have spent a considerable amount of time designing a system that's not only easy to use, but easily extendable and configurable.

It is important to note that the galleries are controlled by a configuration file that is loaded onto the page when you are viewing them on your site. This configuration file is only generated when you click the Publish/Update button, so it is imperative that you save any and all changes to your galleries by clicking the Publish/Update button prior to viewing/previewing them on the site. If you are using any caching plugins on your site be sure to Clear the Plugin Cache so that the new configuration file is loaded onto the page. You will also want to make sure your browser downloads the new config file by holding the Shift key while clicking Refresh in your browser while viewing the gallery.

Creating Galleries Back to Top

Note: To simplify the process and provide consistency across all of our themes, we've made the process of creating, updating and inserting galleries the same for every theme.

Creating galleries is just as easy as creating a new Blog post or Page in WordPress:

  1. Click the Galleries item in your WP Sidebar.
  2. At the top of the screen next to the Galleries title, you'll see a button titled Add New Gallery, clicking that button will take you to the gallery edit screen. This screen looks very similar to the Post and Page edit screens, with a few added options.

Adding Images Back to Top


To add images to your gallery, simply click the Upload/Edit Images button that's located in the Gallery Images tab of the Page Options panel. This will open the WordPress media uploader modal window. You can either upload new images to use in the gallery, or select images from your Media Library (images you've already uploaded to WP). By default, the window will open to the Media Library, if you'd like to upload images, click the Upload Files link at the top of the window. If you'd like to insert images that you've already uploaded to this gallery i.e. You're updating your galleries from Version 1, select Uploaded to this Post from the dropdown at the top of the modal window. This will load in all the images you've previously uploaded to this gallery, and then you can selet and insert them.

A Note on Image Sizes

The image sizes for the galleries really should be based on what size resolution/browser your visitors are viewing the site in. You have to remember that in general, most people viewing your site are going to be on a smaller monitor. Roughly 70% of people in the US browsing the internet are on a screen size with a height of 1000px or smaller, this number is actually likely higher but because mobile isn't explicitly tracked in most of the available statistics it's hard to say.

The best way to decide what sizes to use is to look at your Google Analytics, which allows you to drill down into screen resolutions to find out what the most prevelant sizes for your site are. You can find this under Audience->Technology->Browser & OS, then select Screen Resolution from the Primary Dimension links right below the graph. Now, this only tells part of the story but is a good baseline. Just because someone is on a screen resolution of XX doesn't mean they are browsing at the same size, in general the larger the resolution size, the less likely they are to have a browser or window maximized. Because of this, in Version 2 we've implemented custom Google Analytics metrics that you can turn on that will actually measure your visitors browser size and report it to your analytics. To turn it on go into the Advanced section of the theme options and click the Analytics tab. In the description it shows you where to look in your analytics to find the data it reports.

The reason we always suggest tailoring your image sizes to your specific visitors and rather than what you see is simply site performance. If you upload images that are all 2500x1600 pixels wide because that's the size that looks best maximized on your monitor, you're forcing everyone that visits your site to download extra large images, which will have a much larger file size, that will result in longer download times, thus longer page load times, especially on mobile devices. You should always use the smallest images that you can get away with, with the smallest file sizes possible, this way you ensure a good experience on your site for the majority of visitors. Ultimately though, the file size is the most important factor when it comes to images, smaller images = faster load times. The file size can also have a significant impact on the usability and performance of the site even after the page has finished loading, especially when it comes to galleries. The larger each image is, the more computing power it takes to animate those images on the page, i.e. the fading/sliding of the galleries. On slower computers loading a large amount of large images on the page may cause the animations to look choppy or skip or may make the page unresponsive. On mobile devices, using too many or too large of images may cause the page to not load or can possibly crash the browser altogether. This is because mobile devices only have a limited amount of computing power and most mobile devices have resource limits that restrict how much data can be loaded onto any given page. These limits ensure apps or web pages do not consume all of the resources of the phone. These limits also vary based on device and operating system, so there is no across the board threshold to stay under unfortunately. Remember: File Size Matters.

Selecting Images

Once you have uploaded images (or you are using images you've already uploaded), you'll need to select the images you want to show in the gallery. To do this, simply hold the Control/Command key and click on the images you want to use, this will allow you to select multiple images at once. As you select images you'll see a Checkmark appear in the upper right corner of the image thumbnail, and they will also appear in the preview bar as small thumbnails at the bottom of the window. After you've made your selections, simply click the Use Selected Images button to insert them into the gallery. This will close the uploader window and you should now see your selected images as thumbnails, below the Upload/Edit Images button. You can now arrange the images in the order you want them to appear in the gallery.

Ordering Images Back to Top


To order images, simply drag and drop the thumbnails into the order you want them to appear in the gallery. Order goes from left to right, so the top left thumbnail is the first image in the gallery, and the bottom right thumbnail is the last image in the gallery.

Note: Make sure you save your changes to the image order by clicking the Publish/Update button after you're done, otherwise the order will not be saved.

Gallery Settings Back to Top

Each gallery that you create is individually configurable, with multiple options to give you full control over the slideshow. The gallery setup options can be found by clicking the Gallery Setup tab that is below the Gallery Images tab in the options panel. This panel contains all of the options for the currently selected Gallery Style (note that changing the gallery style will change the options/settings shown in this panel).

Each theme has at least one gallery style, the Standard style. This is a simple fixed width/height slideshow with optional thumbnails. The screenshot below shows the settings for the Standard style. Since each theme can have additional gallery styles, we will only touch on the settings for the Standard style in this tutorial. You'll find help for other gallery styles in the individual theme help docs.

Each settings section or option contains a brief description of what the options control. For sections with multiple options, there is a question mark icon that will reveal a tooltip with a description of that particular setting.

Defaults - Many of the standard style options, such as Width, Height, Transition speed, Transition Timeout, Thumbnails etc, can be set globally in the Theme's option panel under the Gallery tab of the Settings section. Setting an option globally simply means that any gallery you create will automatically have these values populated with your global selections, eliminating the need to fill out the info every time you create a new gallery. In other words, setting an option globally just makes it a default for your galleries, and you can still change these values for each gallery.

Password Protection - While WordPress has always had the option to password protect items, it wasn't the easiest or most intuitive option to find. In version 2 we've made password protecting galleries, posts and pages much easier by adding the Set Password link at the top of the Page Options panel. This makes it easy to secure any gallery, post or page on your site by clicking the link and typing in a password and clicking the Publish/Update button. If a gallery is locked, the lock icon will be closed and the text will change from Publicly Viewable to Password Protected. To remove a password simply delete the password from the password field and click the Publish/Update button.


Using Video in your Galleries Back to Top

All of our themes have the ability to add YouTube or Vimeo videos to your galleries as well as just images. To ensure that your galleries load quickly and properly, you will still need to upload images that will act as a 'Placeholder' for the video(s).

  1. To add a Video to your gallery, when editing the gallery, click the Upload/Edit Images button to open the Media manager popup window.
  2. Once media popup is open, simply select the image you would like to use as your video's placeholder by clicking on the image's thumbnail.
  3. This will reveal the Attachment Details sidebar on the right of the popup. You will see a field titled 'Video URL', simply paste in the link to your YouTube or Vimeo video in this field.
  4. Repeat this process as needed.
  5. After you have entered the URLs to all of the videos you would like to show, click the Use Selected Images button to close the Media popup.
  6. Once you are done making any other changes to the gallery, to ensure your changes are applied to the gallery and to allow for a new configuration file to be generated, you must click the 'Publish/Update' button for the gallery.

Your gallery should now show a Play icon/button overlaid on each of the images you entered a Video URL for. Clicking this button will load and play the video.


Adding Galleries to the Menu Back to Top

Once you've created your Galleries, and assigned a Featured Image, you can now add a link to the Gallery to your Navigation Menu.

Note: If you'd like to add your galleries as a sub-menu to a Portfolio link in your menu, click the Portfolios link at the bottom of the page to advance to the next help article.


In the menu editor, which is located under Appearance->Menus of the WordPress sidebar, you'll see a box in the left column labeled Galleries. This box will show any Galleries you have created with a checkbox next to the name. To add one or more to the menu, simply check the box next to the name, and click the Add to Menu button. This will add the gallery to the menu on the right. You can then drag & drop the box to the position you would like it displayed in.

Note: If you do not see the Galleries box as shown in the image above, click the Screen Options tab in the upper right corner of the screen. This will reveal a panel with multiple checkboxes. Click the box next to Galleries in the panel to add the Portfolios selection box to the menu editor. You can also check any other items you wish to be able to add as individual menu items as well.