Adding more space between each row of thumbnails
Permalink Browser Info Environment
Hi Nour,
I am new to web-design and css... but have learned a lot making my first site. Touch-Gallery is the most stable, fastest, best looking, most responsive, and easiest to modify gallery I could find. Very impressive. Thank you!
I followed your directions to make a custom template and modified the css to get everything exactly the way I need it, except one issue:
How can I add more space between each row of thumbnails?
I just need a couple extra lines to allow for 3-4 lines of title text.
I already changed the css to allow the title to overflow:
The problem is: the lowest line of title text gets covered up by the thumbnail below it on the next row.
My best guess was to add this "height" line shown bellow, hoping it would make the thumbnail container bigger, but that did not work.
Please let me know if you need a link to my site to see the problem. Thank you so much if you are able to reply!
Peter
I am new to web-design and css... but have learned a lot making my first site. Touch-Gallery is the most stable, fastest, best looking, most responsive, and easiest to modify gallery I could find. Very impressive. Thank you!
I followed your directions to make a custom template and modified the css to get everything exactly the way I need it, except one issue:
How can I add more space between each row of thumbnails?
I just need a couple extra lines to allow for 3-4 lines of title text.
I already changed the css to allow the title to overflow:
overflow: visible; /* pherlein edit: prevent title clipping */ text-overflow: ellipsis; -o-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; padding: 6px 5px; position: absolute; text-align: left; left: 0; top: 100%; margin-top: 0px; width: 100%; height: 100px; /* pherlein edit: extra space for multi line titles */
The problem is: the lowest line of title text gets covered up by the thumbnail below it on the next row.
My best guess was to add this "height" line shown bellow, hoping it would make the thumbnail container bigger, but that did not work.
.touchgallery-thumbs a { display: inline-block; border: 0px solid #FFFFFF; box-shadow: 0 0px 0px rgba(0, 0, 0, 0); border-radius: 0px; position: relative; height: 500px; /* edit pherlein: trying to create more space between each thumb row*/ text-decoration: none; background-position: center center; background-repeat: no-repeat; }
Please let me know if you need a link to my site to see the problem. Thank you so much if you are able to reply!
Peter
| Type: | Discussion |
|---|---|
| Status: | Resolved |
Thank you,
Link to my site where you can see titles going under next row of thumbnails:
http://peterherlein.com/index.php/drawings...
Here is another artist's website I am using for inspiration. The length of her title somehow sets the distance for the next row of thumbnails to begin (she is of course using a different gallery system):
http://www.lachowicz.com/works/...
I saw an early support post where you suggesting creating a file attribute called "long_title". I was able to create that attribute in the concrete5 file manager; but my understanding of coding is limited, and I don't know how to make use of the "$title" variable in my template css... I'm not even sure if that is the proper solution.
Thank you!
Link to my site where you can see titles going under next row of thumbnails:
http://peterherlein.com/index.php/drawings...
Here is another artist's website I am using for inspiration. The length of her title somehow sets the distance for the next row of thumbnails to begin (she is of course using a different gallery system):
http://www.lachowicz.com/works/...
I saw an early support post where you suggesting creating a file attribute called "long_title". I was able to create that attribute in the concrete5 file manager; but my understanding of coding is limited, and I don't know how to make use of the "$title" variable in my template css... I'm not even sure if that is the proper solution.
Thank you!
ok I see what you mean.
The attribute I was talking about was specifically to allow longer texts. As it is the max length of text below the thumbnails is 255 characters.
But even having that longer doesn't solve the placement problem.
Actually to do what you want, you need a custom template with a different markup. I'd be happy to do it for you if you're not too much in a hurry. I could probably have it done say by Monday or Tuesday.
Would that work for you?
The attribute I was talking about was specifically to allow longer texts. As it is the max length of text below the thumbnails is 255 characters.
But even having that longer doesn't solve the placement problem.
Actually to do what you want, you need a custom template with a different markup. I'd be happy to do it for you if you're not too much in a hurry. I could probably have it done say by Monday or Tuesday.
Would that work for you?
Hey Nour,
If you have the time and are able to make a template with a different markup, that would be amazing! Thank you very much. Next Monday or Tuesday works great (I have lots to do prepping images in the mean time). I really appreciate the help.
This is obviously just an early version of the website. I will be adding many more galleries... and hundreds of images. Adding this functionality will really make the site beautiful. Thank you! Hopefully soon I will know how to do this coding myself.
Please let me know if you need anything else from me.
If you have the time and are able to make a template with a different markup, that would be amazing! Thank you very much. Next Monday or Tuesday works great (I have lots to do prepping images in the mean time). I really appreciate the help.
This is obviously just an early version of the website. I will be adding many more galleries... and hundreds of images. Adding this functionality will really make the site beautiful. Thank you! Hopefully soon I will know how to do this coding myself.
Please let me know if you need anything else from me.
ok I'll try to send you that beginning of next week.
One thing I need to know is if the 255 characters limit for captions work for you or if you think you need more.
And one last thing: please be aware that having hundreds of images in one gallery or even on the same page will slow down your page load a lot on first load. See, on first load, the gallery has to create all the thumbnails. After that the images will be in the cache and on subsequent loads, it'll be fast. But then the cache is emptied every 6 hours (Concrete5 default value) and same thing will happen again.
One thing I need to know is if the 255 characters limit for captions work for you or if you think you need more.
And one last thing: please be aware that having hundreds of images in one gallery or even on the same page will slow down your page load a lot on first load. See, on first load, the gallery has to create all the thumbnails. After that the images will be in the cache and on subsequent loads, it'll be fast. But then the cache is emptied every 6 hours (Concrete5 default value) and same thing will happen again.
Great, thank you.
255 characters is works fine... a title will never be longer than that.
That is good to know about how thumbnails load and cache. In that case, I will arrange the site to have more sub-pages, with only one gallery, and smaller numbers of images.
255 characters is works fine... a title will never be longer than that.
That is good to know about how thumbnails load and cache. In that case, I will arrange the site to have more sub-pages, with only one gallery, and smaller numbers of images.
Hey again, sorry it took a day longer than I said.
I am attaching a file to this message, download it and extract it to your site's applications/blocks directory so you end up with the directory applications/blocks/touch_gallery/templates/grid and some files inside that directory
Then go to the page where you have the gallery, put it in edit mode, click on the gallery and from the menu click on Design & Custom template.
From the little toolbar that will appear click on the little cog icon and from the manu that appears, under Custom Template, select the template called Grid.
Click on the little blue save button on the toolbar. Publish your page. And you should be happy with the result.
You might have to modify some styling values, especially argin, padding and font-size.
Check inside the template directory that you created previously, find the css file and modify it. I added comments starting with [styling] everywhere you might want to make a modification.
Let me know if something is not clear.
If you like Touch Gallery and had the time, I'd love it if you could leave a review for it on its marketplace page. THat would be really helpful.
Thank you.
I am attaching a file to this message, download it and extract it to your site's applications/blocks directory so you end up with the directory applications/blocks/touch_gallery/templates/grid and some files inside that directory
Then go to the page where you have the gallery, put it in edit mode, click on the gallery and from the menu click on Design & Custom template.
From the little toolbar that will appear click on the little cog icon and from the manu that appears, under Custom Template, select the template called Grid.
Click on the little blue save button on the toolbar. Publish your page. And you should be happy with the result.
You might have to modify some styling values, especially argin, padding and font-size.
Check inside the template directory that you created previously, find the css file and modify it. I added comments starting with [styling] everywhere you might want to make a modification.
Let me know if something is not clear.
If you like Touch Gallery and had the time, I'd love it if you could leave a review for it on its marketplace page. THat would be really helpful.
Thank you.
Thank you Nour!!! You have gone above and beyond! It will take me a day to give this a try but I will let you know how it goes very shortly. I hope it was of benefit to you as well.
Also, 50 images per gallery will work great.
Also, 50 images per gallery will work great.
This is perfect!!
I experimented with each value in the CSS… this gives me exactly the look and control I needed.
And the spacing between rows automatically resizes as needed when the window scales down… amazing! It would have taken me weeks to figure this out.
It was very helpful to put the template in the “application” folder, as you stated above, since concrete5 replaced the whole Touch-Gallery folder structure inside “packages” when I upgraded to Touch-Gallery 2.0.9
This really presents my work better than I could have imagined. I will definitely leave an excellent review and mention Touch-Gallery to any friend building a site.
If it is okay with you, in the “contact” section of my website, I can link to your site and credit you with website “support / backend”
It will take me a few days to fully test everything, but so far so good. Thank you again so much for taking the time to set this up.
I experimented with each value in the CSS… this gives me exactly the look and control I needed.
And the spacing between rows automatically resizes as needed when the window scales down… amazing! It would have taken me weeks to figure this out.
It was very helpful to put the template in the “application” folder, as you stated above, since concrete5 replaced the whole Touch-Gallery folder structure inside “packages” when I upgraded to Touch-Gallery 2.0.9
This really presents my work better than I could have imagined. I will definitely leave an excellent review and mention Touch-Gallery to any friend building a site.
If it is okay with you, in the “contact” section of my website, I can link to your site and credit you with website “support / backend”
It will take me a few days to fully test everything, but so far so good. Thank you again so much for taking the time to set this up.
I'm very happy to hear that, thank you for letting me know.
I'd be overjoyed and proud if you mentioned me on your website. Believe me, that doesn't happen often to even be offered the opportunity. Thank you so much for thinking of it.
I'd be overjoyed and proud if you mentioned me on your website. Believe me, that doesn't happen often to even be offered the opportunity. Thank you so much for thinking of it.
oh and concerning number of image per gallery, you're probably fine with up to 50.
Thank you for your nice words. Nothing's better than users appreciating my work.
Concerning what you're trying to do I am not convinced more space between rows is what you need but I'm not 100% sure.
A site's address would be very helpful indeed if you could provide me with one.
Thank you