Blog layout

W.W. Webster

I like the way this fellow is setting out his blog, but I can't see how I can emulate it.

Can anyone see how he does this?

Allen

W.W. Webster wrote: »

I like the way this fellow is setting out his blog, but I can't see how I can emulate it.

Can anyone see how he does this?

It's not a Smugmug site.

W.W. Webster

Are you sure? Take a look at this page, then click on an image!

denisegoldberg

W.W. Webster wrote: »

Are you sure? Take a look at this page, then click on an image!

I think what Allen means is the blog piece is not on the smug site. If you click on the read more it opens the full blog post - that piece is definitely not on smug. Also note the URL change between the smugmug site and the blog.

--- Denise

W.W. Webster

You just could be right Denise!

The integration is so tight and seamless that I hadn't picked the blog format might be provided by another host and also missed the URL discrepancy, but thought he had managed to adapt the thumbnail style somehow to incorporate the image title and part-caption.

As I doubt it requires JavaScript, perhaps it could be another job for Nicholas Sherlock aka Lamah?

thenickdude

I think I heard my name being called over here...

I think you could do that layout on SmugMug with CSS. Lemme play with it for a bit.

W.W. Webster

denisegoldberg

W.W. Webster wrote: »

You just could be right Denise!

The integration is so tight and seamless that I hadn't picked the blog format might be provided by another host and also missed the URL discrepancy, but thought he had managed to adapt the thumbnail style somehow to incorporate the image title and part-caption.

As I doubt it requires JavaScript, perhaps it could be another job for Nicholas Sherlock aka Lamah?

I know some folks are using pages for blogs and depending on what you want from your blog that might work for you.

I already have too much content in blogger to even think about switching, and honestly I think it's easier to work in a tool that is meant to handle text. I matched the look of my blog to my smug site a long time ago; matching it to my changed site was very straightforward.

--- Denise

W.W. Webster

When that's done, there's another fellow over there who could learn a thing or two from a little guy, ... is his name Larry somebody?

W.W. Webster

denisegoldberg wrote: »

I already have too much content in blogger to even think about switching ...

I appreciate you have been helpful to very many users in this matter, but I like to keep everything together. I was very happy using what Nicholas had done to create his montage layout shortly before Smugmug rolled out 2.0 with its very less worthy "equivalent" gallery style, but which Nicholas was unable to enhance due to JavaScript being shut out!

denisegoldberg

W.W. Webster wrote: »

I appreciate you have been helpful to very many users in this matter, but I like to keep everything together. I was very happy using what Nicholas had done to create his montage layout shortly before Smugmug rolled out 2.0 with its very less worthy "equivalent" gallery style, but which Nicholas was unable to enhance due to JavaScript being shut out!

I definitely understand that desire - and based on what Nicholas has built and shared already I would bet he'll be able to create some magic here too.

--- Denise

thenickdude

Here's the horrible hack I conjured up:

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

That's a folder that I've customised. I began by removing the default folders/galleries/pages blocks. Then I've added a Multiple Photos block set to Collage Portrait style, with the Info Style set to Bottom Bar, Photo Size set to Medium, Action on Click set to "Go to gallery" and the Select From set to keywords of "blogpost". I added a CSS block to that page with this code:

.sm-page-widget-images .sm-tile {
	background-color: white;
	padding: 18px;
	border-radius: 4px
}

.sm-page-widget-images .sm-tile .sm-tile-info, .sm-page-widget-images .sm-tiles .sm-tile .sm-tile-content,
		.sm-page-widget-images .sm-tiles .sm-tile .sm-tile-title {
	background: transparent;
	color: #222;
}
.sm-page-widget-images .sm-tile .sm-tile-info {
	position: static;
	margin-top: 0.8em;
	padding: 0;
}
.sm-page-widget-images .sm-tile .sm-tile-info p {
	white-space: normal;
	height: auto;
}
.sm-page-widget-images .sm-tile .sm-tile-title {
	margin-bottom: 0.5em;
	font-size: 200%;
}
.sm-page-widget-images .sm-tile .sm-tile-caption {
	max-height: 9em;
	overflow: hidden;
	line-height: 1.5em;
	position: relative;
}
.sm-page-widget-images .sm-tile .sm-tile-caption:after {
	padding-left: 4em;
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	color: #FF2050;
	content: "Read more »";
	
	background: white;
	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);
}

