How to Alter Images in a Wordpress Gallery Using HTML

After uploading images to a WordPress photo gallery, you can edit the page using HTML to manually set the display settings for your photo gallery.

  1. In the Page (or Post) edit box in HTML view, you can change the order of appearance of the images in the gallery, as well as the markup (HTML tags or CSS selectors), by entering the following short codes.

    captiontag: Change the markup that surrounds the image caption by altering the gallery short code. For example,

    [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.)

    To have the gallery appear on a line of its own, use the following code:

    [gallery captiontag="p"] 

    This 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 short code to something like

    [gallery icontag="p"]

    This 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 short code to something like

    [gallery itemtag="span"]

    This 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 display within your gallery. Change the order used to display the thumbnails in the gallery by altering the gallery short code to something like

    [gallery orderby="menu_order ASC"]

    This 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.

  2. When you’re finished, click the Preview button to preview your changes; when you’re satisfied, click the Publish button to publish your page.

Gallery Short Code Examples
Gallery Short Code 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
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com