I created a page then put a folder in that page then put a gallery in that folder....is that correct, if so can you tell me exactly where the css code goes (is it in the gallery or folder)
Lamah, where is the maximum vertical height/depth of the tiles defined, and how can I make all tiles display in their maximum size irrespective of whether there is sufficient title/caption to fill the available space?
However, if you want each complete block to end up the same size, it's currently pretty awkward due to the difference in photo heights. I think you would have to constrain each photo to be the same height. This would cause panoramic photos to have their left and right edges cropped off to fit (much like SmugMug's default thumbnails). Replace the code with:
However, if you want each complete block to end up the same size, ... Replace the code with ... That looks pretty tidy, now!
Thanks Nicholas, I went with this option - with a couple of minor changes for tile-to-tile spacing (16px > 6px, to be consistent with my thumb spacing in other galleries and to save real estate) and title bottom margin (0.5em -> 0.0em). I think this option gives the best look overall, and doesn't compromise the image thumbnails significantly - even possibly improving them.
However, when I page down a couple of brower pages (I have a 30" screen, YMMV) there is an aberration whereby all the tiles are still not sizing to maximum size. I can't see what is different about the images, titles or captions for these posts that might be causing this. Do you have any idea what's happening? If I could solve this, I'd be sweet!
I'm finding I can progressively remove more and more of this problem by expanding the content area (reducing the padding) and ensuring my titles don't force a line break. Reducing the title font size is part of the answer. I'm nearly there - your intervention may not be required!
I've just managed to restyle using an adaptation of your CSS all of my folder pages. I'm still testing, but very happy.
Currently you've got the "read more..." text outside of the link, so it isn't clickable. Try changing the "Info style" to "over" in the display settings for the gallery block. That should shuffle around the code a bit in order to include the "read more" text in the link to the gallery.
Unfortunately the gallery description isn't available to be displayed in folder/gallery blocks.
Currently you've got the "read more..." text outside of the link, so it isn't clickable. Try changing the "Info style" to "over" in the display settings for the gallery block. That should shuffle around the code a bit in order to include the "read more" text in the link to the gallery.
Unfortunately the gallery description isn't available to be displayed in folder/gallery blocks.
I see what you mean. I think it's because I'm using the styles in a way that is different to yours - so I don't have "over", but rather under and covering, neither which look too good. For the moment I'm removing the "read more/see more".
w: Reheat Images Torn between cycling and photography!
I see what you mean. I think it's because I'm using the styles in a way that is different to yours - so I don't have "over", but rather under and covering, neither which look too good. For the moment I'm removing the "read more/see more".
Ah, it was actually due to the fact that the original design added "see more" to the caption, whereas galleries only have titles, never captions.
Thanks, but most of the credit goes to Nicholas. I'm using his code with some minor tweaks, but also formatting my titles and captions in a consistent manner (and with a lot of retrospective changes ongoing).
It's fairly straightforward really - no tricks! Titles of posts use the image title box. All captions follow a precise and consistent format. The exact image caption for the most recent (as of this moment) post is as follows:
To create a new image caption, I copy and paste the caption coding from the previous day's post, and then modify the date and the text content while leaving the exact layout of all parts of the caption code unchanged. The locations and numbers of HTML-type breaks (i.e. <br>) and the actual line breaks embedded in the caption code itself are vital to get the desired layout, but you can alter this to suit yourself.
It's fairly straightforward really - no tricks! Titles of posts use the image title box. All captions follow a precise and consistent format. The exact image caption for the most recent (as of this moment) post is as follows:
To create a new image caption, I copy and paste the caption coding from the previous day's post, and then modify the date and the text content while leaving the exact layout of all parts of the caption code unchanged. The locations and numbers of HTML-type breaks (i.e. <br>) and the actual line breaks embedded in the caption code itself are vital to get the desired layout, but you can alter this to suit yourself.
I'll be interested to see your finished result!
Thank you for your prompt response . Suddenly its starts working fine once I replace white-space: normal; to white-space:pre-wrap;
It seems the p class used twice by mistake and eventually I see for my case <br> tag is not reqd and only a keyboard new line would enough <img src="https://us.v-cdn.net/6029383/emoji/mwink.gif" border="0" alt="" >
It's fairly straightforward really - no tricks! Titles of posts use the image title box. All captions follow a precise and consistent format. The exact image caption for the most recent (as of this moment) post is as follows:
To create a new image caption, I copy and paste the caption coding from the previous day's post, and then modify the date and the text content while leaving the exact layout of all parts of the caption code unchanged. The locations and numbers of HTML-type breaks (i.e. <br>) and the actual line breaks embedded in the caption code itself are vital to get the desired layout, but you can alter this to suit yourself.
I'll be interested to see your finished result!
I got to say if I were to use smugmug to do my blog post this would be the way to go. I don't find myself steering away from using blogger though. You and Nicholas are doing amazing job on the customization for your blog. Nicholas is so knowledgable when it comes to smugmug customization thank you for everything you do for us Nicholas!
Currently my site is locked out due to major change and its almost end phase of launch Wish I could but definitely I will soon ! thanks for your help btw,..
I was happy to help, but reiterate the credit due to Lamah. When you are good and ready, post a link here!
I got to say if I were to use smugmug to do my blog post this would be the way to go. I don't find myself steering away from using blogger though.
I don't want this thread to deviate off into yet another SmugMug vs. Blogger debate, but using SmugMug (as I have done for over six years) is a no-brainer for me!
I don't want this thread to deviate off into yet another SmugMug vs. Blogger debate, but using SmugMug (as I have done for over six years) is a no-brainer for me!
I love your blog page! Giving me big ideas, it is.
In viewing it though, I see maybe a glitch. Did you intend this one image to be bigger than the others on the row?
It's the only one that is on the page.
I take it back, I don't know if that's the only one on the page because your blog appears to be endless.
I did spot one other lower down.
Is the issue that the title wraps to a 2nd line?
I take it back, I don't know if that's the only one on the page because your blog appears to be endless.
I did spot one other lower down. Is the issue that the title wraps to a 2nd line?
Yes , that's the problem. I hadn't picked that one up but now fixed - thanks!
If you go back far enough, there are captions that I have not had time to reformat from the format I was using previously, but I'm working through them over time.
I just want to say this is really awesome code.
It even works with videos.
I don't have a blog, but it seems to me this code can replace any of the default gallery layouts. It is a distinct gallery layout in its own right. In fact if you set the image to be 80-100% of the container width, you've got a kind of journal style. 3 questions:
- what is the code to change the background of the "Read more" bit? I tried changing every type of color and nothing would change it (image attached).
- Is there code to center the photos overall? In this case I have the container set to 80% for one photo per row, and it is on the left margin of the gallery. (If it was set to 50%, 2 photos can appear on a row). I have the Layout set to fixed and 960, and Center on, but it's not affecting this.
- Is there a maximum height to the caption content? I set it to 300em and then 700em just as a test, in this part of the code, but my very long test captions are not populating to visible.
It's fairly straightforward really - no tricks! Titles of posts use the image title box. All captions follow a precise and consistent format. The exact image caption for the most recent (as of this moment) post is as follows:
To create a new image caption, I copy and paste the caption coding from the previous day's post, and then modify the date and the text content while leaving the exact layout of all parts of the caption code unchanged. The locations and numbers of HTML-type breaks (i.e. <br>) and the actual line breaks embedded in the caption code itself are vital to get the desired layout, but you can alter this to suit yourself.
I'll be interested to see your finished result!
First off - this is exactly what I was looking for to do a Photo 365 Project.
Thanks to Nicholas and DubDubDub!
I have executed the code and everything seems to be working fine.
My only issue is I am not understanding the photo "Title" concept.
I created a folder and one gallery, and loaded my photos in that gallery in that folder.
I added a caption to each photo in the gallery. using the "tool" icon.
The caption shows up on my page just fine but I don't see where i add a "Title" to each photo.
Can you help me sort this out, please?
I was happy to help, but reiterate the credit due to Lamah. When you are good and ready, post a link here!
Oh I !00% agree and if I didnt already have a following on my blog Id switch over in a heart beat. I was just commenting on how wonderful everything looks I have no intention to start a debate.
Nicholas's example gallery link in post 12 breaks, and I don't see the Blog code on his Customizations site. I know there were several updates along the way. Is the final code posted somewhere?
I seem to have gotten around the Lightbox problem by displaying the gallery in Journal style. However, the problem with that is of course that the caption and keyword then appear in the gallery. And I don't want them to. Is there anyway to hide the caption in the gallery (or blogpost) itself, but keep it for display on the main blog page?
Lamah I've used some of your customizations before and they are always great. This Blog style is what I would like to convert mine to. I guess its started but I like the way the images is showing plus a small bit of text underneat. In attempting to begin your first directions are change the gallery style to thumbnails and that doesn't seem to be possible on my page. http://www.connieandersonphotography.com/Blog I'm sure its something simple I'm missing. Also do you have those directions on your customization site that are all together yet?
This customisation requires your blog posts to be photos, not pages. This is because in New SmugMug, the only way to include a blurb of text for each link is to have it in the title or caption of a photo (in Old SmugMug, links to galleries would also show a gallery description, but they don't any more).
What you're asking for would be possible, but would require a second server to list your blog post pages as a Feeds content block. Maybe I'll see if I can knock something together to support that.
Comments
http://n-sherlock.smugmug.com/Customisations/Blog-grid
I'm very interested in this but your link says page not found
Thanks
.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-caption { max-height: 9em; ...To fix the height, change that to:
.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-caption { height: 9em !important; ...However, if you want each complete block to end up the same size, it's currently pretty awkward due to the difference in photo heights. I think you would have to constrain each photo to be the same height. This would cause panoramic photos to have their left and right edges cropped off to fit (much like SmugMug's default thumbnails). Replace the code with:
.sm-gallery .sm-tiles-grid .sm-tile-wrapper { max-width:none; } .sm-gallery .sm-tiles-grid .sm-tile { margin:0 0 16px 16px; /* Adjusts spacing between posts */ background-color:white; padding:18px; /* Adjust padding of blog post block */ box-sizing: border-box; overflow:hidden; } .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-info, .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-content, .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-title { background:transparent; color:#222; padding:0 !important; box-sizing: border-box; } .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-info { position:static; opacity:1; padding:0; } .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-title { margin-top:0.5em; margin-bottom:0.5em; font-size:200%; } .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-caption { height: 9em !important; overflow: hidden; line-height: 1.5em; position:relative; } .sm-gallery .sm-tile .sm-tile-caption:after { background-color: white; padding-left:4em; display:block; position:absolute; bottom:0; right:0; color:#FF2050; content:"Read more »"; background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 25%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,1))); background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%); background: -o-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%); background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%); background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 ); } .sm-gallery .sm-tiles-grid .sm-tile .sm-tile-info p { white-space:pre-wrap; height:auto; } .sm-gallery .sm-tiles-grid .sm-tile .sm-image { height:220px; /* Set the height of thumbnails */ position:relative; margin-bottom:0.5em; min-width: 100%; } /* Make thumbs larger by forcing fewer columns to appear */ .sm-tiles-grid.sm-tiles-col-10 .sm-tile-wrapper { width:12.5%; } .sm-tiles-grid.sm-tiles-col-9 .sm-tile-wrapper { width:14.28%; } .sm-tiles-grid.sm-tiles-col-8 .sm-tile-wrapper { width:16.66%; } .sm-tiles-grid.sm-tiles-col-7 .sm-tile-wrapper { width:20%; } .sm-tiles-grid.sm-tiles-col-6 .sm-tile-wrapper { width:25%; } .sm-tiles-grid.sm-tiles-col-5 .sm-tile-wrapper { width:33.33%; } .sm-tiles-grid.sm-tiles-col-4 .sm-tile-wrapper { width:33.33%; } .sm-tiles-grid.sm-tiles-col-3 .sm-tile-wrapper { width:50%; } .sm-tiles-grid.sm-tiles-col-2 .sm-tile-wrapper { width:100%; } .sm-tiles-grid.sm-tiles-col-1 .sm-tile-wrapper { width:100%; } /* Change limit-width into limit-height behaviour */ .sm-tiles-center-image .sm-tile-limit-width { top: 0; left: 50%; max-width: none; -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -o-transform: translate(-50%,0); -webkit-transform: translate(-50%,0); transform: translate(-50%,0); }That looks pretty tidy, now!
Please check out my gallery of customisations for the New SmugMug, more to come!
However, when I page down a couple of brower pages (I have a 30" screen, YMMV) there is an aberration whereby all the tiles are still not sizing to maximum size. I can't see what is different about the images, titles or captions for these posts that might be causing this. Do you have any idea what's happening? If I could solve this, I'd be sweet!
I've just managed to restyle using an adaptation of your CSS all of my folder pages. I'm still testing, but very happy.
By the way, is it possible to have the gallery description display in the folder/pages view?
Torn between cycling and photography!
Currently you've got the "read more..." text outside of the link, so it isn't clickable. Try changing the "Info style" to "over" in the display settings for the gallery block. That should shuffle around the code a bit in order to include the "read more" text in the link to the gallery.
Unfortunately the gallery description isn't available to be displayed in folder/gallery blocks.
Please check out my gallery of customisations for the New SmugMug, more to come!
I see what you mean. I think it's because I'm using the styles in a way that is different to yours - so I don't have "over", but rather under and covering, neither which look too good. For the moment I'm removing the "read more/see more".
Torn between cycling and photography!
Ah, it was actually due to the fact that the original design added "see more" to the caption, whereas galleries only have titles, never captions.
If you replace this bit of CSS:
.sm-tiles-list .sm-tile .sm-tile-title { margin-bottom: .5em; font-size: 200% } .sm-tiles-list .sm-tile .sm-tile-caption { max-height: 9em; overflow: hidden; line-height: 1.5em; position: relative } .sm-tiles-list .sm-tile .sm-tile-caption:after { font-size: 14px; padding-left: 4em; display: block; position: absolute; bottom: 0; right: 8px; color: #FF2050; content: "Read more..."; }With:
.sm-tiles-list .sm-tile .sm-tile-title { font-size: 200%; height: 70px !important; position: relative } .sm-tiles-list .sm-tile .sm-tile-title a:after { font-size: 14px; display: block; position: absolute; bottom: 0; right: 8px; color: #FF2050; content: "Read more..."; }It'll add a clickable "read more" back in for you. You can tune that "height:70px" to tune the height of the "read more".
Please check out my gallery of customisations for the New SmugMug, more to come!
I acknowledge that the actual code and idea for this blog view provided by Lamah but would appreciate if you tell me how you make the "Posted on <date>" and copyright line "© 2013 Ross Collins" in newline in blog info style section . I tried all CSS codes and nothing help me to make this in new line .
What you used in title and caption for the images ? Only line break or any html tag ?
Probably it would be worth if you share the final CSS you used.
Many thanks
It's fairly straightforward really - no tricks! Titles of posts use the image title box. All captions follow a precise and consistent format. The exact image caption for the most recent (as of this moment) post is as follows:
To create a new image caption, I copy and paste the caption coding from the previous day's post, and then modify the date and the text content while leaving the exact layout of all parts of the caption code unchanged. The locations and numbers of HTML-type breaks (i.e. <br>) and the actual line breaks embedded in the caption code itself are vital to get the desired layout, but you can alter this to suit yourself.
I'll be interested to see your finished result!
Thank you for your prompt response . Suddenly its starts working fine once I replace white-space: normal; to white-space:pre-wrap;
It seems the p class used twice by mistake and eventually I see for my case <br> tag is not reqd and only a keyboard new line would enough <img src="https://us.v-cdn.net/6029383/emoji/mwink.gif" border="0" alt="" >
Currently my site is locked out due to major change and its almost end phase of launch <img src="https://us.v-cdn.net/6029383/emoji/wings.gif" border="0" alt="" > Wish I could but definitely I will soon ! thanks for your help btw,..<img src="https://us.v-cdn.net/6029383/emoji/thumb.gif" border="0" alt="" >
I got to say if I were to use smugmug to do my blog post this would be the way to go. I don't find myself steering away from using blogger though. You and Nicholas are doing amazing job on the customization for your blog. Nicholas is so knowledgable when it comes to smugmug customization thank you for everything you do for us Nicholas!
http://www.k-ophotography.com/
I love your blog page! Giving me big ideas, it is.
In viewing it though, I see maybe a glitch. Did you intend this one image to be bigger than the others on the row?
It's the only one that is on the page.
I did spot one other lower down.
Is the issue that the title wraps to a 2nd line?
If you go back far enough, there are captions that I have not had time to reformat from the format I was using previously, but I'm working through them over time.
It even works with videos.
I don't have a blog, but it seems to me this code can replace any of the default gallery layouts. It is a distinct gallery layout in its own right. In fact if you set the image to be 80-100% of the container width, you've got a kind of journal style. 3 questions:
- what is the code to change the background of the "Read more" bit? I tried changing every type of color and nothing would change it (image attached).
- Is there code to center the photos overall? In this case I have the container set to 80% for one photo per row, and it is on the left margin of the gallery. (If it was set to 50%, 2 photos can appear on a row). I have the Layout set to fixed and 960, and Center on, but it's not affecting this.
- Is there a maximum height to the caption content? I set it to 300em and then 700em just as a test, in this part of the code, but my very long test captions are not populating to visible.
Thanks.
Please check out my gallery of customisations for the New SmugMug, more to come!
First off - this is exactly what I was looking for to do a Photo 365 Project.
Thanks to Nicholas and DubDubDub!
I have executed the code and everything seems to be working fine.
My only issue is I am not understanding the photo "Title" concept.
I created a folder and one gallery, and loaded my photos in that gallery in that folder.
I added a caption to each photo in the gallery. using the "tool" icon.
The caption shows up on my page just fine but I don't see where i add a "Title" to each photo.
Can you help me sort this out, please?
thanks
- Clayton
http://www.claytontaylorphotography.com/PROJECT365/PROJECT-365-2014
Oh I !00% agree and if I didnt already have a following on my blog Id switch over in a heart beat. I was just commenting on how wonderful everything looks I have no intention to start a debate.
http://www.k-ophotography.com/
I seem to have gotten around the Lightbox problem by displaying the gallery in Journal style. However, the problem with that is of course that the caption and keyword then appear in the gallery. And I don't want them to. Is there anyway to hide the caption in the gallery (or blogpost) itself, but keep it for display on the main blog page?
Thanks so much!
Thanks so much!
What you're asking for would be possible, but would require a second server to list your blog post pages as a Feeds content block. Maybe I'll see if I can knock something together to support that.
Please check out my gallery of customisations for the New SmugMug, more to come!