Mastering Worpress [gallery] shortcode

by

From WordPress 2.5, the Gallery feature allows the option to add an image gallery to a Post or Page on your WordPress blog.
Upload all your photos and simply type the shortcode [gallery in a post or page to display a thumbnail gallery of images attached to that post or page. Clicking on a thumbnail image will open either the original image or a larger image in a separate Attachment page.

Shortcode Options

There are several basic options of [gallery] shortcode that may be specified using the following syntax
[gallery option1=”value1″ option2=”value2″]
The following basic options are supported:

  • columns: specify the number of columns. The gallery will include a break tag at the end of each row, and calculate the column width as appropriate. The default value is 3. If columns is set to 0, no row breaks will be included. For example, to display a 4 column gallery: [gallery columns=”4″]
  • id: specify the post ID. The gallery will display images which are attached to that post. The default behaviour if no ID is specified is to display images attached to the current post. For example, to display images attached to post 123: [gallery id=”123″]
  • size: specify the image size to use for the thumbnail display. Valid values include “thumbnail”, “medium”, “large” and “full”. The default is “thumbnail”. The size of the images for “thumbnail”, “medium” and “large” can be configured in WordPress admin panel under Settings > Media. For example, to display a gallery of medium sized images:[gallery size=”medium”]

Advanced options

  • orderby: specify the sort order used to display thumbnails. The default is “menu_order ASC, ID ASC“.
  • itemtag: the name of the XHTML tag used to enclose each item in the gallery. The default is “dl“.
  • icontag: the name of the XHTML tag used to enclose each thumbnail icon in the gallery. The default is “dt“.
  • captiontag: the name of the XHTML tag used to enclose each caption. The default is “dd“. For example, to change the gallery markup to use div, span and p tags.
  • link: you can set it to “file” so each image will link to the image file. The default value links to the attachment’s permalink.

You should now see a Gallery shortcode appear in your post similar to the following:
[gallery link=”file” orderby=”post_name”]
You can also assign your own tags for enclosing the various elements of the image gallery. I have select tags to enclose my items, thumbnails and captions.
[gallery link=”file” orderby=”post_name” itemtag=”div” icontag=”span” captiontag=”p”]

[gallery] shortcode FAQs

  1. How many images can I have in my Gallery?
    I’m assuming the only limitation is the amount of storage space you have available, so optimizing your images before uploading is important not only because of space and viewer considerations.
  2. The Gallery doesn’t display the thumbnails in the order I want. How do I rearrange them?
    In the Post or Page Visual Editor, click on the Gallery placeholder. You will see two small buttons appear in the upper left corner of the placeholder, clicking on the left button will bring you to the Gallery tab in the Image Uploader where you can change thumbnail order under the Gallery Settings.
    You can set the order number for your images as you want.
  3. My gallery pages not valid XHTML
    By default when using the gallery shortcode the styles are placed into the post content which breaks XHTML validation. You can use Gallery Shortcode Style to Head plugin to fix this places the style into the head of the page using a look ahead to determine if the ‘gallery’ shortcode is used in any posts.
  4. The Gallery thumbnails on my blog are not arranged in columns and rows.
    By default, the Gallery shows 3 thumbnails per row. If the Theme you are using is particularly narrow, this knocks the thumbnails out of alignment and you see the behavior described above. In order to change the number of thumbnails displayed per row, you will need to open the Image Uploader in the Post or Page Editor, switch to the Gallery tab and modify the Gallery settings. Another way is to switch to the HTML Editor window and directly modify the shortcode to [gallery columns=”2″] or if your theme is very wide and you want to display more thumbnails per row [gallery columns=”4″].
  5. Can I add or delete images, thumbnail images in my existing Gallery?
    • To change thumbnail images size: You can change the default size of thumbnails on your blog via your Dashboard’s >>Settings >>Media>>Thumbnail Size. Changing this setting changes the thumbnail size globally on your entire blog, not just in a single Gallery.
    • To add or delete images, have the Post or Page where the Gallery appears open in the Editor. You can add or delete images in the Gallery tab. If necessary, reorder your thumbnails as described above.
      In all cases, remember to click “Save All Changes” and “Update Gallery Settings”.
  6. Is it possible to edit the images in my Gallery or Attachment pages?
    Because your Gallery images are being displayed via the Gallery shortcode, you do not have the option of editing images that appear in a Gallery.
    Attachment pages themselves cannot be edited as a regular Page. If you click on the “Edit Post” button or “Edit This” link that appears on the Attachment page, you will be taken to your Media Library where you can change the image’s Title, Caption and Description.
  7. How can I display an image in the same Post or Page without it being a part of the Gallery?
    Any image you upload in the same Post or Page where your Gallery appears will automatically be included in that Gallery. Inserting an image which was uploaded via “Media>Add New” in the Dashboard is not attached to a specific Post or Page and will become attached to the Post or Page where your Gallery appears.
  8. Can I have more than one Gallery in my Post?
    Galleries are tied to individual Posts or Pages. In order to have more than one Gallery per Post or Page, you need to create a new Post and upload the images you want there. Save the Post, go to your Dashboard’s Manage>>Posts and then hold your mouse over the title of the Post where you inserted the additional Gallery. (Update: you can also find this information via your Media Library.) In your browser’s status bar, you will see the link to edit your Post, which ends in a number. That is the ID number for the Post where the additional Gallery appears and what needs to be inserted in the Gallery shortcode via the HTML Editor. For example, the Gallery just below is coming from a past Post and also demonstrates displaying medium thumbnail size. The shortcode looks like [gallery id=”119″ size=”medium”].
    Unfortunately, the additional Gallery only shown in post if it appears in a post was published, otherwise when viewers click on a thumbnail, they get a “Page not found” error.
  9. Can I have a Page that displays all my existing Galleries?
    Answers like the ones above, the difference is posts and pages.
    Can I Remove WordPress [gallery] shortcode embedded stylesheet then using my own?
    Yes, you can. Dump this code anywhere in Theme’s template functions.php file: 

    function remove_gallery_style() {
  return "<div class='gallery'>";
}
add_filter('gallery_style', 'remove_gallery_style');

    And these are the classes for your stylesheet:

    .gallery {}
.gallery-item {}
.gallery-icon {}
.gallery-caption {}

    Now, you can use your own stylesheet code.

Reference Resources

Are you can total control wordpress [gallery] shortcode?

2 thoughts on “Mastering Worpress [gallery] shortcode”

  2. My issue is that I want my images to be linked to external urls that link to other websites, it appears that these options only provide you with linking the images to the “Image File” or the Attachment Page”

    I have tried deleting the saved URLs and entering the URLs of my choice, with no success.

Comments are closed.