Posts

Showing posts from July, 2015

Make Google Photos img tags responsive

Image
Blogger, like Google Photos, has great photos handling which allows you to resize an image just by tweaking its URL, which can be incredibly useful for using dynamic images to ensure that your mobile readers aren't downloading MB of data over their mobile network.

URL Size Parameter Take, for example, a panoramic image that I took of the coliseum in Rome. Its original size is a whopping 4.6MB - overkill for any mobile client viewing it. Even on an iPhone 6+, we're talking 1920x1080 res, when the original image itself is 8682x2630.

Uploading the image to Blogger and adding it to this post, we see straight away the resizing behaviour in action.

The image above is the default size when you insert into blogger's post editor: 320px wide.
The URL is:

http://2.bp.blogspot.com/-6jOWPCJVAlw/VZ2y2Yp6cdI/AAAAAAAApw4/uecckcZaHyU/s320/PANO_20140810_102814.jpg
The size parameter for the URL above is the s320 part. We can substitute any different size we want in there for the 320 to get a…

Change the colours of the Polls Widget

Image
For some reason, the polls widget does not have settings for its colours in the configuration dialog. It seems to pick up its colors from template variables instead.

Find or Add the variables The variable that the polls widget uses for its text color is sidebar.text.color - if this variable already exists in your skin, you will find it in the group that it belongs to.
If it doesn't already exist, add it by copying this into the <b:skin> section of your blog's template (Template => Edit HTML).

  <Group description="Poll Widget" selector="widget.Poll">      <Variable name="sidebar.text.color" description="Text Color" type="color" default="#2288bb"  value="#2288bb"/>      <Variable name="sidebar.link.color" description="Link Color" type="color" default="#2288bb"  value="#2288bb"/>    </Group> Add new variables if they are not alrea…