Jump to:

23023 Posts in 11882 Topics by 2830 members

General Questions

SilverStripe Forums » General Questions » Different Image Templates...

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

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

Page: 1
Go to End
Author Topic: 653 Views
  • MarkAB
    Avatar
    Community Member
    30 Posts

    Different Image Templates... Link to this post

    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?

  • ampedup
    Avatar
    Community Member
    133 Posts

    Re: Different Image Templates... Link to this post

    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;
    }

    653 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.