Skip to content

Commit

Permalink
add retina image thumbnails to mediabundle
Browse files Browse the repository at this point in the history
  • Loading branch information
FVKVN committed Jan 14, 2016
1 parent d2195c0 commit a351f1a
Show file tree
Hide file tree
Showing 41 changed files with 5,354 additions and 5 deletions.
8 changes: 7 additions & 1 deletion Resources/config/liip_imagine.yml
Expand Up @@ -7,7 +7,13 @@ liip_imagine:
media_list_thumbnail:
quality: 75
filters:
thumbnail: { size: [210, 150], mode: inset }
thumbnail: { size: [210, 150], mode: outbound }
relative_resize: { widen: 210 }
media_list_thumbnail_retina:
quality: 85
filters:
thumbnail: { size: [420, 300], mode: outbound }
relative_resize: { widen: 420 }
media_detail_thumbnail:
quality: 75
filters:
Expand Down
43 changes: 43 additions & 0 deletions Resources/ui/vendor_bower/picturefill/.bower.json
@@ -0,0 +1,43 @@
{
"name": "picturefill",
"repo": "scottjehl/picturefill",
"description": "A polyfill for responsive images (http://picture.responsiveimages.org/) that you can use today.",
"main": "dist/picturefill.js",
"scripts": [
"dist/picturefill.js"
],
"license": "MIT",
"homepage": "http://scottjehl.github.com/picturefill/",
"authors": [
"Scott Jehl <scottjehl@gmail.com>"
],
"moduleType": [
"amd",
"globals",
"node"
],
"keywords": [
"picture",
"srcset",
"polyfill"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"perf-test"
],
"version": "3.0.1",
"_release": "3.0.1",
"_resolution": {
"type": "version",
"tag": "3.0.1",
"commit": "87597fca6842c7df9e4f16da3ffda89ccf2351b6"
},
"_source": "git://github.com/scottjehl/picturefill.git",
"_target": "~3.0.1",
"_originalSource": "picturefill"
}
43 changes: 43 additions & 0 deletions Resources/ui/vendor_bower/picturefill/Authors.txt
@@ -0,0 +1,43 @@
External authors, ordered by first contribution.

David Beesley, @davebeesley
Gordon Brander, @gordonbrander
Max Klenk, @maxklenk
@ignasio
Dennis Gaebel, @grayghostvisuals
@codekipple
@jelmerdemaat
Brandon Belvin, @pizzabrandon
Jonathan Goldsmith, @goldsmith
Aaron Raimist, @aaronraimist
@floriangouy
John Albin Wilkins, @JohnAlbin
Maxime Thirouin, @MoOx
William Turrell, @wturrell
Brian Muenzenmeyer, @bmuenzenmeyer
Bryan Burgers, @bryanburgers
@michaelgilley
Tina Holly, @tinacious
Travis Northcutt, @tnorthcutt
@Zearin
Samy Al Zahrani, @salzhrani
Shawn Jansepar, @jansepar
John Bender, @johnbender
Thorsten Lorenz, @thlorenz
@gBokiau
Andy Matthews, @commadelimited
James Kerr, @jkerr838
Pascal Borreli, @pborreli
Christoph Rohrer, @crohrer
Krister Kari, @kristerkari
Zoltan Hawryluk, @zoltan-dulac

The Picturefill core team

Scott Jehl, @scottjehl
Mat Marquis, @wilto
Mike Engel, @beardfury
Alex Jegtnes, @jegtnes
Sarah Forst, @quoo
Alexander Farkas, @aFarkas
Alex Bell, @albell
60 changes: 60 additions & 0 deletions Resources/ui/vendor_bower/picturefill/CONTRIBUTING.md
@@ -0,0 +1,60 @@
# Contributing

## Project Scope
Picturefill aims to polyfill the standard features of the `picture` element and related `srcset`, `sizes`, `type`, and `media` attributes (some of which work on `img` elements without a `picture` parent as well). Issues and contributions that fall outside of this scope are not likely to be accepted by the project. Some exceptions include workarounds that improve browser support for standard features.

