Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, May 5, 2012

Fit Post Titles in Snapshot Thumbnails in Blogger Dynamic Views

Before
After
Lots of photo bloggers are annoyed by the fact that the post-tiles in Snapshot view are often clipped at the side. By default, only the first 4-5 words are visible, and the rest of them are kept hidden. Moreover, the titles need to share the space with the comment bubbles, which certainly isn't a encouraging factor for anyone who wants to use Snapshot view. Let's change this, shall we?

Go to Dashboard --> Template --> Customize --> Advanced --> Add CSS --> paste the following code --> Press enter after the last character of the last line } --> Apply to Blog.
.snapshot .item.comments .title {
left: 5px;
right: 5px;
font-size: 14px;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}

.snapshot #content .item h3.title{
bottom: 5px;
height: auto;
}
 
.snapshot .item .comments-count {
bottom: 220px;
}
This tweak should allow titles within 10-12 words to be visible. If your average titles are longer than this, feel free to bring the title font-size down to fit in more words, by adjusting line 4.

"Help, it doesn't work!"

If the code above doesn't work for you, try this instead:
.snapshot .item .title {
left: 5px !important;
right: 5px !important;
font-size: 14px !important;
text-wrap: normal !important;
white-space: normal !important;
overflow: visible !important;
}

.snapshot #content .item h3.title{
bottom: 5px !important;
height: auto !important;
}
 
.snapshot .item .comments-count {
bottom: 220px !important;
}

