How Woo360 renders the title of an image (2.1)

In Woo360 2.1, the Title field in the Media Library is rendered in the HTML for modules that have an image.

Note: Usually browsers display the image title in a yellow box when users mouse over the image. When Woo360 renders the HTML <img title> attribute, it also suppresses the display so the title remains hidden in the HTML source.

The HTML <img title> attribute is rendered from the Title field in the Media Library, but how the Media Library Title field gets populated depends on the presence or absence of IPTC metadata in the image you upload. The following table shows how WordPress imports an image's IPTC metadata in the Media LIbrary when you upload an image, and how Woo360 renders the HTML output from the Media Library fields.

# Image's IPTC metadata Media Library fields Rendered HTML output
1 Title metadata only Title field only <img title> and <img alt> attributes = Media Library Title field
2 Caption/Description metadata only Title field = Caption field <img title> and <img alt> ;attributes = Media Library Title and Caption fields
3 Title and Caption/Description metadata Title field = IPTC Title;
Caption field = IPTC Caption/Description
<img title> attribute = Media Library Title field
<img alt> attribute = Media Library Caption field

The previous table shows:

  • #1 The Title field renders both title and alt attributes in the HTML output Woo360 renders identical HTML <img title> and <img alt> attributes, even though the Media Library Alt Text field is empty.
  • #2 If the image has IPTC Caption/Description metadata but no IPTC Title metadata, WordPress populates the Media Library Title and Caption fields with the same value and leaves the Description field empty. Woo360 renders identical HTML <img title> and <img alt> attributes, even though the Media Library Alt Text field is empty.
  • #3 If the image has both IPTC Title and Caption/Description metadata, then the WordPress Title field is populated with the IPTC Title, and the WordPress Caption field is populated with the IPTC Caption/Description. Woo360 renders the HTML <img title> attribute from the Title field and the <img alt> attribute from the Caption field, even though the Media Library Alt Text field is empty.
  • #1-3 When the Media Library ALT Text field has no value, Woo360 uses the Media Library Caption field or falls back to the Image Library Title field as the value for the HTML <img alt> attribute. If you manually add an ALT Text field value to the image in the Media Library, the HTML <img alt> attribute takes the Media Library ALT Text value.

Tips: Check and fix your Media Library Title and Alt Text fields as soon as you upload an image. If the image has no IPTC Title value set, WordPress populates the Media Library Title field with the image's file name. This means, for example, if your file name is IMG_12345.jpg and you don't manually change the values in the Title or Alt Text fields, the HTML <img title> and <img alt> attribute values will be a nondescriptive file name. This is not good for search engine optimization.

Not sure of the difference between the HTML <img title> and <img alt> attributes? This article has a nice summary.