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

Working Gallery Plugin for SS 3


Go to End


106 Posts   30343 Views

Avatar
Optic Blaze

Community Member, 190 Posts

18 February 2013 at 9:23pm

Edited: 18/02/2013 9:29pm

Hi there, maybe you misunderstood. My explanation was relevant because the issue is independent of pretty photo.

The reason why it is showing the name of the file is because when you are calling $Image you are calling the title of the images that SS automatically assigns based on the name the image when uploaded. In SS3 gallery the description field is generated by the GalleryImage class and not Image class. The answer lies in how your controls are being used.

So Try this...based on your code:

<% control getGalleryImages %>
<div style="position:absolute; top:0; left:0; z-index:100000">$Description</div>
<% control Image.SetWidth(928) %> <img src="$Link" <% end_control %> alt="$Description" /> /// Alt tag is outside $Image and now uses the Description of getGalleryImages
<% end_control %>

Avatar
wilsonStaff

Community Member, 143 Posts

20 February 2013 at 2:15am

Hi Optic Blze, that worked. No need then for the <div>. It was a test to see if i could catch the $Description outside the <% control %>

<% control getGalleryImages %>
<% control Image.SetWidth(928) %>
<img src="$Link"
<% end_control %>
alt="$Description" /> /// Alt tag is outside $Image and now uses the Description of getGalleryImages
<% end_control %>

Thanks!

Avatar
shoves

Community Member, 5 Posts

6 March 2013 at 7:51pm

Optic Blaze, thanks for this cool module. I'm new to SS.

I have installed the module long with all the other requirements but all my thumbnails seems to appear below one another with a <li> bullet next to it. How do i get them to display next to one another like you did on the diving site? Also how do i get rid of the bullets?

Appreciate your feedback.

Andre

Avatar
Optic Blaze

Community Member, 190 Posts

7 March 2013 at 8:21am

Sounds like the <li> element is missing the following css property: list-style:none;
You will need to post some code for me to help any further.

Avatar
Nachos

Community Member, 22 Posts

29 April 2013 at 6:35pm

Thank you futureweb and Optic Blaze for your great work!

Optic Blaze, I got your modified gallery working and showing 100x100px thumbnails. However the thumbnail images are stretched and I would like to have them cropped. Can you point me where can I change this? Thanks a lot!

Avatar
Optic Blaze

Community Member, 190 Posts

29 April 2013 at 7:32pm

Hi there,

Try something like what i have below. What it does is that it creates a box of 100px X 100px in the ul li with no overflow...so anything outside that 'container' will be hidden. Then we stretch the image to a percentage greater than the ul li box. We do this because we are not sure if the image uploaded is portrait or landscape. The landscape pics will fit fine, but the portrait ones dont always fit if we dont increase the size of the image proportionally.

I personally prefer to have the ul li set up with a width of say 120px and a height of 100px. I have found that landscape pictures generally work better for me.

______________________________________________________

#ImageGalleryEntries ul li {
list-style:none;
padding:0px;
float:left;
display:block;
width:175px; /* this value is determined by Image.SetWidth in galleryPages.ss */
height:150px;
border:solid medium #F2F2F2;
margin:1px;
overflow:hidden;
}

#ImageGalleryEntries ul li img {
width:125%;
overflow:hidden;
}

Avatar
Nachos

Community Member, 22 Posts

4 May 2013 at 5:42am

It worked!! Thanks a lot!!

In case someone as noob as me wants to try that out: I set the size of the thumbnails to a width of 130px and a height of 111px. I also changed the value in Image.SetWidth (galleryPage.ss) to double size (175px=>350px) in order to get a nice resolution for the thumbnails.

Thanks again, optic blaze!!

Avatar
Nachos

Community Member, 22 Posts

4 May 2013 at 9:18am

Edited: 04/05/2013 9:32am

Sorry to bother again, I have one more question.
I got the feedback that the close button for the gallery is not very visible, so I put a red button into the stripe with photoshop - but I can see no effect. Did I miss something? .png attached!

Edit: Nevermind, it was the cache of the browser - what a genius! :-/
Thank you!

Attached Files
Go to Top