78 comments:

  1. What if you do not want the words visible at all? How would you eliminate the extra border sdpace at the bottom of the photo? -Thx, Bob

    ReplyDelete
    Replies
    1. Hi Bob,

      Here you go :)


      .snapshot .item {
      padding: 10px 10px 10px !important;
      }

      .snapshot .item h3.title{
      font-size: 0px;
      }


      Cheers!

      Delete
  2. Great Tutorial, it's useful for people who use dynamic views template.

    Yoboy, i am making a new blog Bloggers Network, and i want to take your interview. If you allow me please contact me on my email depy45631@gmail.com

    ReplyDelete
    Replies
    1. Hi Deepak,

      I am currently extremely busy with my MSc project, thus the reason why I've been away from the forum for the past few weeks. We'll try again in the future.

      Cheers..

      Delete
  3. your tutorials are sooo good and sooo useful! what would I do without your help! Thank you so much!

    ReplyDelete
  4. Thanks for all your great posts, I was wondering if there is anyway to remove the additional photos in snapshot view the template automatically creates when your post has more than one photo? Been scratching my head for hours now!

    ReplyDelete
    Replies
    1. Hi Jodie,

      I know a way, but you're not gonna like it. Basically, what we need to do is to stop Blogger from fetching all your thumbnails except for the one that you'd like to see in the main snapshot view. In order to stop that, you need to upload your picture elsewhere, other than blogger. That way, Snapshot will only show the picture that is uploaded using Blogger. But it'll be a major pain in the back to do this.

      Here's an example of post that has two different picture, but only one of them would show in my Snapshot view (because the other one is hosted at Imageshack)

      Example

      Delete
    2. I have the same problem, I would consider your tip, but I have way too many pictures already on my blog. Is there no other way? Great Blog BTW very helpful!

      Delete
    3. Unfortunately, there isn't. If you want to exclude some pictures from being fetched by Blogger thumbnail-making engine, you need to make the source of the image unidentified by hosting it elsewhere.

      Delete
    4. I've tried this by linking to photo on Flickr, but it's still appearing as a snapshot on front page. Does this trick not work with Flickr - it's where I'm going to be uploading most of my photo's too anyway.

      P.s. thanks for all the amazing tips - I've only just started up my blog and have used a lot of your tips already!

      Delete
    5. Ah.. They must have added support for Flickr pictures then, although I'm not entirely sure about it. Do you still have the flickr picture in your blog? Let me have a look if you don't mind. What's your blog's address?

      Delete
  5. Ya i know your all turtal is work properly ...
    But I don't know your turtal how to remove search bar in dyanamic view i used it and it works in firefox not in google chrome and other thing not open site in Internet explorer

    ReplyDelete
    Replies
    1. Hi Anon,

      What's your blog's address? Let me have a look.

      Delete
  6. The only help on the net for handling dynamic views, otherwise less people would use it!
    I am interested in changing the size of the Snaphot view items, I want to make smaller thumbnails like in Flipcard (I like Flipcard, but it shows incorrectly in IE).
    So can you give me a code for smaller snapshot items?
    Thanks a lot!

    ReplyDelete
    Replies
    1. Hi Grabriel.. Thanks for dropping some nice words, appreciate it.. As for the snapshot thumbnail size, I've tried adjusting it, but unfortunately, it is too dynamic to be assigned a static value - it just won't work.. I'm sorry I couldnt be much more of a help..

      Delete
  7. THANKS FOR GIVING SUCH USEFUL INFORMATION.
    I want to change to Dynamic views but out of 7 different views that it provides,I want only three of them displayed with names changes(e.g. Flipcard - Photo frame or so..) otherwise it will confuse my visitors.
    is it possible ?

    ReplyDelete
    Replies
    1. Hi there,

      Yes it is possible. Which 3 would you like to make visible?

      Cheers..

      Delete
  8. Is there any way I can align the thumbnails/tiles so that they are in line and are NOT alternatively tilted like how they are now(in Snapshot view). Thanks for the help

    ReplyDelete
    Replies
    1. Hi chidanand,

      See if this is what you're looking for. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .askew .item, .ss {
      -moz-transform: rotate(-0deg) !important;
      -webkit-transform: rotate(-0deg) !important;
      -ms-transform: rotate(-0deg) !important;
      -o-transform: rotate(-0deg) !important;
      margin: 0px !important;
      }

      Cheers..

      Delete
    2. Thanks Yoga, that was really helpful!! I have been playing with my blog all the while and I need another favor from you. Using the code below ,I managed to increase the thumbnail sizes, but the image inside the thumbnail don't fill it up(there is a 25px white margin). Is there any way I can make these image thumbnails fit those cells?? (pencilshades.blogspot.com)

      .askew .item .thumbnail, .ss{
      width: 250px !important;
      height: 250px !important;
      }

      CHEERS!!

      Delete
    3. Hi Chidanand,

      This is the best I could come up with:

      .snapshot #main #content.items .item a.thumbnail{
      background-size: 250px 250px !important;
      }

      Let me know how it goes :)
      Cheers!

      Delete
    4. Dear Yoga,

      Your tips are so very valuable and helpful, thousand thanks for writing this blog! I am turning to you with a question of my own. I extensively modified the Snapshot view on this test blog:
      http://robdebob1.blogspot.ch/

      I basically wanted to remove the post title from the bottom of thumbnails , and remove the rotation of the thumbnails. I used the code in this thread. There is a small left-over that is bothering me. When I hover over the thumbnail, the bottom edge expands slightly, about 5px. Can you think of any way how to remove this?

      On a related topic, do you know if it is possible to change the color (or lightness or contrast) of the thumbnail over which one hovers, or perhaps that of the background frame? This would make for a nice visual effect.

      Cheers!

      Delete
    5. Hello Yaccobo,

      This could get lengthy. Mind if we take it to the forum?

      Delete
  9. Hi! Your blog is amazing! Thank you so much. Is it possible to make the snapshots in Snapshot View flip like the images in Flipcard view?

    ReplyDelete
    Replies
    1. Thanks Emily, appreciate it :)

      Unfortunately, we can't add flipcard's transition effect to Snapshot. It has been wired that way..

      Delete
  10. This is great! Everything works just fine. Bravo lad. Could you please tell me how to add drop down menu to Blogger Dynamic View? - to 'Magazine'template?

    ReplyDelete
    Replies
    1. Thanks Imran.. As for adding a drop-down menu, see if this helps:

      Drop-Down Pages Gadget Menu in Blogger Dynamic View

      All the best :)

      Delete
  11. Thank you for all of your tips about DV! I tried this one, but it didn't work :(
    Please help..
    Also have you find a way to use facebook comments in DV? I really want to use this template but I also want to use Facebook comment and it didn't work with DV template..

    ReplyDelete
  12. Heiy don't mind about my previous comment! It actually works now! Excellent!!
    But I still hope you could find a way to integrate facebook comment in DV :)

    ReplyDelete
    Replies
    1. Hi Ciyus,

      Believe it or not, I don't have a facebook account! :) In any case, if you have some sort of HTML or script for facebook comments, you can try to insert it to the HTML section of your post (Dashboard - Post - Edit - HTML).. If it doesn't work, I'm afraid there aren't anything left for us to whirl..

      Delete
  13. Hello, I have problem in dynamic views. When i open individual posts, photos appear correctly but they are not showing on blog dynamic view. my blog is masheddownload.blogspot.com
    you can check that only 2 or 3 of images out of almost 108 posts are showing. what to do so that all posts represent their image?

    ReplyDelete
    Replies
    1. Hi Raza,

      You need to upload your images to Blogger, using the 'Image Upload' tool built-in your post editor. The dynamic view template will not fetch thumbnails from images that are not hosted at Blogger - even if they're linked in your posts.

      Cheers :)

      Delete
  14. Hello there !
    First off, thank you so much for all the tips, they really helped me customize my blog exactly how I wanted.
    I just have one question.
    Is there a way to change the white color of the thumbnails in the snapshot dynamic view?

    ReplyDelete
    Replies
    1. Hi Morgane,

      Yeap, there's a way. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .snapshot .item{
      background-color: red !important;
      }

      Cheers :)

      Delete
  15. how to add like button like mashable in blogger flipcard template - thumbnails when we hover..

    ReplyDelete
    Replies
    1. I don't see a way forward in Flipcard template so far..

      Delete
  16. In the magazine setting, how do you embolden the titles of thumbnails? And how to you create automatic, visible separators between those thumbnails?

    ReplyDelete
    Replies
    1. I'm not entirely sure with what you mean by thumbnail titles. But if you were referring to your post titles, you can bold-face them by adding the following code to your CSS:

      .entry-title{
      font-weight: 900 !important;
      }

      Try this for creating separators between your posts:

      .magazine .item{
      border: 1px solid black !important;
      }

      Cheers..

      Delete
  17. Thanks so much for all your GREAT tutorials. I have a quick question regarding the comments bubble that shows up on the Snapshot view. Currently on my blog it is located in the lower right corner of the Snapshot and it covers longer titles. Is there a way to remove it completely or just move it to a different location?

    ReplyDelete
  18. sorry about my previous comment i had typed the css wrong. I realize you had that included in your code posted above. my bad but thank you again for your tutorials

    ReplyDelete
    Replies
    1. Hey Jessica,

      No worries. Glad you got it figured :)

      Delete
  19. Hi Yoga,

    Thank your for all your informations, even if i never use css (nor any webdev language) i manage to modify my blog as i want to.

    However, i cant manage to make this one work, maybe there is a conflict with something already written in the css file.
    Do you mind taking a quick look at it? (there are comments for each action, that may be usefull to somebody even though most of it comes from you :)

    /*title size-color*/
    #header.header .title a h1{
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 1px black;
    font-size: 40px;
    }

    /*share buttons*/
    .share-controls{
    display: none !important;
    }

    /*background transparency*/
    .sidebar .item{
    background: #E4E4E4 !important;
    }
    #items.items li.item, .overview-inner, .magazine #content, .ss .item, .mosaic #content .item, .sidebar #content, #sidebar .item.selected, .timeslide .item, .viewitem-content {
    background: url('http://www.nauvootimes.com/images/white90.png') !important;
    }
    .overview-panel .article, .magazine #feature, .viewitem-panel .article, .sidebar #content .article{
    background: transparent !important;
    }
    #overview .overview-backdrop{
    opacity: 0 !important;
    }

    /*remove feedback*/
    .feedback
    {display:none !important;}

    /*thumbnails titles*/
    .snapshot .item.comments .title {
    color: red;
    left: 5px;
    right: 5px;
    font-size: 14px;
    text-wrap: normal !important;
    white-space: normal !important;
    overflow: visible !important;
    }
    .snapshot .item .comments-count {
    bottom: 220px;
    }

    I also was wondering something, when i add a picture to a post, there is a thumbnail created for each picture.
    I was wondering is its possible to make one thumbnail for one message with several pictures in it but no thumbnail except the one of the message?

    Maybe what i'm asking is totally nonsense but as i said before i'm not at all at ease with code lines :)

    ReplyDelete
    Replies
    1. Hi Seb,

      Seeing the code alone isn't gonna be very helpful. I'd rather inspect your blog straight away, as that could tell why the tweak above isn't working. Let's have a look at your blog. What's your blog's address?

      As for the thumbnails, Snapshot view tends to fetch all Blogger-uploaded images from each post. That's the key there - Blogger-uploaded images. If you don't want a thumbnail to appear, then host the image elsewhere, like imageshack, flickr and so on, and link it to your post.

      Cheers :)

      Delete
    2. Thanks a lot for your answer Yoga and for your help :)

      Here is the link (almost empty right now, just few data for the tests before really using it in few months)

      http://sebchris.blogspot.fr/

      What's more I was also wondering if there is a way to auto resize background image to fit screen size dynamically.

      By the way thank you for the answer you already made.

      Cheers

      Delete
    3. Hi Seb,

      Here, try this:

      .snapshot .item .title {
      left: 5px !important;
      right: 5px !important;
      font-size: 14px !important;
      text-wrap: normal !important;
      white-space: normal !important;
      overflow: visible !important;
      }

      .snapshot #content .item h3.title{
      bottom: 5px !important;
      height: auto !important;
      }

      .snapshot .item .comments-count {
      bottom: 220px !important;
      }

      And there isn't a way to auro resize background images to fir screen size dynamically - which is very unfortunate I might add.

      Cheers.

      Delete
    4. Hi Yoga it works :)
      Thank you again for having taken time to answer me.

      Cheers

      Delete
  20. This may be a bit offtopic, sorry about that (I'm still learning the places around here :)

    I'd like to use the Snapshot view in my blog, displaying an image I'd upload to blogger, but instead of opening that post when clicking on the snapshot, I'd like to redirect the user to another site;
    Like... I'm displaying an image of a certain amazon product in my snapshot, and when clicking, I'd like the user to be redirected to the proper Amazon product page.
    Is it possible?

    Thanks in advance, Yoga (it's pretty amazing what you're doing in this place!)

    ReplyDelete
  21. Hi Trendy Freak,

    Unfortunately, there isn't anyway to edit the target link of the snapshots. You might wanna use one of the third party templates that is optimised for online shopping - that could come in handy.

    Cheers :)

    ReplyDelete
    Replies
    1. Thank you, Yoga!
      Will check third party templates as you say.

      Have a great weekend :)

      Delete
  22. Great tips, thanks man. Is there a way to make the frames in snapshot view black instead of white?

    ReplyDelete
    Replies
    1. Try this:

      .snapshot .item{
      background-color: black !important;
      }

      Cheers.

      Delete
    2. Hi
      I have made a snapshot gallery.
      But when i have added more than one photo to the blog entry, it names the first photo the name of the header on the blog entry, and leaves the other once blank.
      Is there a way to add a specific name under the picture?

      I tried to click the properties in the picture in the post entry and give it a name (titlee text / alt text) but were not able to get it to show.

      Any ideas?

      http://elama-norjassa.blogspot.no/view/snapshot/search/label/Degut

      Delete
    3. That's a good question.. I will escalate this to Blogger support and get back to you if they reply..

      Delete
  23. Hi! So happy that I found your terrific blog! You may have already answered my questions. Please direct me to the correct place if you have. 1) Is there any way to ONLY use the snapshot view with the dynamic template? 2) I don't mind hosting the thumbnail on a third party site, but how do I link to it in my post? (photobucket.)
    Thanks!

    ReplyDelete
  24. Hi Charlene,

    1) Yeap, first choose Snapshot as your default template, next disable all the other template options (see here), and then redirect all template view URL to your default URL (see the link above, under Extras).

    2) The last time I checked, DV template did not fetch thumbnails from Photobucket. It is best for you to upload to Blogger directly if you want your thumbnails to show fine. I've seen Flickr working in some blog, but it's more of a hit-and-miss thing.

    ReplyDelete
  25. Thanks you are amazing!!! Worked beautifully on my blog: www.stylemeetsperfection.blogspot.com :)

    ReplyDelete
  26. Is there a way to make the post tiles align in the center of the page instead of the left side?

    ReplyDelete
    Replies
    1. I'm afraid that could be disastrous. What you're seeing is actually not a gap on the right hand side. Snapshot works this way. It measures the width of your viewer's display, and starts populating snapshots starting from the left. Naturally, there'll be some space left on the right, this is what you're seeing. This space varies from computer to computer, depending on the display size. Any attempt to mitigate this 'gap' will only get in the way of the dynamic nature in which the cards are arranged. Worse case scenario: you might not see the gaps in your computer, but most of your readers might not see some of your snapshots.

      Delete
  27. HI!! Could you please tell me how to insert two images in a snapshot template and not create two posts?

    ReplyDelete
    Replies
    1. Hi Rochak,

      By inserting two images in any single post, you'll end up with both images showing in Snapshot templates - but this constitute a single post.

      If you were looking for a way to not have both images shown, you need to ensure only one of those images is uploaded to Blogger. The rest of them must be hosted elsewhere (imageshack, photobucket, facebook, etc)..

      Delete
  28. Hello, I just wanted to say thanks for all the great tuts on the Dynamic Views Blogs. You are really helping me out a lot! Kudos.

    ReplyDelete
  29. Hi Yoga,

    Southernspeaker is a very useful resource, thank you for all your coding tips & lessons!

    I am using Snapshot as landing page for my blog http://www.chinesecoloured.com/. Is it possible to select only one picture for each post to show in snapshot view?

    Laure

    ReplyDelete
    Replies
    1. Hello Laure,

      It is possible, but the way to go about it is a little clumsy. Here's how: Snapshot fetches all Blogger-uploaded images from all posts to the main view. The trick to get only one picture from each post is to only upload one picture to Blogger (using the Blogger image uploader using post editing).. The rest of the pictures should be uploaded/hosted elsewhere and linked to the post.

      Delete
  30. This worked wonderfully. Thank you!

    ReplyDelete
  31. Hi Yoga

    Thanks for all the tips - I've had fun updating my blog formatting!

    However when I try this bit of code any titles that are 2 lines long then end up encroaching on the photo snapshots (ie overlapping). It seems that changing the spacing between the 2 lines would solve this, but I can't work out how to do it - any tips?!

    Thanks
    Katie

    Whatskatiedoing.blogspot.co.uk

    ReplyDelete
    Replies
    1. Hello Katie,

      Sorry for the (ridiculously) late reply. You'll need this code to change your title line height:

      .snapshot .item .title a{
      line-height: 15px !important;
      }

      Delete
  32. Great - thanks Yoga, it worked a treat!

    ReplyDelete
  33. Hi There,

    I'm wondering if there is any way to customize how much text is seen below the thumbnail in magazine view. Preferably, I'd love to be able to add a custom description that doesn't show up when you click in to the actual thumbnail and see the whole post. Thank you!

    ReplyDelete
    Replies
    1. Hello,

      I'm not sure if there is a way to limit the number of text on the magazine front view, but I do know a way where you can include a description and only allow it to show on the front view (NOTE: the description will only appear on the front view, but the actual content will appear both at the front and in the post).

      1) Go edit your post - switch to HTML view - Add the following preferably towards the top of your post editor box:

      <div class="post-description">
      This is my description
      </div>

      2) Republish your post.

      3) Add the following to your 'Add CSS' box:

      .article.hentry .post-description{
      display: none;
      }

      4) Repeat steps 1 and 2 for others posts.

      Delete
  34. hello brother, I’m using the Snapshot View in my blog but the problem is that if i upload 5 pictures in a post all those pics appear in the main page, i would like to set it up so it would only show the picture that i selected as the Thumbnail Picture as you taught us in Change Blogger Dynamic View's Thumbnail Picture.

    ReplyDelete
    Replies
    1. That should not be the case, only your first picture should show. Here's a test post I've published again:
      http://testblog18-yoboy.blogspot.my/

      Can I have a look at your blog?

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.