https://github.com/rriemann/jekyll-flickr
Liquid tag for responsive Flickr images using HTML5 srcset.
https://github.com/rriemann/jekyll-flickr
flickr flickr-api flickr-photos jekyll jekyll-plugin liquid-tag
Last synced: 8 months ago
JSON representation
Liquid tag for responsive Flickr images using HTML5 srcset.
- Host: GitHub
- URL: https://github.com/rriemann/jekyll-flickr
- Owner: rriemann
- License: mit
- Created: 2018-04-08T11:18:48.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-01-01T15:13:54.000Z (about 2 years ago)
- Last Synced: 2025-05-23T00:53:52.989Z (10 months ago)
- Topics: flickr, flickr-api, flickr-photos, jekyll, jekyll-plugin, liquid-tag
- Language: Ruby
- Size: 14.6 KB
- Stars: 4
- Watchers: 2
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Jekyll::Flickr
[](https://badge.fury.io/rb/jekyll-flickr)
Liquid tag for responsive [Flickr] images using [HTML5 srcset](http://alistapart.com/article/responsive-images-in-practice): `{% flickr %}`.
## Installation
Add this line to your application's Gemfile:
$ gem 'jekyll-flickr'
And then execute:
$ bundle
Or install it yourself as:
$ gem install jekyll-flickr
Then add the following to your site's `_config.yml`:
```yaml
plugins:
- jekyll-flickr
```
💡 If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.
You must further provide two [Flickr API credentials](https://www.flickr.com/services/api/keys/). You can either use environment variables `FLICKR_API_KEY` and `FLICKR_API_SECRET` or the `_config.yml`:
```yml
flickr:
api_key:
api_secret:
```
💡 API requests are cached in `.jekyll-cache/flickr` for faster builds.
## Usage
Use the tag as follows in your Jekyll pages, posts and collections:
```liquid
{% flickr photo_id "Caption" img_attributes %}
```
- The `photo_id` is required and determines the photo from Flickr. In the URL , the photo_id is the number in the path after the author (here also a number), i.e. `38285149681`.
- The `Caption` is optional and must be enclosed by double quotation marks. So far, double quotation marks in captions are not supported.
- The `img_attributes` are any optional text that will be included in the `![]()
` tag.
Example:
```liquid
{% flickr 38285149681 "My favourite photo of the month." style="float: right;" %}
```
This will create the following HTML output:
```html
My favourite photo of the month.
```
## Configuration
```yml
flickr:
api_key:
api_secret:
widths: [320, 640, 800, 1024, 1600]
width_legacy: 1024
width_viewport: 100vw
figcaption: true
license: true
caption: true
```
The Flickr API provides images in a [number of sizes](https://www.flickr.com/services/api/flickr.photos.getSizes.html) (e.g. 75, 150, 100, 240, 320, 500, 640, 1024, 3648). The `widths` allows to filter for sizes to be included in the `srcset` attribute. The size `width_legacy` chosen from the supported sizes is used by [browsers with no support](https://caniuse.com/#feat=srcset) for the `srcset` attribute.
The configuration option `width_viewport` allows to define the occupying width of the photos. It is used to set the `sizes` attribute. [More Information](http://alistapart.com/article/responsive-images-in-practice)
## TODO
- add option to enable a link from the image to the Flickr photo page or just a larger version of the image
- allow more control on cache expiration
- allow for custom templates globally configured
- allow for templates per tag via some arguments
- block version (`Liquid::Block`) that allows to enclosure the caption
- use a more sophisticated RegExp to allow for captions with quotation marks
- privacy mode: download images to build to not require user requests to Flickr servers
## Similar Projects
- [jekyll-flickresponsive.rb](https://gist.github.com/mikka2061/e8ddb2566d90b00f990d6a39b0fd1346) using the `` tag for responsive images.
-
-
-
-
## Contributing
1. Fork it ( https://github.com/rriemann/jekyll-flickr/fork )
2. Create your feature branch (`git checkout -b my-new-feature`)
3. Commit your changes (`git commit -am 'Add some feature'`)
4. Push to the branch (`git push origin my-new-feature`)
5. Create a new Pull Request
[Flickr]: https://www.flickr.com/