Blog layout

canderson1229 · July 15, 2014

Thanks ok you don't need to go through all of that. It explains what I need to do and I'm not opposed to it, I don't have much there so it would be a huge loss in recreating it. Thanks so much for looking for me.

canderson1229 · July 18, 2014

Thanks for all of this, I love this photo blog style. I wanted to ask if its possible to use the text box to get the formatting in. I would like to insert links to other websites when appropriate but all I can figure out is how to put the text for that post in the caption for that box. I'm hoping this is possible. Also Nick do you plan to post this on your website with all the other customizations? Thanks so much!

thenickdude · July 18, 2014

Do you mean that the link would appear in the thumbnail box? That isn't possible, because HTML is stripped from captions and titles when they appear there. You can see the link after you click on the thumbnail to open the blog "post" in the lightbox, though.

I might publish it, but I suspect it'll be obsoleted by the blogging features that SmugMug mentions adding from time to time.

canderson1229 · July 18, 2014

Thanks, wish we could use the editor.

What would I be doing wrong if I am not seeing the 2 blog posts show up on the same page. I'm sure is something pretty simple.

canderson1229 · July 18, 2014

Do you create a new gallery for each new post?

thenickdude · July 18, 2014

Each new post needs to be a photo, not a gallery, please take a look at W. W. Webster's implementation of it:

http://rosscollins.smugmug.com/Daily-blog/n-6j4Fh/

canderson1229 · July 18, 2014

Thank you Nick. Is there a way to get them to be as uniform in size as the collins blog? I love the clean look

Never mind I did figure this part out.

canderson1229 · July 18, 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!

How are you formatting your text within the box? I notice everything is centered but we don't have the formatting options any longer.

Your photo blog looks really great by the way!

W.W. Webster · July 18, 2014

canderson1229 wrote: »

How are you formatting your text within the box? I notice everything is centered but we don't have the formatting options any longer.

That's a very good question! I expect there's some CSS somewhere that's doing that. I'll take a look and see if I can find it - it might be site-wide.

