Blog layout

W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
edited August 18, 2015 in SmugMug Customization
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?
«134

Comments

  • AllenAllen Registered Users Posts: 10,008 Major grins
    edited September 15, 2013
    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.
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 15, 2013
    Are you sure? Take a look at this page, then click on an image!
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited September 15, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 15, 2013
    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?
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 15, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 15, 2013
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited September 15, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 15, 2013
    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? :D
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 15, 2013
    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!
  • denisegoldbergdenisegoldberg Administrators Posts: 14,220 moderator
    edited September 15, 2013
    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
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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?
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 16, 2013
    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:

    K7wN8r9.jpg

    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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!
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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?
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 16, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 17, 2013
    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.
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 17, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 17, 2013
  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited September 23, 2013
    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
  • meatloafmeatloaf Registered Users Posts: 54 Big grins
    edited September 23, 2013
    another blog style
    Here is my blog style.

    www.southfloridafreepress.com
    Ted
    South Florida Free Press
    www.SouthFloridaFreePress.com
    Concert and Event Photography
  • W.W. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 23, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 24, 2013
    Which CSS code, precisely? :D
  • TimSebringPhotographyTimSebringPhotography Registered Users Posts: 6 Beginner grinner
    edited September 24, 2013
    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.
  • TimSebringPhotographyTimSebringPhotography Registered Users Posts: 6 Beginner grinner
    edited September 24, 2013
    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. WebsterW.W. Webster Registered Users Posts: 3,204 Major grins
    edited September 25, 2013
    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).
Sign In or Register to comment.