New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create an ImageTagHelper that supports globbed src paths and cache-busting file version URL hash #2249

Closed
DamianEdwards opened this Issue Mar 24, 2015 · 13 comments

Comments

Projects
None yet
4 participants
@DamianEdwards
Member

DamianEdwards commented Mar 24, 2015

This is equivalent to the existing Tag Helpers for <script> and <link> but for <img> elements.

e.g.:

<!-- Globbed images, will render a separate image tag for each matched path -->
<img asp-src-include="images/thumbs/@Model.ProductId/*.jpg" alt="Some alt text" />

<!-- File version/fingerprint, will add a file version to the URL to aid in cache busting  -->
<img src="~/images/site-banner.png" alt="Site banner" asp-file-version="true" />
@Eilon

This comment has been minimized.

Show comment
Hide comment
@Eilon

Eilon Mar 26, 2015

Member

Moved to backlog.

Member

Eilon commented Mar 26, 2015

Moved to backlog.

@dpaquette

This comment has been minimized.

Show comment
Hide comment
@dpaquette

dpaquette May 6, 2015

Contributor

+1 on this, especially the cache-busting

Contributor

dpaquette commented May 6, 2015

+1 on this, especially the cache-busting

@dougbu

This comment has been minimized.

Show comment
Hide comment
@dougbu

dougbu May 6, 2015

Member

@dpaquette FYI this should be a tag helper you could write for your own use, pulling what you want from the <link/> or <script/> tag helpers. Or feel free to submit a PR for this issue.

Member

dougbu commented May 6, 2015

@dpaquette FYI this should be a tag helper you could write for your own use, pulling what you want from the <link/> or <script/> tag helpers. Or feel free to submit a PR for this issue.

@dpaquette

This comment has been minimized.

Show comment
Hide comment
@dpaquette

dpaquette May 6, 2015

Contributor

@dougbu A PR is a great idea. I think I will do that

Contributor

dpaquette commented May 6, 2015

@dougbu A PR is a great idea. I think I will do that

@Eilon

This comment has been minimized.

Show comment
Hide comment
@Eilon

Eilon May 7, 2015

Member

@dpaquette @DamianEdwards @dougbu I'm wondering what the scenario is for an <img> tag helper to support globbing. I totally get it for JS and CSS because you quite often want to include an entire folder or set of files. But for images, when does that happen? Images almost always have additional chrome around them (labels, links, onclick handlers, etc.).

Member

Eilon commented May 7, 2015

@dpaquette @DamianEdwards @dougbu I'm wondering what the scenario is for an <img> tag helper to support globbing. I totally get it for JS and CSS because you quite often want to include an entire folder or set of files. But for images, when does that happen? Images almost always have additional chrome around them (labels, links, onclick handlers, etc.).

@dpaquette

This comment has been minimized.

Show comment
Hide comment
@dpaquette

dpaquette May 7, 2015

Contributor

I was struggling to think of a good use case for globbing. I am curious what @DamianEdwards had in mind.

I mostly just wanted the cache busting feature.

Contributor

dpaquette commented May 7, 2015

I was struggling to think of a good use case for globbing. I am curious what @DamianEdwards had in mind.

I mostly just wanted the cache busting feature.

@DamianEdwards

This comment has been minimized.

Show comment
Hide comment
@DamianEdwards

DamianEdwards May 7, 2015

Member

It was honestly more of a "why not". I was thinking of really basic stuff like just render all the images that match this pattern, but that would almost never be truly useful for the reasons @Eilon points out.

That said, with the advent of the <picture> element and srcset, this could actually be useful if we made it also generate the relevant dimensions in the media attribute and/or the expanded viewport pixel density notation in the srcset attribte for each matched file. See https://html.spec.whatwg.org/multipage/embedded-content.html for examples of what I mean.

E.g. of srcset expansion with an potential syntax for an inline matched string formatting ({*:0w})

<!-- Source CSHTML -->
<img sizes="100vw" asp-srcset-include="images/wolf-{*:0w}.jpg" alt="The rad wolf" />

<!-- Output HTML -->
<img sizes="100vw" srcset="/images/wolf-400.jpg 400w, /images/wolf-800.jpg 800w, /images/wolf-1600.jpg 1600w" src="/images/wolf-400.jpg" alt="The rad wolf" />

E.g. of <picture> expansion

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is only really scratching the surface of <picture> and adaptive images however and thus warrants a much deeper investigation of what a really useful img and/or picture Tag Helper would look like.

It would potentially also benefit greatly from work we intend to do in Razor v5 (after ASP.NET 5) to enable Tag Helpers to participate in code generation. Imagine if you will that second example written like this instead, using fields that were generated by the <picture> Tag Helper in other attributes of the element (_item and _matches in this case):

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*" asp-source-type="@_item.MimeType"
         asp-img-src="@_matches.FirstOrDefault()?.Path"
         asp-img-src-width="@_matches.FirstOrDefault()?.Width"
         asp-img-src-height="@_matches.FirstOrDefault()?.Height"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is just a crazy idea, but it's interesting I think, and shows some of the further potential of Tag Helpers beyond the current version.

