Jump to:

23453 Posts in 18902 Topics by 2877 members

General Questions

SilverStripe Forums » General Questions » Adding alt tag info and resizing custom ImageFields

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: 3793 Views
  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Adding alt tag info and resizing custom ImageFields Link to this post

    Hello,
    I would like to be able to both specify alt tags, for accessibility reasons, and resize my custom ImageFields.

    I know that I could do the following in my StaffHolder.ss template for adding unique alt tags:
    <% control AllChildren %>
    <li>
    <div class="staffname"><h3>$Title</h3><</div>
    <div class="staffphoto"><img src="$Photo.URL" alt="$AltText" /></div>
    <div class="staffdescription">$Content</div>
    </li>
    <% end_control %>

    Defining $Photo and $AltText in StaffPage.php as:

    <?php
    class StaffPage extends Page {
    static $db = array(
    'AltText' => 'Text'
    );
    static $has_one = array(
    'Photo' => 'Image'
    );

    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab("Root.Content.Images", new ImageField('Photo'));
    $fields->addFieldToTab("Root.Content.Images", new TextField("AltText"));
    return $fields;
    }

    But how would I also set a proportional width in the ss file (in this case, 150 pixels wide)?
    I am aware of this function: $Photo.SetWidth(150) -- but not how to combine the various imagefields functions.

    In other words, how can I both set the width and add unique alt tags to my custom image fields in my templates?

    Thanks,
    Sam

  • Double-A-Ron
    Avatar
    Community Member
    604 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Try:

    <% control AllChildren %>
    <li>
    <div class="staffname"><h3>$Title</h3><</div>
    <% control Photo.SetWidth(150) %>
    <div class="staffphoto"><img src="$URL" alt="$Top.AltText" /></div>
    <% end_control %>
    <div class="staffdescription">$Content</div>
    </li>
    <% end_control %>

    http://doc.silverstripe.org/doku.php?id=built-in-page-controls - about 3/4 of the way down.

    Cheers
    Aaron

  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Hi,
    Thanks for your quick response!

    Following your code, I get the image to output at the specified width of 150 pixels, but no AltText?
    I've tried both <img src="$URL" alt="$Top.AltText" /> and "img src="$URL" alt="$AltText" />.
    No Luck either way. Any more ideas?

    Sam

  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Hi again,
    As a test, I replaced $Top.AltText with $Top.Title as in <img src="$URL" alt="$Top.Title" />

    <% control AllChildren %>
    <li>
    <div class="staffname"><h3>$Title</h3></div>
          <% control Photo.SetWidth(150) %>
          <div class="staffphoto"><img src="$URL" alt="$Top.Title" /></div>
          <% end_control %>
          <div class="staffdescription">$Content</div>
    </li>
    <% end_control %>

    What was outputted was not the title of each child page (each Staff Page) - as it does with <div class="staffname"><h3>$Title</h3></div> - but the title of the Staffholder page. The Staffholder page has no alt text. So maybe that's why $Top.AltText within the control loop is not working (i.e. empty)? Perhaps the function $Top completely breaks out of the loop to get the variable defined -- in this case, both the <% control AllChildren %> loop and the nested <% control Photo.SetWidth(150) %> loop?

    Looking forward to more suggestions,
    Sam

  • martimiz
    Avatar
    Forum Moderator
    1078 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Hi Sam,
    I was looking for the same thing. Don't know if you've found a solution yet, but this slight change seems to be workings:

    <div class="staffname"><h3>$Title</h3></div>
    <div class="staffphoto">
    <img src="<% control Photo.SetWidth(150) %>$URL<% end_control %>" alt="$Title" />
    </div>
    <div class="staffdescription">$Content</div>

  • Happysadhu
    Avatar
    Community Member
    33 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Hi,
    I'll have to give your suggestion a try - eloquently simple.

    My solution is a little more involved.

    First I added a Page_Photo array and then a function at the bottom of my staffpage.php which defines Page_Photo after the Page_Controller. (Page_Photo is an arbitrary name, you can put what you want.)
    ....
    static $has_one = array(
    'Photo' => 'Page_Photo'
    );
    }

    class StaffPage_Controller extends Page_Controller {
    }

    class Page_Photo extends Image {
    function generateSmallImage($gd) {
    $gd->setQuality(100);
    return $gd->resizeByWidth(150);
    }
    }
    ?>

    In my StaffHolder.ss template I added the following:

    <% control AllChildren %>
    <li>
    <div class="staffname"><h3>$Title</h3></div>
          <div class="staffphoto"><img src="$Photo.SmallImage.URL" title="$TitleText" alt="$AltText" /></div>
          <div class="staffdescription">$Content</div>
    </li>
    <% end_control %>

    If I wanted I could have added more functions to the php file like:

    function generateLargeImage($gd) {
    return $gd->resizeByWidth(300);
    }

    So, that I could have the option of doing this in my ss template file <div class="staffphoto"><img src="$Photo.LargeImage.URL" title="$TitleText" alt="$AltText" /></div>

    I figured this out largely from the following recipe:
    http://doc.silverstripe.com/doku.php?id=recipes:customising_image
    This document gives you some image manipulation functions
    http://doc.silverstripe.org/doku.php?id=image

    I found the following comment added at the bottom of http://doc.silverstripe.com/doku.php?id=gd interesting:
    Blue Skies writes "In combining some functions I had the problem that doing it the "one $gd per line" way resulted in some functions not working or some functions overriding effects of previous functions.

    As it turns out: some functions do create a new instance, others don't. So you have to chain certain functions to get the desired effect. For example, to use a resize, turn to greyscale and a set quality in one function, use:"

    public function generateLogoGrey($gd) {
    $gd = $gd->PaddedResize(70, 30)->greyscale();
    $gd->setQuality(100);
    return $gd;
    }

    The main advantage of creating a image class function, as above, is that you can combine several functions. However, regarding my original post, where I simply wanted to resize the image and have custom alt and title tags the solution suggested in the above post looks much easier to implement.

    Sam Miller

    ----------
    My complete StaffPage.php looks like:

    <?php
    class StaffPage extends Page {
    static $db = array(
    'AltText' => 'Varchar(50)',
    'TitleText' => 'Varchar(50)'
    );
    static $has_one = array(
    'Photo' => 'Page_Photo'

    );

    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab("Root.Content.Images", new ImageField('Photo'));
    $fields->addFieldToTab("Root.Content.Images", new TextField("TitleText"));
    $fields->addFieldToTab("Root.Content.Images", new TextField("AltText"));
    // $fields->removeByName("Sidebar");
    $fields->removeFieldFromTab("Root","Sidebar");
    return $fields;
    }

    static $defaults = array(
    'ShowInMenus' => false
    );
    static $allowed_children = array('none');
    }

    class StaffPage_Controller extends Page_Controller {

    }

    class Page_Photo extends Image {

    function generateSmallImage($gd) {
    $gd->setQuality(100);
    return $gd->resizeByWidth(150);
    }
    }
    ?>

  • martimiz
    Avatar
    Forum Moderator
    1078 Posts

    Re: Adding alt tag info and resizing custom ImageFields Link to this post

    Hi Sam,
    I confess I took a long (though slightly different) road too at first - didn't see what was right in front of me I just really wanted to keep resizing out of the code - or the CMS..

    3793 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.