Add a set of filters to generate HTML tags for assets

[ashmaroli]

This PR adds a module of filters that generates a corresponding HTML tag for the given asset.

• image_tag for images
• stylesheet_tag for stylesheet(s)
• script_tag for javascript files

Intended usage:

{{ "assets/logo.png" | relative_url | image_tag }}
# => <img src='/assets/logo.png' alt=''>

{{ "assets/logo.png" | relative_url | image_tag: "Site Logo" }}
# => <img src='/assets/logo.png' alt='Site Logo'>

{{ "assets/logo.png" | relative_url | image_tag: "Site Logo", 240 }}
# => <img src='/assets/logo.png' alt='Site Logo' width='240' height='auto'>

{{ "assets/logo.png" | relative_url | image_tag: "Site Logo", 240, "image logo" }}
# => <img src='/assets/logo.png' alt='Site Logo' width='240' height='auto' class='image logo'>

{{ "assets/main.css" | relative_url | stylesheet_tag }}
# => <link rel='stylesheet' href='/assets/main.css'>

{{ "assets/script.js" | relative_url | script_tag }}
# => <script src='/assets/script.js'></script>

{{ "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" | script_tag }}
# => <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>

[DirtyF]

@ashmaroli What's the motivation for this? Any particular use case you would like to share with @jekyll/core to demonstrate the usefulness of these additional filters?

[envygeeks]

I don't see what purpose this serves, for Jekyll Assets it serves a clear purpose, seeking out an actual asset and building the tag for you, for this, it seems to be encapsulating what you can already do with <img> like Rails (and dully note, I never liked Rails helpers like this either.)

[parkr]

Hey @ashmaroli! I think I'm also unclear on the motivation here. Having used a number of Rails helpers that do this, I always found that I was better off just hand-writing the template. I don't think we're doing anything too special here that a user would find very annoying to do over and over again.

The thing that is useful/novel is that you pass just a URL and you get full HTML for whatever it is you are pointing to. Of course, the want for more and more options to modify parameters will be a bummer for this feature. What do you think?

[ashmaroli]

Oi.. sadly, I do not have a concrete motivation to row against the unanimous tide against this PR.
I simply added these coz:

• I liked how Shopify had similar custom filters to be used in their templates.
• I liked how you could pass a URL string and get a valid complete HTML tag outputted.
• Regarding the image_tag filter, not many know that an alt attribute is as important as an src attrib. So this filter adds that tag (albeit empty by default). In my experience, I've seen that for responsive web designs, its best to have height set to auto to maintain w:h ratio. Some users have it either hard-coded in HTML and then modified by CSS.
• Some users include an unnecessary type="text/javascript" attrib for a HTML5 template. The script_tag sort of normalizes that behaviour.
• The stylesheet_tag is included for completion.. The chances of our templates including multiple link tags are very minimal since we support sass partials.

[parkr]

I don't want to go down the road for having a special filter for every conceivable HTML tag. People are going to want options so you can specify certain attributes, etc, and that is just a lot of bloat we don't need in core. Feel free to ship as a plugin though, as always. ❤️