Learn more with dummies

Enter your email to join our mailing list for FREE content right to your inbox. Easy!

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,

    
    

    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:

     

    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

    
    

    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

    
    

    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

    
    

    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
A four-column gallery containing medium-size images
A ten-column gallery containing thumbnail images pulled from
the blog post with the ID 215
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