Templates

Templates let you control the look-and-feel of a whole class of elements (such as image buttons) on your site, from one central location.

This walkthrough assumes you have already configured DynamicImage for the website you are working on.

This example shows how to create a button template, which will control the look-and-feel of all buttons on the website. The text of each button will be set individually.

To use templates

Step 1

Open the website's the web.config file and add the following lines to your dynamicImage section. You must give each layer a unique name.

<dynamicImage>
	<templates>
		<add name="Button" imageFormat="Png">
			<layers>
				<add name="Background" type="SoundInTheory.DynamicImage.RectangleShapeLayer"
					backColour="#7D7D7D" roundness="4" />
				<add name="Text" type="SoundInTheory.DynamicImage.TextLayer"
					font-Names="Franklin Gothic Medium" font-Size="10.5" foreColour="White"
					textAlignment="MiddleCenter" height="21" padding-left="15" padding-right="15" />
			</layers>
		</add>
	</templates>
</dynamicImage>

Step 2

Add one or more DynamicImage controls to the relevant pages on your website. In this example, we'll add two DynamicImage controls to the same page to keep things simple.

Set the TemplateName property to "Button" to use the template we've just defined in web.config.

Note that you can override properties of any of the layers included in your template, but you cannot add new layers.

<sitdap:DynamicImage runat="server" TemplateName="Button">
	<Layers>
		<sitdap:TextLayer Name="Text" Text="Hello World 1" />
	</Layers>
</sitdap:DynamicImage>

<sitdap:DynamicImage runat="server" TemplateName="Button">
	<Layers>
		<sitdap:TextLayer Name="Text" Text="Hello World 2" />
	</Layers>
</sitdap:DynamicImage>

This results in an output like this:

Step 3

Now that we've got everything setup, let's change the template and watch all the buttons which use this template change. For example, in the template in web.config, change the background colour of the RectangleShapeLayer and the foreground colour of the TextLayer. Without changing anything else, the page output now looks like this: