{"id":28798500,"url":"https://github.com/rriemann/jekyll-flickr","last_synced_at":"2025-06-29T13:03:00.052Z","repository":{"id":56878562,"uuid":"128633368","full_name":"rriemann/jekyll-flickr","owner":"rriemann","description":"Liquid tag for responsive Flickr images using HTML5 srcset.","archived":false,"fork":false,"pushed_at":"2024-01-01T15:13:54.000Z","size":15,"stargazers_count":4,"open_issues_count":1,"forks_count":3,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-23T00:53:52.989Z","etag":null,"topics":["flickr","flickr-api","flickr-photos","jekyll","jekyll-plugin","liquid-tag"],"latest_commit_sha":null,"homepage":null,"language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rriemann.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-08T11:18:48.000Z","updated_at":"2023-05-03T08:54:37.000Z","dependencies_parsed_at":"2024-01-01T16:25:17.997Z","dependency_job_id":"461fced3-f4a0-4b99-8d9b-4b24bba07939","html_url":"https://github.com/rriemann/jekyll-flickr","commit_stats":{"total_commits":13,"total_committers":3,"mean_commits":4.333333333333333,"dds":"0.15384615384615385","last_synced_commit":"d9d5fd60dec924f0095a58a3a46f628afe862fe4"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/rriemann/jekyll-flickr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rriemann%2Fjekyll-flickr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rriemann%2Fjekyll-flickr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rriemann%2Fjekyll-flickr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rriemann%2Fjekyll-flickr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rriemann","download_url":"https://codeload.github.com/rriemann/jekyll-flickr/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rriemann%2Fjekyll-flickr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260497443,"owners_count":23018240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flickr","flickr-api","flickr-photos","jekyll","jekyll-plugin","liquid-tag"],"created_at":"2025-06-18T05:39:31.702Z","updated_at":"2025-06-29T13:03:00.016Z","avatar_url":"https://github.com/rriemann.png","language":"Ruby","readme":"# Jekyll::Flickr\n\n[![Gem Version](https://badge.fury.io/rb/jekyll-flickr.svg)](https://badge.fury.io/rb/jekyll-flickr)\n\nLiquid tag for responsive [Flickr] images using [HTML5 srcset](http://alistapart.com/article/responsive-images-in-practice): `{% flickr %}`.\n\n## Installation\n\nAdd this line to your application's Gemfile:\n\n    $ gem 'jekyll-flickr'\n\nAnd then execute:\n\n    $ bundle\n\nOr install it yourself as:\n\n    $ gem install jekyll-flickr\n\nThen add the following to your site's `_config.yml`:\n\n```yaml\nplugins:\n  - jekyll-flickr\n```\n\n💡 If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.\n\nYou 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`:\n\n```yml\nflickr:\n  api_key: \u003cflickr_api_key\u003e\n  api_secret: \u003cflickr_shared_secret\u003e\n```\n\n💡 API requests are cached in `.jekyll-cache/flickr` for faster builds.\n\n## Usage\n\nUse the tag as follows in your Jekyll pages, posts and collections:\n\n```liquid\n{% flickr photo_id \"Caption\" img_attributes %}\n```\n- The `photo_id` is required and determines the photo from Flickr. In the URL \u003chttp://alistapart.com/article/responsive-images-in-practice\u003e, the photo_id is the number in the path after the author (here also a number), i.e. `38285149681`.\n- The `Caption` is optional and must be enclosed by double quotation marks. So far, double quotation marks in captions are not supported.\n- The `img_attributes` are any optional text that will be included in the `\u003cimg\u003e` tag.\n\nExample:\n\n```liquid\n{% flickr 38285149681 \"My favourite photo of the month.\" style=\"float: right;\" %}\n```\n\nThis will create the following HTML output:\n\n```html\n\u003cfigure\u003e\n  \u003cimg src=\"https://farm5.staticflickr.com/4570/38285149681_f7323259a3_c.jpg\" srcset=\"https://farm5.staticflickr.com/4570/38285149681_f7323259a3_n.jpg 320w, https://farm5.staticflickr.com/4570/38285149681_f7323259a3_z.jpg 640w, https://farm5.staticflickr.com/4570/38285149681_f7323259a3_c.jpg 800w, https://farm5.staticflickr.com/4570/38285149681_f7323259a3_b.jpg 1024w, https://farm5.staticflickr.com/4570/38285149681_2436f15109_h.jpg 1600w\" sizes=\"100vw\" style=\"float: right;\" alt=\"My favourite photo of the month.\"\u003e\n  \u003cfigcaption\u003e\n    \u003cdiv class=\"caption\"\u003eMy favourite photo of the month.\u003c/div\u003e\n    \u003cdiv class=\"license\"\u003e\n      © Flickr/\u003ca href=\"https://www.flickr.com/photos/140750848@N04/38285149681/\"\u003emoulichoudari\u003c/a\u003e\n      \u003ca href=\"https://creativecommons.org/licenses/by/2.0/\"\u003eCC Attribution License\u003c/a\u003e\n    \u003c/div\u003e\n  \u003c/figcaption\u003e\n\u003c/figure\u003e\n```\n\n## Configuration\n\n```yml\nflickr:\n  api_key: \u003cflickr_api_key\u003e\n  api_secret: \u003cflickr_shared_secret\u003e\n  widths: [320, 640, 800, 1024, 1600]\n  width_legacy: 1024\n  width_viewport: 100vw\n  figcaption: true\n  license: true\n  caption: true\n```\n\nThe 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.\n\nThe 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)\n\n## TODO\n\n- add option to enable a link from the image to the Flickr photo page or just a larger version of the image\n- allow more control on cache expiration\n- allow for custom templates globally configured\n- allow for templates per tag via some arguments\n- block version (`Liquid::Block`) that allows to enclosure the caption\n- use a more sophisticated RegExp to allow for captions with quotation marks\n- privacy mode: download images to build to not require user requests to Flickr servers\n\n## Similar Projects\n\n- [jekyll-flickresponsive.rb](https://gist.github.com/mikka2061/e8ddb2566d90b00f990d6a39b0fd1346) using the `\u003cpicture\u003e` tag for responsive images.\n- \u003chttps://github.com/j0k3r/jekyll-flickr-photoset\u003e\n- \u003chttps://github.com/cnunciato/jekyll-flickr\u003e\n- \u003chttps://github.com/lawmurray/indii-jekyll-flickr\u003e\n- \u003chttps://github.com/tsmango/jekyll_flickr_set_tag\u003e\n\n\n## Contributing\n\n1. Fork it ( https://github.com/rriemann/jekyll-flickr/fork )\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create a new Pull Request\n\n\n[Flickr]: https://www.flickr.com/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frriemann%2Fjekyll-flickr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frriemann%2Fjekyll-flickr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frriemann%2Fjekyll-flickr/lists"}