Now, for every "blog entry" I created a new gallery inside the folder. In the customiser for each blog entry, I've added a Text block with the contents of my blog post, set the gallery display type to Thumbnails, then added a title above the default thumbnails content which says "photos from this blog post".

For each blog entry gallery, I uploaded the photo for that blog post. I set the title of the photo to the title I wanted for the blog post, and set the caption to the caption I want to appear on the blog post grid. I add a keyword of "blogpost" so that the image automatically appears on the index Multiple Photos block for me.

Now as to the issues with this approach... when you click on a photo in the multiple photos block, it opens the lightbox inside the blog post gallery, and the user would have to work out that they need to close the lightbox in order to see the post. There's not much way around this. The alternative would be to use a Galleries block on the index page, which links to the right place, but then you only see the title for the gallery, with no provision for writing a longer description underneath.

I suspect that the Feeds block could be used, with the help of an external server, to automatically generate a grid of links to your blog post galleries. These links wouldn't open the lightbox in the blog post galleries, but would link right to the blog posts instead, which would work much better.

W.W. Webster

Wow - Nicholas, that's amazingly fast! It will take me a few minutes before I can get free of my day job for long enough to implement this and get my feedback back to you, but I will do so asap.

Thanks again!

W.W. Webster

Nicholas, this is going to be a very good option for someone setting out to begin a blog. However, unless I misunderstand you, it will be impractical for my blog which already contains nearly 2,000 images, captions and associated keywording. Setting up the required folders and reloading all the images and captions, etc appears to be a barrier. Am I right?

thenickdude

Ooooh yes, very much so, lol. Is this your current blog? I guess I assumed you wanted a separate page for each blog post entry. Okay, this is much simpler now, try setting your current gallery to Thumbnails style and add this CSS to a CSS block on the page:

.sm-gallery .sm-tiles-grid .sm-tile-wrapper {
    width:25%;
    max-width:none;
}
.sm-gallery .sm-tiles-grid .sm-tile {
     background-color:white;
     padding:0;
     margin:0 0 16px 16px; /* Adjusts spacing between posts */
     border-radius:4px
}
.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;
}
.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-content {
    padding:22px;
}
.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 {
    max-height: 9em;
    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:normal;
    height:auto;
}
.sm-gallery .sm-tiles-grid .sm-tile .sm-image {
    width:100%;
    height:auto;
    position:static;
    margin:0;
    padding:0;
    margin-bottom:0.5em;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform:none;
}

It should end up looking something like this:



When SmugMug finally gets around to adding the same sort of layout options that Multiple Photos blocks offer for galleries, you might be able to use Collage Landscape or Collage Portrait instead. At the moment, the default caption position for those makes it really difficult to end up with the caption displayed in the right place and clickable as a link.

W.W. Webster

Lamah wrote: »

Is this your current blog?

Yes, that's it!

Lamah wrote: »

Okay, this is much simpler now, try setting your current gallery to Thumbnails style and add this CSS to a CSS block on the page ...

I'll get a chance to give it a try later in the day. Thanks again for your efforts!

W.W. Webster

First look is very promising! I notice the line breaks in my captions aren't being actioned as they usually are (is it fixable?), but apart from that, the first impressions are good. I'll get back later when I have more time.

Thanks again!

thenickdude

There is actually, where the CSS code currently says:

.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-info p {
    white-space:normal;
    height:auto;
}

Change it to:

.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-info p {
    white-space:pre-wrap;
    height:auto;
}

W.W. Webster