Member

DamianEdwards commented May 7, 2015

It was honestly more of a "why not". I was thinking of really basic stuff like just render all the images that match this pattern, but that would almost never be truly useful for the reasons @Eilon points out.

That said, with the advent of the <picture> element and srcset, this could actually be useful if we made it also generate the relevant dimensions in the media attribute and/or the expanded viewport pixel density notation in the srcset attribte for each matched file. See https://html.spec.whatwg.org/multipage/embedded-content.html for examples of what I mean.

E.g. of srcset expansion with an potential syntax for an inline matched string formatting ({*:0w})

<!-- Source CSHTML -->
<img sizes="100vw" asp-srcset-include="images/wolf-{*:0w}.jpg" alt="The rad wolf" />

<!-- Output HTML -->
<img sizes="100vw" srcset="/images/wolf-400.jpg 400w, /images/wolf-800.jpg 800w, /images/wolf-1600.jpg 1600w" src="/images/wolf-400.jpg" alt="The rad wolf" />

E.g. of <picture> expansion

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is only really scratching the surface of <picture> and adaptive images however and thus warrants a much deeper investigation of what a really useful img and/or picture Tag Helper would look like.

It would potentially also benefit greatly from work we intend to do in Razor v5 (after ASP.NET 5) to enable Tag Helpers to participate in code generation. Imagine if you will that second example written like this instead, using fields that were generated by the <picture> Tag Helper in other attributes of the element (_item and _matches in this case):

<!-- Source CSHTML -->
<picture asp-source-srcset-include="uploads/*.*" asp-source-type="@_item.MimeType"
         asp-img-src="@_matches.FirstOrDefault()?.Path"
         asp-img-src-width="@_matches.FirstOrDefault()?.Width"
         asp-img-src-height="@_matches.FirstOrDefault()?.Height"></picture>

<!-- Output HTML -->
<picture>
 <source srcset="/uploads/100-marie-lloyd.webp" type="image/webp">
 <source srcset="/uploads/100-marie-lloyd.jxr" type="image/vnd.ms-photo">
 <img src="/uploads/100-marie-lloyd.jpg" alt="" width="100" height="150">
</picture>

This is just a crazy idea, but it's interesting I think, and shows some of the further potential of Tag Helpers beyond the current version.

@Eilon

This comment has been minimized.

Show comment
Hide comment
@Eilon

Eilon May 8, 2015

Member

Thanks, @DamianEdwards, great write-up, but umm, what do we do here? 😄 I'm all for having an ImageTagHelper, but maybe no globbing for now? The rest of it seems terrific.

Member

Eilon commented May 8, 2015

Thanks, @DamianEdwards, great write-up, but umm, what do we do here? 😄 I'm all for having an ImageTagHelper, but maybe no globbing for now? The rest of it seems terrific.

@DamianEdwards

This comment has been minimized.

Show comment
Hide comment
@DamianEdwards

DamianEdwards May 8, 2015

Member

For now why don't we just do a simple image tag helper that supports the cache busting.

Member

DamianEdwards commented May 8, 2015

For now why don't we just do a simple image tag helper that supports the cache busting.

@Eilon

This comment has been minimized.

Show comment
Hide comment
@Eilon

Eilon May 8, 2015

Member

Sounds good to me.

Member

Eilon commented May 8, 2015

Sounds good to me.

@dpaquette

This comment has been minimized.

Show comment
Hide comment
@dpaquette

dpaquette May 8, 2015

Contributor

Sounds good. I will remove the globbing resubmit my PR

Contributor

dpaquette commented May 8, 2015

Sounds good. I will remove the globbing resubmit my PR

@dpaquette

This comment has been minimized.

Show comment
Hide comment
@dpaquette

dpaquette May 8, 2015

Contributor

ImageTagHelper with cache busting is ready to go in PR #2516

Contributor

dpaquette commented May 8, 2015

ImageTagHelper with cache busting is ready to go in PR #2516

@dougbu dougbu closed this in #2516 May 11, 2015

@dougbu dougbu self-assigned this May 11, 2015

@dougbu dougbu added 3 - Done and removed 0 - Backlog labels May 11, 2015

@dougbu dougbu modified the milestones: 6.0.0-beta5, Backlog May 11, 2015

@dougbu

This comment has been minimized.

Show comment
Hide comment
@dougbu

dougbu May 11, 2015

Member

ab4d2ee with thanks to @dpaquette

Member

dougbu commented May 11, 2015

ab4d2ee with thanks to @dpaquette

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment