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

Feature Request: Support for srcset attribute in Static CDN Filters #660

Closed
omriamos opened this Issue Jan 26, 2016 · 8 comments

Comments

Projects
None yet
5 participants
@omriamos

omriamos commented Jan 26, 2016

Hi,

ZenCache's Static CDN Filters works great within my site, beside one issue - I'm using the 'srcset' parameter in the tags in order to set a different image src for each screen size, and the filter changed only the first "src=" parameter but none of the "srcset=" parameters...

For example:
<img class="alignnone wp-image-86011" src="//cdn.hwzone.co.il/wp-content/uploads/2016/01/1-1.jpg?iv=1" alt="" width="1920" height="1157" srcset="//hwzone.co.il/wp-content/uploads/2016/01/1-1-300x181.jpg 300w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-768x463.jpg 768w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-1024x617.jpg 1024w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-600x362.jpg 600w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-696x420.jpg 696w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-1068x644.jpg 1068w, //hwzone.co.il/wp-content/uploads/2016/01/1-1-697x420.jpg 697w, //hwzone.co.il/wp-content/uploads/2016/01/1-1.jpg 3882w" sizes="(max-width: 1920px) 100vw, 1920px">

Note how the "src=" has turned into the cdn subdomain, while the "srcset=" hasn't.

This is not a critical issue since obviously it still works - but nevertheless if there is a possible fix for this - it'll great :)

thanks

@raamdev raamdev changed the title from ZenCache's Static CDN Filters to Feature Request: Support for srcset attribute in Static CDN Filters Jan 27, 2016

@raamdev

This comment has been minimized.

Member

raamdev commented Jan 27, 2016

@omriamos Thank you for the feature request. :-)


This article provides an overview of the how and why of the srcset attribute:

http://www.sitepoint.com/responsive-images-part-1-using-srcset/

And here's some official docs:

https://www.w3.org/html/wg/drafts/html/master/semantics.html#introduction-3:device-pixel-ratio-2

Note that this is for HTML 5.1 and the above link is to the W3C Working Draft 08 October 2015.

cc @jaswsinc

@jaswrks

This comment has been minimized.

Member

jaswrks commented Jun 27, 2016

Also requested here. Referencing internal/private ticket.
https://websharks.zendesk.com/agent/tickets/13167

@raamdev raamdev added this to the Future Release milestone Jun 28, 2016

@raamdev raamdev modified the milestones: Next Release, Future Release Aug 24, 2016

@raamdev raamdev modified the milestones: Next Release, Future Release Oct 7, 2016

@YearOfBenj

This comment has been minimized.

YearOfBenj commented Oct 14, 2016

+1, this is preventing almost all my site's images from being served via CDN. The only ones that are being served by CDN are bugs where I wasn't properly offering high-dpi image srcsets. ;)

@raamdev

This comment has been minimized.

Member

raamdev commented Oct 15, 2016

@jaswsinc Could I please get a time estimate on this when you get a chance?

@jaswrks

This comment has been minimized.

Member

jaswrks commented Oct 17, 2016

Referencing filters in this function:
https://developer.wordpress.org/reference/functions/wp_calculate_image_srcset/

Estimate at 1 day of work to add support for this new feature in WP core.

@YearOfBenj

This comment has been minimized.

YearOfBenj commented Nov 4, 2016

Seems this is the future-looking direction of the web, and these high-density (i.e. bigger) images would benefit from CDN caching more than any!

@jaswrks jaswrks referenced this issue Dec 8, 2016

Merged

PR: feature/660 #302

jaswrks pushed a commit to websharks/comet-cache-pro that referenced this issue Dec 8, 2016

jaswsinc

jaswrks pushed a commit to websharks/comet-cache-pro that referenced this issue Dec 8, 2016

jaswsinc
- **Static CDN Filters (`srcset`):** This release enhances Static CDN…
… Filters in Comet Cache Pro. Static CDN Filters are now smart enough to filter all image sources included in an `srcset=""` attribute that is generated by WordPress. See [Issue #660](websharks/comet-cache#660). If you'd like to learn more about `srcset=""`, see [this article at WordPress.org](https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/).
@renzms

This comment has been minimized.

renzms commented Dec 15, 2016

@raamdev @jaswsinc

Confirmed Working

srcset= also includes CDN Host Name configured in Comet Cache Pro → Plugin Options →Static CDN Filters

src="https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif.png?iv=2"

srcset="https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif.png?iv=2 1600w

Full HTML:

<img class="alignnone wp-image-38 size-full" src="https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif.png?iv=2" width="1600" height="666" srcset="https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif.png?iv=2 1600w, https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif-300x125.png?iv=2 300w, https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif-768x320.png?iv=2 768w, https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif-1024x426.png?iv=2 1024w, https://js9dgjsl4llqpp.cloudfront.net/wp-content/uploads/2016/12/troopers-en-Scarif-1200x500.png?iv=2 1200w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px">

raamdev added a commit that referenced this issue Dec 21, 2016

Phing release of v161221 with the following changes:
- **Bug Fix:** Improving PHP OPcache detection. Now considering the INI option `opcache.restrict_api`. Comet Cache is now smart enough to avoid generating the PHP Warning: _PHP Warning: Zend OPcache API is restricted by "restrict_api" configuration directive_. See [Issue #733](#733).
- **New Feature (Pro): Mobile Mode.** This release adds a new feature that is designed to improve compatibility with Adaptive themes for mobile devices. To learn more, please see: **Dashboard → Comet Cache Pro → Plugin Options → Mobile Mode**. See also: [Issue #471](#471).
- **Enhancement: Auto-Clearing Author Page Cache.** This release makes Comet Cache smart enough to detect when a user is deleted (or removed from a child blog in a Network), at which time the Author page for that user will be cleared from the cache so it can be regenerated automatically. See [Issue #304](#304).
- **Enhancement: Multibyte Compatibility.** This release improves support for WordPress Permalinks that contain UTF-8 symbols (or emojis) in them. More specifically, this release adds the `/u` flag to all `preg_*()` calls in cache clearing routines that generate cache paths from Watered-Down Regex patterns entered by a site owner. See: [Issue #611](#611).
- **Enhancement: Widget Change Detection.** Comet Cache can now detect when **Appearance → Widgets** are added/edited/removed, and Comet Cache will automatically clear the cache so that your site remains up-to-date. See [Issue #411](#411).
- **Enhancement (Pro): Static CDN Filters and `srcset`.** This release enhances Static CDN Filters in Comet Cache Pro. Static CDN Filters are now smart enough to filter all image sources included in an `srcset=""` attribute that is generated by WordPress. See [Issue #660](#660). If you'd like to learn more about `srcset=""`, see [this article at WordPress.org](https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/).
- **Enhancement (Pro): Automatic Background Updates.** It is now possible to enable automatic background updates that occur quietly in the background whenever new features, bug fixes, or security issues are addressed by our developers. See: **Dashboard → Comet Cache Pro → Config. Options → Update Credentials**. See also: [Issue #827](#827).
- **Enhancement (Pro): HTML Compressor + Accelerated Mobile Pages (AMP).** Updated to the latest available release of the HTML Compressor (v161208) with improved support for [Accelerated Mobile Pages](https://www.ampproject.org/). See: [Issue #695](#695). See also: [HTML Compressor v161208 changelog](https://github.com/websharks/html-compressor/releases/tag/161208).
- **Enhancement (Pro): HTML Compressor / AMP Compatibility.** Improved compatibility with [Accelerated Mobile Pages](https://www.ampproject.org/). There is a new HTML Compressor option that is enabled by default and it makes Comet Cache smart enough to auto-detect and selectively disable portions of the HTML Compressor that are incompatible with the AMP spec; i.e., routines that are not necessary when serving APMd pages. In short, if the URI being compressed ends with `/amp/`, or the document contains a top-level `<html ⚡>` tag (`<html amp>` is accepted as well), then features which are incompatible with [Accelerated Mobile Pages](https://www.ampproject.org/) will be disabled accordingly.
- **Compatibility:** Avoid deprecated `wp_get_sites()` and use `get_sites()` instead. See [Issue #848](#848).
- **Documentation:** Added Watered-Down Regex documentation notes to the inline documentation (in the software) about the use of `^` and `$` in some places where these special characters are not fully supported. Also adding the same notes to the [Watered-Down Regex KB Article](https://cometcache.com/r/watered-down-regex-syntax/). See also: [Issue #611](#611).
@raamdev

This comment has been minimized.

Member

raamdev commented Dec 21, 2016

Comet Cache v161221 has been released and includes changes from this GitHub Issue. See the v161221 announcement for further details.


This issue will now be locked to further updates. If you have something to add related to this GitHub Issue, please open a new GitHub Issue and reference this one (#660).

@raamdev raamdev closed this Dec 21, 2016

@websharks websharks locked and limited conversation to collaborators Dec 21, 2016

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