## Code License

Picturefill is an open source project falling under the MIT License. By using, distributing, or contributing to this project, you accept and agree that all code within the Picturefill project are licensed under MIT license.

## Working on Picturefill

### Issue Discussion

General Picturefill discussion takes place in Slack, at [http://picturefill.slack.com](http://picturefill.slack.com). To join, send an email to `picturefill` at `ricg.io`. Discussion of issues pertaining to the responsive images specifications takes place in the [RICG IRC channel](irc://irc.w3.org:6665/#respimg) and [issue tracker](https://github.com/responsiveimagescg/picture-element/issues/).

You can connect to the Picturefill Slack channel [via IRC](https://slack.zendesk.com/hc/en-us/articles/201727913-Connecting-to-Slack-over-IRC-and-XMPP) (SSL enabled).

### Modifying the code
First, ensure that you have the latest [Node.js](http://nodejs.org/) or [io.js](http://iojs.org) and [npm](http://npmjs.org/) installed.

Test that Grunt's CLI is installed by running `grunt --version`. If the command isn't found, run `npm install -g grunt-cli`. For more information about installing Grunt, see the [getting started guide](http://gruntjs.com/getting-started).

1. Fork and clone the repo.
1. Run `npm install` to install all dependencies (including Grunt).
1. Run `grunt` to grunt this project.

Assuming that you don't see any red, you're ready to go. Just be sure to run `grunt` after making any changes, to ensure that nothing is broken.

### Development Workflow

**Note**: The `master` branch now represents the publishing branch. Anything on master should be publishable to npm and bower. When something goes into master, it gets published. Minor version branches (`2.2`, `2.3`, etc) also exist to capture in-progress work on a particular version of picturefill. Once work on a version branch is complete, it gets merged into master to be published.

1. If no issue already exists for the work you’ll be doing, create one to document the problem(s) being solved and self-assign.
1. Create a new branch based off of the minor version branch you're fixing (`2.3`, `2.2`, etc) — please don't work in the `master` branch directly. We recommend naming the branch to match the issue being addressed (`issue-777`).
1. Add failing tests for the change you want to make. Run `grunt` to see the tests fail.
1. Fix stuff.
1. Run `grunt` to see if the tests pass. Repeat steps 2-4 until done.
1. Open `test/*.html` unit test file(s) in actual browsers to ensure tests pass everywhere.
1. Update the documentation to reflect any changes.
1. Push to your fork or push your issue-specific branch to the main repo, then submit a pull request against the minor version branch you're fixing. `2.2`, `2.3`, etc.
1. Once tested and +1’d by another team member (with no outstanding objections), self-merge into the branch specified in the pull request.
1. Once ready to release to the public, merge the minor version branch into master and publish to npm and create a tag for bower.

### Versioning

The rules of [semver](http://semver.org/) don’t necessarily apply here in the case of major releases (as a polyfill for a stable spec, we _shouldn’t_ have breaking changes), so we’re using the following:

1. MAJOR versions at maintaners’ discretion following significant changes to the codebase (e.g. refactoring core)
1. MINOR versions for backwards-compatible enhancements (e.g. performance improvements)
1. PATCH versions for backwards-compatible bug fixes (e.g. spec compliance bugs, support issues)

### Important notes

Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory!

#### Code style
Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**

#### PhantomJS
While Grunt can run the included unit tests via [PhantomJS](http://phantomjs.org/), this shouldn't be considered a substitute for the real thing. Please be sure to test the `test/*.html` unit test file(s) in _actual_ browsers.
21 changes: 21 additions & 0 deletions Resources/ui/vendor_bower/picturefill/LICENSE
@@ -0,0 +1,21 @@
The MIT License (MIT)

Copyright (c) 2014 Filament Group

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
53 changes: 53 additions & 0 deletions Resources/ui/vendor_bower/picturefill/README.md
@@ -0,0 +1,53 @@
# Picturefill
A [responsive image](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content) polyfill.
* Authors: See [Authors.txt](https://raw.githubusercontent.com/scottjehl/picturefill/master/Authors.txt)
* License: MIT

[![build-status](https://api.travis-ci.org/scottjehl/picturefill.svg)](https://travis-ci.org/scottjehl/picturefill) [<img src="https://pf-slackin.herokuapp.com/badge.svg" alt="Join Slack channel">](https://pf-slackin.herokuapp.com/)

Picturefill has three versions:

* Version 1 mimics the Picture element pattern with `span` elements. It is no longer maintained.
* Version 2 is a lightweight polyfill of the [Picture element draft specification](http://www.whatwg.org/specs/web-apps/current-work/multipage/embedded-content.html#embedded-content).
* Version 3.0.0 is the current stable release.

## Usage, Demos, Docs
To find out how to use Picturefill, visit the [project site](http://scottjehl.github.com/picturefill/).

## The gotchas
Be it browser issues, the responsive images specifications, or Picturefill itself, there are a couple gotchas you should be aware of when working with Picturefill:

- Firefox 38 and 39 has some bugs [[1]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139560) [[2]](https://bugzilla.mozilla.org/show_bug.cgi?id=1139554) [[3]](https://bugzilla.mozilla.org/show_bug.cgi?id=1135812) where images won't update on screen resize. These issues are addressed by Picturefill 3.0.0, and should be fixed in Firefox 41.

- Per the `picture` spec, using `%` _isn't_ allowed in the `sizes` attribute. Using `%` will fallback to `100vw`.

- Trying to use the `src` attribute in a browser that _doesn't_ support `picture` natively can result in a double download. To avoid this, don't use the `src` attribute on the `img` tag:

```html
<picture>
<source srcset="../img/sample.svg" media="(min-width: 768px)" />
<img srcset="default.png" alt="Sample pic" />
</picture>
```

- If you only want to have an image show up at certain sizes, and not show up at others, you will need to use a transparent placeholder gif:

```html
<picture>
<source srcset="../img/sample.svg" media="(min-width: 768px)" />
<img srcset="data:image/gifbase64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
alt="Sample pic" />
</picture>
```

## Contributing
For information on how to contribute code to Picturefill, check out [`CONTRIBUTING.md`](CONTRIBUTING.md)

## Issues
If you find a bug in Picturefill, please add it to [the issue tracker](https://github.com/scottjehl/picturefill/issues)

## Discussion
Picturefill discussion takes place via Slack. For an invitation, visit [https://pf-slackin.herokuapp.com/](https://pf-slackin.herokuapp.com/)

## Support
There are currently no known unsupported browsers, provided that you use the markup patterns provided.
33 changes: 33 additions & 0 deletions Resources/ui/vendor_bower/picturefill/bower.json
@@ -0,0 +1,33 @@
{
"name": "picturefill",
"repo": "scottjehl/picturefill",
"description": "A polyfill for responsive images (http://picture.responsiveimages.org/) that you can use today.",
"main": "dist/picturefill.js",
"scripts": [
"dist/picturefill.js"
],
"license": "MIT",
"homepage": "http://scottjehl.github.com/picturefill/",
"authors": [
"Scott Jehl <scottjehl@gmail.com>"
],
"moduleType": [
"amd",
"globals",
"node"
],
"keywords": [
"picture",
"srcset",
"polyfill"
],
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"examples",
"perf-test"
]
}
18 changes: 18 additions & 0 deletions Resources/ui/vendor_bower/picturefill/composer.json
@@ -0,0 +1,18 @@
{
"name": "scottjehl/picturefill",
"description": "A responsive image polyfill for <picture>, srcset, sizes, and more.",
"type": "component",
"homepage": "http://scottjehl.github.com/picturefill/",
"license": "MIT",
"extra": {
"component": {
"scripts": [
"dist/picturefill.js"
],
"files": [
"dist/picturefill.min.js",
"extensions/ie8-mq-shim.js"
]
}
}
}

0 comments on commit a351f1a

Please sign in to comment.