I wanted the titles to be centred (no, I can't see what's doing that either, but I'll check) and also the "posted on ..." text. You will see from an earlier post in this thread that that text is part of the overall caption, the body of which I would have preferred to be left-aligned. However it's all one caption, so to centre the posted date piece I had to accept everything would be centred - which looks OK.

Nothing's broken so I'm fixing nothing!

canderson1229 wrote: »

Your photo blog looks really great by the way!

Thanks Connie! I think I achieve the look I have by being fastidious in the way I keep everything absolutely consistent. My objective is very simple. I'm not writing long opinionated think-pieces on the meaning of life, not maintaining a travel journal, not posting multiple image galleries, and not trying to promote a personal business or image. I just want to post no more than a single image on any one day and accompany it with a concise comment. With Nicholas's help i've got what I want. YMMV.

canderson1229 · July 19, 2014

Thanks! I've poked around looking for anything that might center that text and title but don't see anything. Its just one of those minor tweaks you know, its fine without it but just a little better with it. If you find it please give a shout. Thank you!

Allen · July 19, 2014

canderson1229 wrote: »

Thanks! I've poked around looking for anything that might center that text and title but don't see anything. Its just one of those minor tweaks you know, its fine without it but just a little better with it. If you find it please give a shout. Thank you!

Have you tried this? Specific for this page.

.sm-page-node-kn6vH .sm-tile-title,
.sm-page-node-kn6vH .sm-tile-caption
{text-align:center}

canderson1229 · July 19, 2014

I'm helping a friend with this photo blog layout and although mine are fine on my page when I just copied and pasted all the css from mine to his the blocks are not all even. This is his page http://www.kiltyimaging.com/Photo-Blog/ could you help me get all of his aligned evenly? Also his other galleries are now showing the white around the images which is something we didn't want. We want that only on the Photo Blog.

Thanks so much!

canderson1229 · July 20, 2014

Allen wrote: »

Have you tried this? Specific for this page.

.sm-page-node-kn6vH .sm-tile-title,
.sm-page-node-kn6vH .sm-tile-caption
{text-align:center}

Thanks Allen! That worked!

zubenelgenubi · August 22, 2014

thenickdude wrote: »

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.

Nick,

I just tried your hack for a "blog" gallery style. It worked beautifully for me - see http://zubenelgenubi.smugmug.com/Blog/

Thanks heaps for this!

- Mark

leftquark · August 26, 2014

Lamah,
Great work here! I find the layout has too much empty space when portrait orientation and landscape orientation images show up sized differently so I used the code that forces them to all be the same size. I noticed, however, that instead of cropping the image as you indicated, it stretches portrait orientation photos to fit the exact size (icky!). Is there any way to have it crop instead of stretch? I imagine I can use negative margins to do this but I'm about to run out and didn't have time to play with it.

Example gallery here: http://www.aaronmphotography.com/Customizations/Blog/n-XFr5T/

The first image, of sunflowers, is an example of a portrait orientation photo that's been smushed.

toddbuchanan · March 19, 2015

I meant to follow up on this earlier but what is the snippet of css code that is used to "smush" the photos (verticle or horizontal) to the same size so that each block is the same size as Aaron has done on his blog?

canderson1229 · March 25, 2015

Do I understand correctly that there isn't a way for the image to open up into another page such as a journal page or connect with an outside blog page instead of just a larger size image?

Thanks so much!

canderson1229 · August 2, 2015

leftquark wrote: »

Lamah,
Great work here! I find the layout has too much empty space when portrait orientation and landscape orientation images show up sized differently so I used the code that forces them to all be the same size. I noticed, however, that instead of cropping the image as you indicated, it stretches portrait orientation photos to fit the exact size (icky!). Is there any way to have it crop instead of stretch? I imagine I can use negative margins to do this but I'm about to run out and didn't have time to play with it.

Example gallery here: http://www.aaronmphotography.com/Customizations/Blog/n-XFr5T/

The first image, of sunflowers, is an example of a portrait orientation photo that's been smushed.

Did you ever get code that corrects this by not smushing vertical images? I have a couple of these that I'm having a problem with.

Teetime · August 13, 2015

canderson1229 wrote: »

Do I understand correctly that there isn't a way for the image to open up into another page such as a journal page or connect with an outside blog page instead of just a larger size image?

Thanks so much!

Connie, I came here looking for blog ideas for a SM site. I ran across this thread and looked at your site. I'm very impressed with your beautiful work and the way you have leveraged SM to display it. I'm less impressed with what SM has given us for blogs. I think it would be a rather nice improvement if we could open from an image into a journal page - why would that be difficult for SM to implement?

canderson1229 · August 13, 2015

Teetime wrote: »

Connie, I came here looking for blog ideas for a SM site. I ran across this thread and looked at your site. I'm very impressed with your beautiful work and the way you have leveraged SM to display it. I'm less impressed with what SM has given us for blogs. I think it would be a rather nice improvement if we could open from an image into a journal page - why would that be difficult for SM to implement?

First thank you for the compliment. Its continues to evolve and yes, I think we would all love it if we could have something representing a blog or that seamlessly might even connect with an outside blog. I think in time there will be but in the meantime we do what we do. The code for the Photo Blog code is kindly done by a fellow grinner and we are thankful for it.

I know there are many that would love a blog layout so I have to think it might be coming, we can hope!

denisegoldberg · August 14, 2015

Teetime wrote: »

Connie, I came here looking for blog ideas for a SM site. I ran across this thread and looked at your site. I'm very impressed with your beautiful work and the way you have leveraged SM to display it. I'm less impressed with what SM has given us for blogs. I think it would be a rather nice improvement if we could open from an image into a journal page - why would that be difficult for SM to implement?

If you're looking to add a blog now I think your choices are to do something like Connie has done, to explore using pages in SmugMug to build a blog, or to use an external blogging tool. I think the answer will depend on what type of blog entries you plan to build.

I like to use a combination of text and photos; for me using a blogging product (blogger in my case) works well. Since clicking on a photo in my blog takes the viewer to the photo on my smug site this is also a source of inbound links to the site.

--- Denise

Allen · August 14, 2015

canderson1229 wrote: »

First thank you for the compliment. Its continues to evolve and yes, I think we would all love it if we could have something representing a blog or that seamlessly might even connect with an outside blog. I think in time there will be but in the meantime we do what we do. The code for the Photo Blog code is kindly done by a fellow grinner and we are thankful for it.

I know there are many that would love a blog layout so I have to think it might be coming, we can hope!

Nice layout. One thing I see missing is a link to a gallery especially for a travel post. I would assume
after you post a travel photo that most visitors would like to see the rest of the photos. You could
provide a link in the caption for " See gallery".

canderson1229 · August 14, 2015

Allen wrote: »

Nice layout. One thing I see missing is a link to a gallery especially for a travel post. I would assume
after you post a travel photo that most visitors would like to see the rest of the photos. You could
provide a link in the caption for " See gallery".

Thanks Allen, I still trying to see what i want to do with this photo blog, I really like the layout but trying to keep it as close to my business as possible. Probably if my site was a travel site I would do as you suggest since it makes the most sense.

I like Denise's blog but it felt like a lot to tackle and I hate writing lol so the photo blog just seemed like right up my alley.

I think the writing a blog post is the obstacle I have to overcome the most and I don't see that changing much lol.

Thank you for all that you both do, you help us look good!

Teetime · August 14, 2015

canderson1229 wrote: »

Do I understand correctly that there isn't a way for the image to open up into another page such as a journal page or connect with an outside blog page instead of just a larger size image?

Thanks so much!

denisegoldberg wrote: »

If you're looking to add a blog now I think your choices are to do something like Connie has done, to explore using pages in SmugMug to build a blog, or to use an external blogging tool. I think the answer will depend on what type of blog entries you plan to build.

I like to use a combination of text and photos; for me using a blogging product (blogger in my case) works well. Since clicking on a photo in my blog takes the viewer to the photo on my smug site this is also a source of inbound links to the site.

--- Denise

Hi Denise. I looked at your SM site which is very nice. I especially like the featured photo on the home page! I also looked at your blog and in the past have looked at the thread that explained how you did the integration. I need to recheck that and may go that route. One issue I did see is that in mobile mode you lose the menu in your blog so no easy way to return to your SM site. Is that something you have control over with Blogger?

denisegoldberg · August 14, 2015

Teetime wrote: »

Hi Denise. I looked at your SM site which is very nice. I especially like the featured photo on the home page! I also looked at your blog and in the past have looked at the thread that explained how you did the integration. I need to recheck that and may go that route. One issue I did see is that in mobile mode you lose the menu in your blog so no easy way to return to your SM site. Is that something you have control over with Blogger?

You're right - mobile mode on my blog is different than full screen mode. I would never want to show the full blog screen on a mobile device; it would be impossible to read. But the blog on mobile works, clicking on a photo opens the photo on my smug site, and clicking a link in the blog opens the designated page. So I don't see that as a problem.

The instructions I wrote for matching a blogger blog to a smugmug site are for legacy smugmug. It was was different there since you as site owner created the html and css for your header and menu. That's not true for most of us on new smug. When I migrated to new smugmug I didn't copy the HTML and CSS over to blogger; I created a simpler set of code to use in my blog to match my smug site.

--- Denise

Teetime · August 14, 2015

canderson1229 wrote: »

First thank you for the compliment. Its continues to evolve and yes, I think we would all love it if we could have something representing a blog or that seamlessly might even connect with an outside blog. I think in time there will be but in the meantime we do what we do. The code for the Photo Blog code is kindly done by a fellow grinner and we are thankful for it.

I know there are many that would love a blog layout so I have to think it might be coming, we can hope!

Connie, I am checking out the various blog alternatives mentioned here on my android smartphone. With your photo blog when I select the "Read more" link I see only the photo and title, but not the caption.

canderson1229 · August 14, 2015

Teetime wrote: »

Connie, I am checking out the various blog alternatives mentioned here on my android smartphone. With your photo blog when I select the "Read more" link I see only the photo and title, but not the caption.

I didn't test it on Android, I have an iPhone and the "read more" is replaced with an up arrow which then shows the caption. I guess this process isn't perfect. Thanks for giving me heads up though.

Teetime · August 14, 2015

denisegoldberg wrote: »

You're right - mobile mode on my blog is different than full screen mode. I would never want to show the full blog screen on a mobile device; it would be impossible to read. But the blog on mobile works, clicking on a photo opens the photo on my smug site, and clicking a link in the blog opens the designated page. So I don't see that as a problem.

The instructions I wrote for matching a blogger blog to a smugmug site are for legacy smugmug. It was was different there since you as site owner created the html and css for your header and menu. That's not true for most of us on new smug. When I migrated to new smugmug I didn't copy the HTML and CSS over to blogger; I created a simpler set of code to use in my blog to match my smug site.

--- Denise

Denise, agree about full screen mode. I wouldn't suggest using full screen on mobile, but rather something like the way SM handles the menu when in mobile mode. I think that would be more consistent with how people familiar with SM mobile would expect it to act. But I acknowledge I am probably being way too much of a perfectionist here.

denisegoldberg · August 14, 2015

Teetime wrote: »

Denise, agree about full screen mode. I wouldn't suggest using full screen on mobile, but rather something like the way SM handles the menu when in mobile mode. I think that would be more consistent with how people familiar with SM mobile would expect it to act. But I acknowledge I am probably being way too much of a perfectionist here.

There are some settings available on blogger to control the look on mobile. But a blog and a photo site can be very different; I like the simple blogger mobile site. You could try some other options there though.

--- Denise

W.W. Webster · August 14, 2015

Allen wrote: »

One thing I see missing is a link to a gallery especially for a travel post. I would assume after you post a travel photo that most visitors would like to see the rest of the photos. You could
provide a link in the caption for " See gallery".

That's what I do, Allen, whether to link to another of my galleries contain more images or to any another external site. This is a recent example of a blog post caption providing a link (in bold text) to further related images.

Blog layout

Comments