Blogger Tips: Customizing Flipcard View in Blogger Dynamic Views

Estimated Reading Time:
A lot of bloggers want to use dynamic views (coz it's pretty and oh-so-shiny) but find that customizing it is a pain in the wrong places.

Well, I'm not going to mince words. It is.

But, if you are willing to put that little extra time, you'll not only end up with a site that looks good and the way you want it to but will have amazing functions like, relevant and chronological quick search, infinite scrolling, and posts that get automatically organized with a click of a button.

But why is it believed to be so much harder to customize the dynamic views templates? It's mostly because the templates are created using AJAX, HTML5, and CSS3, which makes for great looking blogs but means that most of the blogger gadgets don't work as intended, including the HTML/Javascript gadget which is probably the most commonly used gadget among bloggers.

The Google Blogger team keeps releasing new features for dynamic views but it's not fast enough for our creativity. In the meantime however, while they let all that #percolate, let's find workarounds. So, today we are:

Increasing the size of the Flipcard thumbnails in Blogger Dynamic Views

The TL;DR Version

  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses the ‘Flipcard’ dynamic views template. 
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. Paste the code below at the end of any other CSS code you might have there.
  6. Press ‘Apply to Blog’.
  7. Done-zo!

#Flipcard.ss, #content>div {
  height: 187.5px !important;
  width: 187.5px !important;
  left: auto !important;
  position: static !important;
 display: inline-block;
}

The Lengthy Version

What happens when you increase the size:

The standard flipcard image thumbnail size is 125px in the Blogger dynamic views for 'Flipcard'.

If you check the URL for the image that each card dynamically sources, the image size is also customized to 125px, and you'll find this even in the path of the image URL which will go something like this: http://example.com/.../path/to/my/image/.../s125-p/myimage.png'.

This means that even if you increase the size of the <div> containing the thumbnail image, the resolution won't increase accordingly.

So, the image might appear pixelated the higher you go since the resolution continues to be for an image size of 125 pixels.

For example, at 125px, this is what this image looks like:

at 250px, the image appears a little blurry and pixelated;

 

Roadblocks:

Usually, at this point, I would go hunting for a way to override and replace the 's125-p' part of the thumbnail image URL with a number of our choice.

However, that involves the use of SCSS that blogger doesn't support at the moment.

I know, I know - Gah!

Compromise and Move on:

After playing around a little bit, I realized that the beauty of the flipcard view is that you can see a sort of photo grid of each post, making the user feel like exploring your site as they would a photo album. Keeping that in mind, the larger the image size, the fewer number of thumbnails per row (also depends on your screen size) and that takes away from the photo album feel.

I found my sweet spot is 187.5 pixels which is 150% the default thumbnail size. For you, it could be something different. Play around with the dimensions and see where they take you.

Comments on each line of CSS code:

First, changed the width and height to 187.5 pixels.
 

#Flipcard.ss, #content>div {
  height: 187.5px !important;
  width: 187.5px !important;
}

Now, it's important to remember that the way the flipcard view template is set up, when you increase the thumbnail size, it doesn't automatically shift the thumbnails to a grid and so, they appear overlapped. To fix that, we add a few more lines as you'll see now. This is what it looks like it you only change the thumbnail size and nothing else:

 

Next up, the alignment.

So, in the template, each card moves 130px to the left in the order it is supposed to appear. Meaning, the latest post would have a styling of 'left: 0px', the one after that would be 'left: 130px', next one is 'left: 260px' and so on. And the same pattern is applied to the left property for each row as you go down.

Because I want the cards to align themselves dynamically depending on the screen size and not overlap with each other, I changed the left property to 'auto' and reset the position property from the default 'relative' to 'static' (one of those rare instances when you get to do that).

#Flipcard.ss, #content>div {
  height: 187.5px !important;
  width: 187.5px !important;
  left: auto !important;
  position: static !important;
}

Now, you'll see one post per row and they are all moved to the left of the page.

 

Final stretch, moving them back into a photo grid. It's quite simple really.

We just add a display property and set it to 'inline-block' and since they all have the same dimensions, each card just falls into a grid. Ta-da!

#Flipcard.ss, #content>div {
  height: 187.5px !important;
  width: 187.5px !important;
  left: auto !important;
  position: static !important;
 display: inline-block;
}



Bonus: Dynamically set the number of cards per row and Center them


There is a surprisingly elegant way to make sure that the cards for each post (or postcards, if you will - giggle) stay centered and only have as many cards as would fit in that defined space for the screen size.

First, we set a percentage width for the block that's meant for the posts (class= 'content'). I set it to 90%. Next, I moved it to the left by 5% so that it appears centered no matter what screen size. Et voilà! You're all set.

Here's the piece of CSS code all together:

#Flipcard.ss, #content>div {
  height: 187.5px !important;
  width: 187.5px !important;
  left: auto !important;
  position: static !important;
 display: inline-block;
}

#Flipcard.ss, #content {
  width: 90%;
  left: 5%;
}



Hope this helps! #iloveflippincards LOL


Comments

Popular Posts