Improved images handling + tweaks for Tags parsing

[RaVbaker]

When importing posts from my medium page I discovered that sometimes links to assets in Medium are not having explicit file extension. But the default for such, since they are imported from Unsplash, is .jpg. So I reorganized the code a bit for that behavior.

Another missing feature related to images and exports from Medium was lack of details how the image was styled in original post. By looking up in Medium code I figured out there are few styles, described in parent <figure> tag classes:

• graf--layoutFillWidth
• graf--layoutOutsetCenter
• graf--layoutOutsetLeft
• graf--layoutOutsetRow
• graf--layoutOutsetRowContinue

plus sometimes it's not specified and then it's a regular image with same width as text.

The last two have also some extra details in parent HTML node which says how many images should there appear in a single row and it can vary how the image grid is shown. There is an excellent post that summarize what styles are possible for images on Medium: https://medium.com/@jeffreywang1183/medium-image-guideline-b0e2c4947d90 plus Medium has a support page about it: https://help.medium.com/hc/en-us/articles/215679797-Images

Based on that research and article about styling images in markdown: https://www.xaprb.com/blog/how-to-style-images-with-markdown/ I decided to add the image layout details to the <img src="..."/> attribute value in a form of #layoutName meta-information.

This way CSS rules like:

img[src$="#layoutFillWidth"] {
  // ...
}

and similar would allow to style the images accordingly without modifying the markdown and putting there plain HTML tags.

Hope the idea would be liked and will get an approval.

A complete list of possible suffixed of img-src values is:

• #layoutTextWidth - for default situation and when the graf--layout... class wasn't specified
• #layoutFillWidth - to make the image at width of full width of viewport. How to style it? Check here. This is also a style of a featured/first image.
• #layoutOutsetCenter - centered image a bit wider than text column
• #layoutOutsetLeft - positioned on top-left of next paragraph with effect of text wrapped around the image.
• #layoutOutsetRow2 or layoutOutsetRowContinue2 - when there are two images in a row. First the the first class second the one with Continue word in middle
• #layoutOutsetRow3 or layoutOutsetRowContinue3 - similar to previous one, when there are three images in a row. First the the first class second and third the one with Continue word in middle.

In case Medium adds some new layouts there will be automatically supported. Thanks to the way that code takes anything what's after graf--layout prefix.

[RaVbaker]

@bgadrian I've also added two extra changes here. One for aliases for Drafts, since that section is not needed for them. Till now it was rendering just alias to homepage which was conflicting sometimes.

And I've also fixed Tags discovery on Medium posts, because the've changed the HTML/CSS on pages. Now it's CSS classes agnostic.

[RaVbaker]

If you would like to I can move the tags discovery/aliases for Drafts to separate PR.

[bgadrian]

Looks great! Thanks for your contribution