Modifying the size of an image stored in a Content Type

Here's a puzzle. We wanted to call a SharePoint Content Type that holds an image, but to use code to force the image to present at a different size. But the XSL call in the SharePoint page looks like this:

<PublishingWebControls:DateTimeField FieldName="PublishingPageImage" runat="server" />

... so there's not a lot of scope to add in height and width attributes. Using the SharePoint web browser image size controls wasn't an option because we needed the same Content Type image to appear at full size elsewhere.

After a bit of searching on Google, we realised that this wasn't going to be solved for us. So we looked back over our code snippets and found a way of splitting up the code that SharePoint renders into its component parts. Here's how we did it.

1. Create and populate a variable with the image URL from a Publishing Image (content type). Like this:

<xsl:variable name="picURL" select="substring-before(substring-after(@PublishingPageImage, 'src=&quot;'), '&quot;')" />

2. Now call the variable and drop it into an image call with different size attributes, like this:

 <img height="75" width="100">
   <xsl:attribute name="src">
     <xsl:value-of select="$picURL" />
   </xsl:attribute></img>

SPDesigner won't like the closing img tag, but just ignore the yellow highlight!

Concertina - reveal and hide text by click

In our SharePoint 2007 site collection we've had quite a few requests for FAQs that open when the question is clicked then snap shut when the question is clicked again. This is a fairly simple effect to achieve in a Data View Web Part.

To contain the FAQ questions and answers, create a custom list and add a single additional multi-line text column, Answer, to hold the answers. You'll use the Title column to hold the questions. If you expect the FAQs to divide into sections, you can another field called Category, perhaps as a Choice field, and add your categories as choice values.

Now add one or two questions and answers (and if applicable, assign a Category value to each q&a) so you'll be able to see content as you build your Data View Web Part.

Next, create a Data View Web Part on the appropriate page and insert data from the fields Title and Answer.

Finally, replace the table-row that's displaying your list data in the DVWP with this code:

    <xsl:if test="position() = 1">
     <tr>
      <td>
       <h2><xsl:value-of select="@Category"/></h2>
      </td>
     </tr>
     </xsl:if>
     <tr>
      <td class="ms-vb"><span style="cursor:pointer" onclick="if (this.parentNode.parentNode.nextSibling.style.display=='none') this.parentNode.parentNode.nextSibling.style.display='block'; else this.parentNode.parentNode.nextSibling.style.display='none';" >
       <h3 style="margin:0px"><img src="/masterPageTemplateImages/miniplus.gif" />&#x9;<xsl:value-of select="@Title" /></h3></span></td>
 
     </tr>
     <tr style="display:none">
      <td class="ms-vb">
       <xsl:value-of select="@Answer" disable-output-escaping="yes" /></td>
 
     </tr>
     <tr><td><img src="/masterPageTemplateImages/spacer.gif" height="10" width="50"/></td></tr>

The "miniplus.gif" image is optional, but helps clarify for the users that the question is clickable to reveal the answer and the final table cell with the spacer.gif just adds a little space between the q&as.

That's it - job done!