October 2013 – Corrie Haffly

The problem

I have a list with an Image column. When adding items to the list, you get the ability to type a description for the image. Seems like this would be used as “alt” descriptive text, right?

Image information in list

Well, let’s pull this field into a Content Query Web Part. I’ll use the default of “image on left” just to see what happens. In the Fields to display section, I put in my “Image” column name, as shown below. I’m hoping that the image will be displayed on the page, and that my image description will show up as “alt” or “title” attributes.

CQWP settings

But nothing shows up! When I view the HTML, there is no “alt” attribute, and the “title” attribute is blank.

No title

Let’s check out the XSL to see what’s going on. Opening SharePoint Designer, go to Style Library > XSL Style Sheets > ItemStyle.xsl. Look for

<xsl:template name="Default" ...>

(which should be near the top) to find the default style. Going down further in the code, you should then be able to locate the <img> tag, which looks like this:

<img src="{$SafeImageUrl}" title="{@ImageUrlAltText}">

For some reason, the @ImageUrlAltText just isn’t showing up. Rather than fight with SharePoint to figure out why, let’s create our own custom Item Style.

The Solution

The first step is to make a new item style. You may find it easiest to find the chunk of code that correlates with an existing item style that is close to what you already want to use. For example – if “Image on left” suits your purposes, copy the “Default” chunk of code (it’s around 65 lines), which begins and ends with:

<xsl:template name="Default" ...>
...
</xsl:template>

Or, if you want to use the “Clickable Image” style, then look for this:

<xsl:template name="ClickableImage" ...>
...
</xsl:template>

Copy that code and paste it to create a new section. Edit the opening xsl:template tag attributes to look like this:

<xsl:template name="YourCustomName" match="Row[@Style='YourCustomName']" mode="itemstyle">

There are probably some xsl:variable elements immediately underneath the xsl:template tag. Let’s make a new variable to hold our image descriptive text. Add this code:

<xsl:variable name="ImageAltText">
<xsl:value-of select="substring-after(@ImageUrlAltText, ', ')" />
</xsl:variable>

(Brief explanation: After some testing, I noticed that SharePoint holds the image URL and alt text in the same field, which looks something like this if you pull it out: “imageurl, This is the descriptive text here.” So I just select the substring after the comma to grab the alt text, and pull that into my new custom variable, “ImageAltText.”)

Now, look for that <img> tag, and change the code to look like this — basically, change the “@” symbol into the “$.”

<img src="{$SafeImageUrl}" title="{$ImageAltText}">

You can keep this as the “title” attribute, or change it to “alt,” depending on what you want.

<img src="{$SafeImageUrl}" alt="{$ImageAltText}">

Save ItemStyle.xsl and check it in. (You have check in ItemStyle.xsl or else the changes won’t show up.) In your CQWP, change the item style dropdown to your new custom style. If all has gone well, you should see your image pulled in with the proper image description as your title (or alt) text!