How to Upload Images from Your Computer to Your WordPress Blog
Uploading Images from Your Computer to Your WordPress Blog
How to Insert an Image From a PC into a WordPress Post or Page

How to Insert a Photo Gallery into Your WordPress Blog

You can use the WordPress Insert Media window to insert a full photo gallery into your posts. Upload all your images and then, instead of clicking the Insert into Post button, click the Create Gallery link on the left side of the Insert Media window. The Create Gallery window opens and displays all the images you’ve uploaded to your site.

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

  1. In the Create Gallery window, select the images you want to use in your gallery.

    Click each image once in order to select it for use in the gallery. A selected image displays a small checkmark in its upper-right corner.

    image0.jpg
  2. Click the Create New Gallery button.

    The Edit Gallery page opens.

  3. (Optional) Add a caption for each image by clicking in the Caption This Image area and typing a caption or short description for the image.

  4. (Optional) Set the order the images appear in the gallery by using the drag-and-drop option on the Edit Gallery page.

    Click and then drag and drop images to change the order.

  5. (Optional) Specify the following options under the Gallery Settings section on the right side of the Edit Gallery Page:

    • Link To: Media File or Attachment Page.

    • Random Order: Select to randomize the order in which the images are displayed in the gallery.

    • Gallery Columns: Select how many columns of images you want to appear in your gallery.

  6. Click the Insert Gallery button.

    WordPress inserts into your post a piece of shortcode that looks like this: [gallery ids"1,2,3"].

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

    Use the WordPress gallery shortcode to change different aspects of the display of the gallery in your post:

    • captiontag: Change the markup that surrounds the image caption by altering the gallery shortcode. For instance, [gallery captiontag="div"] places <div></div> tags around the image caption. (The <div> tag is considered a block-level element and creates a separate container for the content.)

      If you want to have the gallery appear on a line of its own, 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 in which 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 Short Code Examples
Gallery Short Code Output
[gallery columns="4" size="medium"] A four-column gallery containing medium-sized 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
  1. 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’s no line break. You need a little knowledge of CSS to alter the <span> tags. Click the Design tab in your WordPress Dashboard, and then click the Theme Editor subtab 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 1-pixel black border around each thumbnail, with 3 pixels of padding and a white background. The left and right margins are 5 pixels wide, creating nice spacing between images in the gallery.

  2. Click the Update File button to save changes to your Stylesheet (style.css) template.

The figure shows a post with a photo gallery displayed, using the preceding steps and CSS example in the default WordPress theme: Twenty Twelve.

image1.jpg

Matt Mullenweg, cofounder of the WordPress platform, created a very extensive photo gallery by using the built-in gallery options in WordPress. Check out this fabulous photo gallery.

image2.jpg
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Edit a WordPress Theme to Include Photo Gallery Styles
How to Insert Images From the Web into a WordPress Post or Page
How to Use Vector-Based Software with WordPress
Comparing Raster and Vector Images in WordPress Designing
How to Upload Video from Your Computer to Your WordPress Blog
Advertisement

Inside Dummies.com