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.

General Questions

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

Adding alt tag info and resizing custom ImageFields


Reply

7 Posts   3846 Views

Avatar
Happysadhu

29 July 2009 at 4:47am Community Member, 33 Posts

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

Avatar
Double-A-Ron

29 July 2009 at 8:22am (Last edited: 29 July 2009 8:27am), Community Member, 604 Posts

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

Avatar
Happysadhu

29 July 2009 at 8:51am Community Member, 33 Posts

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

Avatar
Happysadhu

29 July 2009 at 9:22am Community Member, 33 Posts

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

Avatar
martimiz

1 August 2009 at 1:39am Forum Moderator, 1095 Posts

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>

Avatar
Happysadhu

2 August 2009 at 2:19pm (Last edited: 2 August 2009 2:26pm), Community Member, 33 Posts

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

Avatar
martimiz

2 August 2009 at 8:21pm Forum Moderator, 1095 Posts

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