1.877.226.2662

Create a Custom Layout for a Picture Library

Create a Custom Layout for a Picture Library

Create a Custom style for your rotated list

Example:

HW21 - example1 rotator.png The example explained here rotates images from a SharePoint Picture Library. Below the image, a hyperlink column is displayed that end users can click on to go to a page that provides more information about the image.

The Picture Library view that is rotated is shown below. Notice the column called click here is included in the view called for Rotating. It is a column of type hyperlink.

HW21-Example2listview.png

How to configure this custom layout:

Step Action Result
1. Edit the web part and select Custom as the Style. hw21 tool pane-style.pngThe buttons in that section will become enabled.
2. Click Edit Source The default layout will appear in the List Rotator text editor. If desired, copy the contents to your text editor of choice.
hw21 - default custom partial.png
3. Delete the code highlighted in yellow below.
HW21 - default layout with yellow to delete3.png
4.

Replace this code

<xsl:value-of select="@ows_Title"/>

with this

<xsl:value-of select="@ows_click_x0020_here"/></TD>

The resulting code should look like this:
hw21-example2newlayout.png
Paste it back into the List Rotator text editor and click Save to close the editor and save your layout changes.
5. We want to center the hyperlink below the image, so we need to modify the cssTitle class.

Click the CSS Edit button in the Select Style section of the web part tool pane.

The default CSS code appears in the List Rotator text editor.

Change this

TD.cssTitle{text-align: right;font-weight: bold;}

to this

TD.cssTitle{text-align: center;font-weight: bold;}

click Save to save your changes.
6. Make any other changes to the web part configuration (i.e., speed of rotation). When ready click Apply and then OK at the bottom of the tool pane to save and apply your changes.