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

Defaulting images to a certian width


Go to End
Reply


10 Posts   1815 Views

Avatar
AdamJ

Community Member, 145 Posts

1 January 2009 at 9:01pm

Hey guys,

Im part way through developing my first site on Silverstripe for a client, all the content is in, just needing to get some images in there. There was a delay on getting the images, so I've just started throwing them in now.

These images are coming in all shapes and sizes, as you'd expect, but is there any way to default the images to a certain size when placing them into an article? Sure I can resize them all in a batch action in Photoshop, but my client will upload some of his own images at some point, and what then? If I can somehow set that all images would be inserted with a default with of 250px, that would make it easier for my client, and also make the design remain as I intended it to be!

I'd also love to see caption's for these images, but I see that it has been [url=http://open.silverstripe.com/ticket/2937]ticketed already created[/url] and is slated to be included in 2.3.0 stable.

Any ideas on a default width for images?

Avatar
UncleCheese

Forum Moderator, 4096 Posts

2 January 2009 at 8:11am

There are a number of ways to do this.

The easiest way is on your template, do this:

<% control MyPhoto %>
<% control CroppedImage(250,250) %>
<img src ="$URL" alt="" />
<% end_control %>
<% end_control %>

Another, more slick way is to extend your image class

<?php

class SpecialPhoto extends Image
{
function generateSpecialThumbnail($gd)
{
$gd->setQuality(100);
return $gd->croppedResize(250,250);
}
}
?>

Now, as long as you've set up a relationship with SpecialPhoto instead of Image, you should be able to do this on your template:

<img src="$MyPhoto.SpecialThumbnail.URL" alt="" />

The coolest part about this is that you can change those dimensions any time you want, because the original image is always kept. There's a lot of documentation on the GD library. You can look there for more examples.

Avatar
AdamJ

Community Member, 145 Posts

2 January 2009 at 1:30pm

Does that limit me to one image per page though?

Avatar
Carbon Crayon

Community Member, 598 Posts

3 January 2009 at 3:22am

Edited: 03/01/2009 3:26am

Hi Adam

no, it doesnt limit you to 1 photo, it works the same as with any other image. So in your page model you would have:

static $has_one= array(
'Image1' => 'SpecialPhoto',
'Image2' => 'SpecialPhoto',
'Image3' => 'SpecialPhoto'
);


and then in your template you can use:

<img src="$Image1.SpecialThumbnail.URL" alt="" >
<img src="$Image2.SpecialThumbnail.URL" alt="" >
<img src="$Image3.SpecialThumbnail.URL" alt="" >

this way you could have a number of different functions in your SpecailPhoto class which return different sized thumnails for example. So if i had a function in there called Special_Bigger_Thumbnail I could use <img src="$Image3.Special_Bigger_Thumbnail.URL" alt="" > and because I have defined the Image as a 'SpecialPhoto' in the $has_one array SS knows to look in that class for the function.

Avatar
UncleCheese

Forum Moderator, 4096 Posts

3 January 2009 at 4:01am

Edited: 03/01/2009 4:01am

Or if you want a true 1-M relation..

static $has_many = array ('Photos' => 'SpecialPhoto')

and on your template:

<% control Photos %>
<img src="$SpecialThumbnail.URL" alt = "" >
<% end_control %>

Avatar
AdamJ

Community Member, 145 Posts

3 January 2009 at 12:40pm

Thanks guys, this stuff looks perfect for my needs, but it doesnt seem to work for me. Will this stuff work when I'm adding the photos via tinyMCE? I thought I mentioned that in my first post, but on a reread I see I didnt...

Avatar
Carbon Crayon

Community Member, 598 Posts

3 January 2009 at 1:29pm

Unfortunately not, as far as I know there really isnt much you can do with the images loaded from tinyMCE beyond resizing them in the window and changing the CSS.

To have really control over the images you will have to have them upload into an ImageField.

Avatar
AdamJ

Community Member, 145 Posts

3 January 2009 at 1:43pm

I saw the tutorial on the wiki for the [url=http://doc.silverstripe.com/doku.php?id=modules:hasmanyfilemanager&s=image]hasmanyfilemanager[/url]. I was about to try to implement that sort of setup, when I realised that they would have to upload the image each time they use it on a page, when some images are used several times across the site. Does anyone know if it is possible to hook into the filesystem to select an image from what has already been uploaded rather than uploading the image each time?

Go to Top