-
Notifications
You must be signed in to change notification settings - Fork 105
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
Massive Rewrite and Update #88
Merged
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Remember to delete before merging into master
I didn't want to break the existing API, but now I think it will be necessary for the sake of sanity. I'll set reasonable defaults, so the plugin is useful without any configuration at all (except possibly the destination folder) Global picturetag settings will live in _config.yml, as before. Presets will live in _data/picture.yml. Souces will be listed under the sources key, rather than inline with preset settings, and will lose the 'source_' prefix.
Deleted 'generator' and 'srcset' files. Source inherits from objective elements' SingleTag, because that's what it is. Generated files belong to a source, and will know their own names, formats, pixel ratios, sizes, and source files. Will handle file generation logic and calls to imagemagick.
The master (PictureTag) class will handle the high level decision making and interfacing with Jekyll. Picture will take PictureTag's instructions and generate the markup. (This involves generating the required sources, which will each generate the files they need.)
Added --parent argument, updated behavior of implicit html attributes to match previous version. Updated relevant documentation.
Extracted most source-file related logic and properties to it. Source files are persisted within a given PictureTag, so expensive operations (such as getting its size and building an MD5 checksum) are only performed once.
Consolidate warning related code in Utils module. Create setting to suppress error messages Set default suppression to false, add related documentation
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Forgive the chaotic commit log.
I'll leave this pull request up for a little while for input, and then merge it into master if there are no objections!
Motivation
Most importantly, I want to thank Rob Wierzbowski and all the original contributors. While the
changes in this version are very extensive, its roots are still based in the purpose and approach of
the original.
Jekyll Picture Tag's last update was in October 2015. While the plugin grew stale, its application
certainly didn't; doing responsive images correctly is still involved, tedious, and tricky, and
there are still a few people out there building Jekyll sites.
Browser adoption of
picture
,source
,srcset
, andsizes
is far better when this plugin wasfirst written. Firefox gained support in May of 2015, Safari in October of 2015, and Edge in october
of 2017. As of November 2018, all major, modern browsers have support and caniuse reports global
compatibility at 88%.
PictureTag's previous versions supported a few javascript solutions, but they didn't do a great job
supporting stock HTML (which, given browser suppport, was the most appropriate decision at the time).
That situation has now changed; standard HTML should be considered its core functionality, while
maintaining the ability to support javascript-based solutions in the future.
Goals
These were the objectives of the rewrite:
image files and their associated markup. In other words, do one thing well.
needing changes made across their entire website.
explicit instruction, do something reasonable.
generates output markup formats, to simplify the addition of new ones.
functions, into something more manageable.
Changes
<picture>
and<img>
. Picturefill, as ofversion 3, no longer requires special markup, so it remains compatible. Other javascript image
solutions are supported with the
data_
selection of markup formats. Interchange support isremoved, though adding it again is not difficult if there is demand for it.
<source>
tags within a<picture>
, and asingle
<img>
tag. If markup is set to 'auto', or if it is not set at all, the plugin willautomatically determine which is most appropriate. These formats also have
data_
counterparts(i.e.
data_auto
), which accomplish the same thing except setting respective data-attributesto allow for lazy loading and such.
multiples (pixel ratios) of the base size.
attribute.
Aspect ratio will always be maintained.
old version, and migrating to it should not be difficult. Instead of creating individual source
keys, you supply an array of widths you'd like to construct. You can also supply an array (yaml
sequence) of formats, including 'original'.
_config.yml
. Presets are moved to_data/picture.yml
.Stats:
Keep in mind that the new version adheres to an 80 character line limit, while the old version had no line limit at all. (There were some whoppers in there!)
Issues Fixed, implemented, or rendered irrelevant:
close #75, close #71, close #68, close #63, close #54, close #52, close #51,
close #26, close #24, close #19, close #13, close #12, close #7, close #6,
close #5