Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We're retiring the forums!

The SilverStripe forums have passed their heyday. They'll stick around, but will be read only. We'd encourage you to get involved in the community via the following channels instead:

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, Ed, biapar, Willr, Ingo, swaiba

Different Image Templates...


Go to End


2 Posts   1005 Views

Avatar
MarkAB

Community Member, 30 Posts

21 August 2010 at 1:42am

Edited: 21/08/2010 1:44am

Hi,

I am currently working on a site for a Thai Kickboxing academy, I have included sections/pages for Coaches, Fighters & Students. On each of these pages I have an image of the person & a text description using the "Adding a Staff section" tutorial.

What I'd now like to do is to have a gold coloured border around the images of the coaches, a silver coloured border around the images of the fighters & a bronze coloured border around the images of the students. I would like for my client to be able to upload the various images & be able to select which coloured border to apply either with a dropdown or radio button selection method in the admin section.

Does anone have any suggestions on how best to achieve this please?

Avatar
3dgoo

Community Member, 135 Posts

3 September 2010 at 7:54pm

What I would do is in the Staff Object have a person type property

public static $db = array(
	'Type' => "Enum('none, Coach, Fighter, Student')"
);

function getCMSFields() {
	$fields = parent::getCMSFields();

	$fields->addFieldToTab('Root.Content.Main', new DropdownField('Type', 'Type', singleton('PageNameHereLikeStaffPage')->dbObject('Type')->enumValues()));

	return $fields;
}

Then in the template you could have:

<img class="fighterImage $Type" src="$Image.URL" alt="$Title" />

In the css:

img.fighterImage.Coach {
	border: 2px solid #colour;
}
img.fighterImage.Fighter {
	border: 2px solid #colour;
}
img.fighterImage.Student {
	border: 2px solid #colour;
}