WordPress Blogs: How to Insert a Photo Gallery

You can use the WordPress media uploader to insert a full photo gallery into your posts. Upload multiple images once you are in the Insert Media window; then, instead of clicking the Insert into Post button, click the Create Gallery link on the left side of the Insert Media window.

image0.jpg

This link opens the Create Gallery window, along with the multiple images you uploaded. All of the images are selected, as indicated by the check mark shown at the upper right side of the image (you can deselect any image to exclude it from the gallery by clicking the check mark).

Follow these steps to insert a photo gallery into a blog post:

  1. Click the Create a New Gallery button.

    The button is located at the bottom right of the Create Gallery window. This opens the Edit Gallery window.

  2. (Optional) Edit the gallery images.

    If you would like to re-arrange the images, you can drag and drop the images to appear in the order you would like them to be displayed on your website. You can also include a short caption for each image by clicking the text box beneath each image.

  3. Configure the Gallery Settings.

    Located on the right side of the Edit Gallery window, these options include:

    • Link To: Use the drop-down menu to select the Attachment Page, Media File, or None.

    • Columns: Select the number of columns you would like the gallery thumbnails to be displayed in. Options in the drop-down menu include 1 to 9 columns.

    • Random Order: This box is deselected, by default. Selecting this box tells WordPress to ignore the defined order of images and orders them randomly on the page instead.

  4. Click the Insert Gallery button.

    WordPress inserts into your post a piece of shortcode that looks like this: [gallery].

  5. (Optional) Change the order of appearance of the images in the gallery, as well as the markup (HTML tags or CSS selectors):

    • captiontag: Change the markup that surrounds the image caption by altering the gallery shortcode. For example: [gallery captiontag="div"] places <div></div> tags around the image caption (the <div> tag creates a separate container for the content); to have the gallery appear on its own line, the [gallery captiontag="p"] code places <p class="gallery-caption"></p> tags around the image caption. The default markup for the captiontag option is dd.

    • icontag: Defines the HTML markup around each individual thumbnail image in your gallery. Change the markup around the icontag (thumbnail icon) of the image by altering the gallery shortcode to something like [gallery icontag="p"], which places <p class="gallery-icon"></p> tags around each thumbnail icon. The default markup for icontag is dt.

    • itemtag: Defines the HTML markup around each item in your gallery. Change the markup around the itemtag (each item) in the gallery by altering the gallery shortcode to something like [gallery itemtag="span"], which places <span class="gallery-item"></span> tags around each item in the gallery. The default markup for the itemtag is dl.

    • orderby: Defines the order that the images are displayed within your gallery. Change the order used to display the thumbnails in the gallery by altering the gallery shortcode to something like [gallery orderby="menu_order ASC"], which displays the thumbnails in ascending menu order. Another parameter you can use is ID_order ASC, which displays the thumbnails in ascending order according to their IDs.

      Gallery Shortcode Output
      [gallery columns="4" size="medium"] A four-column gallery containing medium-size images
      [gallery columns="10" id="215" size=”thumbnail”] A ten-column gallery containing thumbnail images pulled from the blog post with the ID 215
      [gallery captiontag="p" icontag="span"] A three-column (default) gallery in which each image is surrounded by <span></span> tags and the image caption is surrounded by <p></p> tags
  6. Define the style of the <span> tags in your CSS stylesheet.

    The <span> tags create an inline element; an element contained within a <span> tag stays on the same line as the element before it; there is no line break. You need a little knowledge of CSS to alter the <span> tags. Click the Editor link in the Appearance menu on your WordPress Dashboard to edit the stylesheet for your theme.

    Here’s an example of what you can add to the stylesheet (style.css) for your current theme:

    span.gallery-icon img {
        padding: 3px;
        background: white;
        border: 1px solid black;
        margin: 0 5px;
    }

    Placing this bit of CSS in the stylesheet (style.css) of your active theme automatically places a one-pixel black border around each thumbnail, with three pixels of padding and a white background. The left and right margins are five pixels wide, creating nice spacing between images in the gallery.

  7. Click the Update File button to save changes to your stylesheet (style.css) template.

    image1.jpg

Matt Mullenweg, co-founder of the WordPress platform, created an extensive photo gallery by using the built-in gallery options in WordPress.

Some great WordPress plugins work in tandem with the WordPress gallery feature.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.