Blog layout

bronking · September 28, 2013

Here's the horrible hack I conjured up:

http://n-sherlock.smugmug.com/Customisations/Blog-grid

I'm very interested in this but your link says page not found

bronking · September 28, 2013

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)

W.W. Webster · October 12, 2013

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?

Thanks

thenickdude · October 12, 2013

Currently the height of the caption is constrained by:

.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!

W.W. Webster · October 12, 2013

Lamah wrote: »

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!

W.W. Webster · October 12, 2013

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!

rht · October 13, 2013

@Lamah: You are quite a legend!

clap

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?

thenickdude · October 13, 2013

rht wrote: »

@Lamah: You are quite a legend! clap

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.

rht · October 13, 2013

Lamah wrote: »

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".

thenickdude · October 13, 2013

rht wrote: »

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.

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".

mountaindew · November 13, 2013

W.W. Webster wrote: »

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).

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

W.W. Webster · November 13, 2013

mountaindew wrote: »

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.

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:

Posted on 13 November 2013
<br><br>
Celebrity Solstice, the seventh of seventy-six cruise ship arrivals expected in Wellington this summer, was entering Wellington Harbour as I was walking along Seatoun Beach this morning. 
<br><br>© 2013 Ross Collins

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. ) 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!

mountaindew · November 13, 2013

W.W. Webster wrote: »
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:
Posted on 13 November 2013
 
Celebrity Solstice, the seventh of seventy-six cruise ship arrivals expected in Wellington this summer, was entering Wellington Harbour as I was walking along Seatoun Beach this morning. 
 © 2013 Ross Collins
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. ) 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 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="" >

ko04 · November 13, 2013

W.W. Webster wrote: »
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:
Posted on 13 November 2013
 
Celebrity Solstice, the seventh of seventy-six cruise ship arrivals expected in Wellington this summer, was entering Wellington Harbour as I was walking along Seatoun Beach this morning. 
 © 2013 Ross Collins
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. ) 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!

W.W. Webster · November 13, 2013

mountaindew wrote: »

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!

W.W. Webster · November 13, 2013

ko04 wrote: »

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!

ChancyRat · November 13, 2013

W.W. Webster wrote: »

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.

ChancyRat · November 13, 2013

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?

W.W. Webster · November 13, 2013

ChancyRat wrote: »

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.

ChancyRat · November 19, 2013

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.

}
.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-caption {
max-height: 300em;
overflow: hidden;
line-height: 1.0em;
position:relative;

Thanks.

thenickdude · November 19, 2013

Dunno, let me know when you unveil.

kitkos · January 3, 2014

W.W. Webster wrote: »
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:
Posted on 13 November 2013
 
Celebrity Solstice, the seventh of seventy-six cruise ship arrivals expected in Wellington this summer, was entering Wellington Harbour as I was walking along Seatoun Beach this morning. 
 © 2013 Ross Collins
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. ) 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?

thanks
- Clayton

http://www.claytontaylorphotography.com/PROJECT365/PROJECT-365-2014

W.W. Webster · January 3, 2014

kitkos wrote: »

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?

Click on post (displays lightbox) -> Wrench Tool -> Edit -> Photo Details -> Title

ko04 · January 4, 2014

W.W. Webster wrote: »

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.

ChancyRat · January 19, 2014

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?

ECPhoto · January 20, 2014

I really love what you've done for this layout, Lamah, and I've tried to incorporate it here: http://www.essentiallychicphotography.com/Blog

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!

ECPhoto · January 20, 2014

You know, I think I figured it out with a trick here: http://www.dgrin.com/showthread.php?t=236680 (for anybody else who may be looking for it). Thanks again!]

Darter02 · May 8, 2014

Interesting. I may have to play around with this idea.

canderson1229 · July 14, 2014

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?

Thanks so much!

thenickdude · July 14, 2014

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.

Blog layout

Comments