This article was last updated on the January 2, 2017.
Who doesn’t love a good photo gallery? Galleries are a great way to share a collection of photos in a simple, attractive fashion for your users. Using X, there’s certainly no shortage of how these galleries can be implemented and utilized throughout your site. This article aims to discuss the various methods utilized in the theme for setting up galleries in different situations on your site depending on how you want to manage your content.
This isn’t an X feature, but the native [gallery] shortcode in WordPress is a great place to start as many people wonder about what it is, how it’s used, and when best to use it. For a more thorough rundown of the shortcode itself and all of the various options you can take advantage of, check out this article on the WordPress Codex.
What It Is
A simple shortcode for outputting images in a structured fashion in the content of a page or post. It can be constructed via the WordPress Media Manager for one-time output, but cannot be saved anywhere or recalled later on other pages (unless you do some old fashioned copy and pasting).
What It Isn’t
It is not a data-set that can be stored and later retrieved for output. When using the WordPress Media Manager to output the shortcode, that data is not saved anywhere in the database (unlike attachements, which are and have associative data such as IDs to be used for later retrieval). The gallery shortcode cannot be used to create a featured gallery on posts or portfolio items as it is meant to be output in the main content of a page or post and the data from the shortcode cannot be used elsewhere as previously stated.
How to Create a [gallery] Shortcode Using the Media Manager
To begin setting up your gallery with the WordPress Media Manager, you’ll first need to select the Add Media button to the top left of the WordPress editor.
Once you have selected that button, you should see a modal appear on your screen. Depending on whether or not you’ve already uploaded some images into your media library it might look a little different than below, but you’re on the right track so don’t worry. Next, click the Create Gallery link in the left sidebar and then select the images that you’d like to include in your gallery. Once you’ve done that, it should look something like the following image:
After you have made your image selections, click the Create a new gallery button in the bottom right corner of the modal. On the next page you’ll be able to reorder your gallery images by dragging and dropping them to the positions you want, give them image captions if desired, set media links (if any), determine how many columns the gallery should be, and optionally choose to output your images in a random order. Once you’re done with everything, your page might look something like this:
If you feel good about your choices, select the Insert gallery button in the bottom right corner of the modal, which will output some code into the WordPress Editor depending on where your cursor was previously. The code output will look something like this:
[gallery link="none" ids="17965,17964,17963,17962,17961,17960,17959,17958,17957,17956,17955,17954"]
Saving your page and switching over to your post should reveal something like this (again, depending on your Stack selection and the options you’ve chosen for the shortcode itself, it might look a little different, but overall it should appear similar to the example below):
Remember, this markup and functionality that is output is completely controlled by WordPress. We have styled this shortcode to feel more integrated with X and match the look and feel of each Stack, but the basic concept of outputting a simple columned grid is handled within WordPress itself. While this particular setup doesn’t work for everybody, it’s a great solution that is quick and easy to setup if that is your preferred method of structuring your content.
Post Format and Portfolio Galleries in X
In addition to the [gallery] shortcode discussed above, X also includes a special way for organizing and outputting galleries for posts and portfolio items. Below we will walk you through how this process works on the backend and how to setup a gallery for your posts or portfolio items.
How it Works
As mentioned above, the [gallery] doesn’t provide us with any data that we can recall later and work with to output a specially formatted gallery. The data, structure, and functionality of the [gallery] shortcode is completely determined by WordPress and isn’t very flexible beyond that standard usage. Because of this, we have chosen to take advantage of attachements in X, which do have associative data tied to them (e.g. IDs, et cetera), which we can use to retrieve and output content as we see fit. The way we’ve setup these galleries to be used within X takes complete advantage of WordPress functionality and affords users a great deal of flexibility and ease when setting up these galleries.
Now that you have a better idea of how it works, let’s dive into how galleries are created for your posts and portfolio items in X!
How to Create a Gallery for your Posts and Portfolio Items in X
Like the method outlined above, to begin setting up your X specific post and portfolio item galleries, you’ll first need to select the Add Media button to the top left of the WordPress editor.
Next, select the Upload Files tab in the Media Manager and you’ll be taken to a section where you can either drag in your desired files or select them from your computer with the Select Files button. The following is an image of what that screen should look like if you’re in the correct spot.
Choose the files you want and after they’re uploaded you should be redirected back to the Media Library tab (if not, select it). Next, go to the dropdown that is directly beneath the Upload Files and Media Library tabs and select Uploaded to this post. This will bring up a screen that should look something like the following depending on the images you’ve selected to place into your gallery:
On this screen you can reorder your image attachments the way you would like. Once you are done, simply close out the modal and save your post or portfolio item. You do not have to select the “Insert into post” button or do anything else. Once you have uploaded an image to a post, that attachment will automatically be paired with the post and simply saving the post will ensure that the data for these attachments is kept in the database so that we can grab them later and use them.
After you have completed the upload of your content for a gallery, depending on whether or not your are doing this for a post or portfolio item will determine how you complete the last step of this process. If you are setting up a post, go over to the Format meta box in the sidebar and select the Gallery option.
If you are setting up your gallery for portfolio item, go down to the Portfolio Item Settings meta box below the WordPress Editor and select Gallery from the Media Type option. Next, if you would like for your gallery to also show up on the portfolio index page and not just a single item page, select Media from the Featured Content option in that same meta box (the image below is edited to show what these options will look like, but the actual meta box that they belong to is much larger, so make sure that you have scrolled down far enough to see them).
Once all of these options are in place, you should end up with a post or portfolio item with a nicely styled gallery that is output in a slider for easy browsing. Here is an example of what it would look like if you were setting up a gallery post using the Integrity Stack:
There you have it! That’s all it takes to setup a gallery for your posts, pages, or portfolio items in X either using the native WordPress [gallery] shortcode or X’s gallery integration with posts and portfolio items. We hope you’ve found this article helpful and thanks for checking out the Knowledge Base!