Final touches

After my recent decision to joining the iTunes Affiliate Program, it’s time to fix one or two things of this website in order to provide a better overall experience.

The first changes are on the web side: finally I’ve managed to align the articles titles on the main page, to the one you see when reading a specific article. This will provide, I hope, a smoother and elegant transition between pages. Also, I’ve aligned to the center the images and the section titles also in the articles itself, so you can experience the same appearance on desktop and mobile.

Also, I’ve noticed that some articles don’t generate a correct twitter meta-tags in the header, so some cards are broken when shared on the 140-chars-long social network.

Broken Card

This happens only on one kind of entries (the ‘post’ ones), and only in some specific situations: when I puts a banner image as a first entry in the article.

After some debugging I’ve managed to solve that problem, moving the banner away from article markdown, into a special ‘banner’ tag on the page itself.

This brings some improvements.

  • Now the excerpt is correctly parsed by Jekyll so the cards now have a real post preview as a description;
  • Manage the banner image separately from the article content, brings to me the ability to center correctly the banner itself everywhere (on the main page, on the article content, on the mobile browser etc.);
  • This separation also introduce the ability to identifying if a banner image it’s available during the generation of the twitter card code, so I can present better cards on Twitter.

From now, if a banner is available on the page, you can notice a Twitter card with larger images, which I found really really nice.

Larger Images

As you can see, article and the correct excerpt are finally in the correct place.

Written on June 16, 2016 - #Blog #Twitter