Tutorials

How to create a Gallery

  • August 18, 2012

*Since the release of WordPress Version 3.5 the method of adding media files has changed a little. Mostly, the user-interface has been modified and causes some confusion. We have created some additional (updated) tutorials that will help.

WordPress 3.5 – How to create Galleries with Shortcodes.
WordPress 3.5 – How to create Galleries with Page Templates.

In our original release of KingSize WordPress, galleries were restricted to pages only and this hampered some of our buyers flexibility – for that we apologize. In our latest release, version 4, we’ve created a new post type custom to the galleries usage called “Gallery”. It’s sole purpose is to house the galleries you wish to create and allows you to then use a “Shortcode” to call them into various areas of your website (ie., Posts, Pages, Portfolios, etc).

Now if you’re a buyer from the past, you likely will be thinking to yourself, “What will happen to my old galleries then?” and the answer is “Nothing!” – Absolutely nothing will happen. They will still remain just as they were, no changes at all. In KingSize WordPress, you have two methods of creating Galleries. One is to create it using the “Page Template” and the new and improved way is to create them using the post-type “Gallery”.

Creating a Gallery with Page Templates

This method is restrictive to Pages only and it still remains so we do not disrupt the past-buyers usage of the page templates. However, some folks may still wish to use them and we’ll go about explaining how they work and how you can create a Gallery using these page templates.

  1. Log into your WordPress Dashboard.
  2. Locate the “Pages” post-type and create a new page.
  3. Title your page and add the text of your choice if desired.
  4. To the right, you will see “Page Attributes“.
  5. Inside this area you will see a drop-down to select from pre-created page templates (there are 5 gallery choices).
  6. Locate the “Gallery Template” of your choice (ie., PrettyPhoto, SlideViewer, Fancybox, Colorbox, Galleria) and make your selection (view our demonstration site to see the differences).
  7. Now at the top of your content editor, locate and click “Upload / Insert” to attach / upload your desired images.
  8. When the new window opens, you may now upload the desired photos of your choice from within your computer.
  9. Once you’ve uploaded the photos, click “Save“.
  10. Now you can go to the “Gallery” tab and customize those image Titles/Descriptions and order to suit your preference.
  11. To change the order they’re displayed, just drag and drop.
  12. Now that you’ve uploaded your photos and made your edits, click “Save Changes” prior to closing out the window.
  13. To close out the window, click the “X” or click outside the box.
  14. Now, look in the write-panel beneath the Content/Text editor and there is an area titled “KingSize Page Options“.
  15. Here you will find an option labeled “Gallery Page Layouts” (2 columns, 3 columns, 4 columns and grid layout) – just select a layout for your gallery to display on the site.
  16. Additionally, you can add custom backgrounds and other options to this page being created.
  17. Now “Publish” the newly created gallery page and those images will be displayed within the frontend of your website.

IMPORTANT NOTE: When you’re creating a “Page Gallery” using the “Page Template”, DO NOT INSERT the photos you have uploaded into your page. This will cause your page to have a duplicate gallery. One will display the native WordPress Media Gallery, the other will display the custom Gallery you’ve selected from the page templates. Our galleries are designed to dynamically pull and generate those uploaded images into the page contents on the frontend of your website once published. So there is no need to “insert” the galleries into your pages.

Creating a Gallery using the Gallery Post-type

There are many advantages to using the “Gallery Posts” verses creating with Gallery Page Templates.

  1. You can insert the Gallery into any page/post you desire.
  2. You can re-use the gallery multiple times as desired.
  3. You have a variety of options to customize that gallery.
  4. They use shortcodes to be inserted into various areas.
  5. Can create and manage galleries easily within one area.

These are only 5 of the benefits to using the Gallery Post-type verses the Gallery Page Templates.

Oh, and it’s of course easier to create as well! with more options!

Follow these steps to create a Gallery:

  1. Locate within your dashboard sidebar, “Gallery”.
  2. Select the “Add New” option.
  3. Give your gallery a unique name for organization.
  4. Just above the title area, click “Upload/Insert”.
  5. Now just as you would uploading your images to the “Page Templates”, you want to repeat those steps. So now that you’ve clicked the “Upload / Insert” link, a new window will open to display an “Upload” box. Here you can select from your desktop which photos you want to upload to this gallery.
  6. Once those images have uploaded, you can click the “Gallery” tab in that window and edit the Titles / Description and/or organize their order displayed by dragging and dropping them.
  7. That’s it. You’re done. Now save your changes and publish.

So now you’ve uploaded your images to the newly created post within your Gallery post-type, what next? How do we display those images? It’s quite simple. This post you created will NOT display on the frontend of your website until you’ve called it by using a gallery shortcode and each gallery is assigned an ID when you’ve created it.

To locate the Gallery ID, go to “Galleries” where you can view all the gallery posts. Inside this area you will see a column labeled ID. You will need this ID when creating your shortcode.

Here’s the shortcode for example that you would use:

[[img_gallery id="" type="" layout="" orderby="" order="" description="" placement=""]]

Show Shortcode Options / Explanation

Here’s an example Gallery using Shortcodes

[[img_gallery id="71" type="colorbox" layout="2" orderby="random" order="DESC" description="This gallery is created using the Colorbox 2 Column Layout with a Description shown Below the gallery." placement="below"]]

This gallery is created using the Colorbox 2 Column Layout with a Description shown Below the gallery using the shortcode shown above.