Thanks, I'm working on this solution. However, I'm suffering some collateral damage - all the thumbs for other galleries are now set in white panels, see http://smu.gs/18tnDr2

Have I not applied the CSS correctly, perhaps?

thenickdude

You need to add the CSS as a CSS block only in that one blog gallery.

Make sure that it's showing "only this gallery" at the top right of the page while you're in the customiser, if not, click "make this gallery custom".

W.W. Webster

Lamah wrote: »

You need to add the CSS as a CSS block only in that one blog gallery.

Make sure that it's showing "only this gallery" at the top right of the page while you're in the customiser, if not, click "make this gallery custom".

Thanks, that worked fine. I wasn't sure whether the CSS was going to apply only to Thumbnail-style galleries, but all's well now!

BTW, how can I reduce the space between the image title and caption?

I've also noticed that the gallery always displays four columns, irrespective of screen width. On my 30" screen, this causes some images to be distorted a little on a full-width browser page whereas, on my mobile, four vertical slithers are shown! I'm less concerned with the latter than the former. I presume the original Thumbnail style is responsive. Has your hack disabled this?

W.W. Webster

W.W. Webster wrote: »

I've also noticed that the gallery always displays four columns, irrespective of screen width. On my 30" screen, this causes some images to be distorted a little on a full-width browser page ...

Hold all tickets! On further investigation, this appears to be a browser issue. Chrome gives this distorted image problem, but Safari does not.

thenickdude

Yeah, the default thumbnails layout tries to display the thumbs pretty small, so it automatically adds a lot of columns to the page. Try replacing the CSS with this, which attempts to preserve the responsive design, but adds more columns to the default so they display larger:

.sm-gallery .sm-tiles-grid .sm-tile-wrapper {
    max-width:none;
}
.sm-gallery .sm-tiles-grid .sm-tile {
     background-color:white;
     padding:0;
     margin:0 0 16px 16px; /* Adjusts spacing between posts */
     border-radius:4px
}
.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;
}
.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-content {
    padding:22px;
}
.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 {
    max-height: 9em;
    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 {
    width:100%;
    height:auto;
    position:static;
    margin:0;
    padding:0;
    margin-bottom:0.5em;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    -webkit-transform: none;
    transform:none;
}
/* 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%;
}

The spacing around the title is set here:

.sm-gallery .sm-tiles-grid .sm-tile .sm-tile-title {
margin-top: .5em;
margin-bottom: .5em;
font-size: 200%;
}

You can reduce margin-bottom to bring the title closer to the caption.

W.W. Webster

Thanks!

thenickdude

Hey there,

I suspect you would enjoy this customisation I've created to make the photo captions always appear in the lightbox, please give it a try:

http://dgrin.com/showthread.php?p=1913120#post1913120

meatloaf

another blog style
Here is my blog style.

www.southfloridafreepress.com

W.W. Webster

Lamah wrote: »

I suspect you would enjoy this customisation I've created to make the photo captions always appear in the lightbox, please give it a try:

http://dgrin.com/showthread.php?p=1913120#post1913120

Thanks Nicholas, I'll take a look at it. It was an issue that I had been considering but hadn't yet got around to.

W.W. Webster

Which CSS code, precisely?

TimSebringPhotography

W.W. Webster wrote: »

I like the way this fellow is setting out his blog, but I can't see how I can emulate it.

Can anyone see how he does this?

For what it's worth, it's a Wordpress Theme called "Sokar", which you can get here:

http://themeforest.net/item/sokar-responsive-fullscreen-portfolio-wp-theme/3608495

(I have no interest in this, I just found the theme name by looking at the page's source code) Considering buying it myself actually.

TimSebringPhotography

meatloaf wrote: »

Here is my blog style.

www.southfloridafreepress.com

I like how your typeface looks like newspaper print.... (and is laid out similarly as well). Very cool.

W.W. Webster

TimSebringPhotography wrote: »

I like how your typeface looks like newspaper print.... (and is laid out similarly as well). Very cool.

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