### URL or Links

#### Basic Link

```
<a>
<xsl:attribute name="href">
<xsl:value-of select="@DispForm"/>
</xsl:attribute>
<xsl:value-of select="$DisplayTitle"/>
</a>
```

#### Read More Link

```
<a>
<xsl:attribute name="href">
<xsl:value-of select="@DispForm"/>
</xsl:attribute>
read more…
</a>
```

### Dates

#### New Zealand Date Format (30 March 2016)

Change the '3' to vary date format (e.g., '1' will display 30/03/2016)

```
<xsl:value-of select="ddwrt:FormatDate(@StartDate, 2057, 3)"/>
```

### Images

#### Basic Image from Picture Field

```
<img border="0" src='{@PostImage}' alt='{@PostImage.desc}' title='{@PostImage.desc}'/>
```

#### Conditional Image Display

Shows nothing if image field is blank

```
<xsl:choose>
<xsl:when test="@PostImage != ''">
<img border="0" src='{@PostImage}' alt='{@PostImage.desc}' title='{@PostImage.desc}'/>
</xsl:when>
<xsl:otherwise>
</xsl:otherwise>
</xsl:choose>
```

#### PDF Icon

```
<div class="pdficon">
<a href='{$SafeLinkUrl}' title='{@LinkToolTip}' target="_blank">
<img src="/_layouts/15/images/icpdf.png?rev=36"></img>
</a>
</div>
```

### HTML

#### Parse Field as HTML

Renders HTML content instead of escaping it

```
<xsl:value-of select="@Author" disable-output-escaping="yes" />
```

### Conditional Styling

#### Set div based on field value

Apply different CSS classes based on field values

```
<xsl:if test="@Urgency = 'High' ">
<div class="High">
</div>
</xsl:if>

<xsl:if test="@Urgency = 'Low' ">
<div class="Low">
</div>
</xsl:if>
```

### Tips and Best Practices

- •Always test your XSL transformations in a development environment first
- •Use conditional statements to handle empty fields gracefully
- •Remember to escape special characters when not using disable-output-escaping
- •Keep your XSL code organized and well-commented for future maintenance

### Need Help with SharePoint XSL Development?

Our SharePoint experts can help you create custom XSL transformations and optimize your Content Query Web Parts for better performance and user experience.