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've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

All other Modules /

Discuss all other Modules here.

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

Linking thumbnail to image?


Go to End


6 Posts   2470 Views

Avatar
_Vince

Community Member, 165 Posts

2 May 2009 at 1:09pm

I am creating a page on the CMS. I have been asked to use a lot of photos and the only way I can display them all in the one screenful is by having thumbnails.

The idea is that the user clicks on the thumbnail and the full-size image is displayed in a lightbox. While it's easy enough to hack the HTML by hand and add the link to the full-size photo, I can't find any way that an ordinary user with no previous HTML experience could do it.

Another problem is that the files get renamed when the CMS uploads them to the assets/ directory, so really, I am asking this "ordinary user with no HTML experience" to link an image with an unknown name to another image with an unknown name. They're not going to like that at all! :P

I know about the gallery module and the image gallery module, but they seem to display a group of images in a block whereas I want to have the thumbnails interspersed with the text.

Is there any user friendly way to do this?

Thanks in advance,
Vince.

Avatar
Howard

Community Member, 215 Posts

2 May 2009 at 2:02pm

Hmmm tricky - one approach which might not be totally suitable but it might spark a better idea:

If you can to limit it to say 10 images, you could add a tab on each page where they can upload image 1,2,3 ... etc then in the editor they could include a $Photo1 tag. Then on rendering you could search for each tag ie. $Photo2 and render the HTML based on the image associated with Photo 2 in the photo upload tab.
You could do something similar to what is below (put this in the controller for Page.php)
You would have to use the Photo1 function to pull the first photo from the current page.

function Content() {
  return str_replace('$Photo1', $this->Photo1(), $this->Content);
}
// see the $this->Photo1() string up 2 lines? well that calls the Photo1() method below
function Photo1() {
  return "This could be HTML/Text/Images or PHP";
}

Hope this sparks an idea.

Avatar
_Vince

Community Member, 165 Posts

2 May 2009 at 2:51pm

Umm... yeah... that sounds like the way to go. A start anyway.

I guess that if you know which photo goes with what you're well on your way.

Cheers! I'll tinker with your suggestion and see what I can do. :)

Avatar
patjnr

Community Member, 102 Posts

29 November 2009 at 12:45am

extend the image class and then use gd functions to resize them. the images can be in 1 (one) folder in assets

Avatar
_Vince

Community Member, 165 Posts

30 November 2009 at 3:29pm

I'll have to look into that, thanks for the suggestion.

My main problem so far has been that if the users resize the image within the CMS, then I have no way of knowing what the file is called as SS adds the dimensions to the filename.

I could parse the IMG tag and add all the code for the lightbox, but knowing what target image to point to was the problem.

Your idea sounds interesting.

Avatar
patjnr

Community Member, 102 Posts

30 November 2009 at 8:14pm

If you get it right please let me know as im also interested in the solution.

i gave up trying to manipulate images inside the content area.
Please help me understand, you talked about the gallery module and with the gallery module you images wont be inside the content area. you actually specify the folder to be used by that gallery.

if the above is true then i can help you with the code.

tx

P