{"id":13612406,"url":"https://github.com/merlos/jekyll-auto-image","last_synced_at":"2025-06-10T16:05:31.280Z","repository":{"id":27044327,"uuid":"30509498","full_name":"merlos/jekyll-auto-image","owner":"merlos","description":"jekyll plugin that makes available the first image of a post in the template","archived":false,"fork":false,"pushed_at":"2022-06-27T13:22:01.000Z","size":22,"stargazers_count":80,"open_issues_count":1,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-05-15T04:11:23.751Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/merlos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-02-08T23:09:50.000Z","updated_at":"2025-02-10T14:50:52.000Z","dependencies_parsed_at":"2022-08-31T12:13:27.869Z","dependency_job_id":null,"html_url":"https://github.com/merlos/jekyll-auto-image","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlos%2Fjekyll-auto-image","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlos%2Fjekyll-auto-image/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlos%2Fjekyll-auto-image/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlos%2Fjekyll-auto-image/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/merlos","download_url":"https://codeload.github.com/merlos/jekyll-auto-image/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/merlos%2Fjekyll-auto-image/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259106603,"owners_count":22805931,"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":[],"created_at":"2024-08-01T20:00:29.420Z","updated_at":"2025-06-10T16:05:31.231Z","avatar_url":"https://github.com/merlos.png","language":"Ruby","funding_links":[],"categories":["Generators","Ruby"],"sub_categories":[],"readme":"# jekyll-auto-image plugin\n\njekyll plugin that makes available the first image of a post in the template as a variable.\n\nBy installing the plugin you will be able to access the first image of a page through `{{ @page.image }}`.\n\nThis plugin is useful if you want to:\n\n*  Include an image on your list of posts\n*  Set a twitter card image for a post (see example below)\n\n\n# Install\n\nAdd to your Gemfile:\n\n```\ngem 'jekyll-auto-image'\n```\nor run \n\n```\n$ gem install jekyll-auto-image\n```\n\n\nThen, add to your `_config.yml`:\n\n```yaml\ngems:\n  - jekyll-auto-image\n```\n\nThe plugin allows you to set a default image for all pages/posts. To do that, add to your `_config.yml`:\n\n```yaml\n # _config.yml\n\n image: /path/to/your/default/image.png\n```\n\n### Jekyll 3.0\nVersions of jekyll-auto-image \u003e= 1.1.0 are compatible with jekyll 3.0. If you require compatibility with jekyll 2.0 use jekyll-auto-image 1.0.2.\n\n```\n  # Run this command check installed versions\n  $ gem list | grep jekyll\n  jekyll (3.0.1)\n  jekyll-auto-image (1.0.2)\n```\n\n# Usage\n\nIn each post/page, the plugin will set `{{ page.image }}` following this fallback rules:\n\n1. Front matter `image` value\n2. First image in the post/page contents\n3. Default site image (defined in `_config.yml`)\n4. nil\n\nBasically, the plugin will return the front matter image value if set. If it is not set, then it will look for the first image asset that is defined in your post content. If the post does not have any image, then it will set the site.image defined in _config.yml.\n\n\n### Example of usage\n\nExample post 1:\n\n```markdown\n---\nlayout: post\ntitle: Post 1\n---\n\nThis is my example post. It includes an image in the contents.\n\n![first image](/assets/first_image.png)\n\n```\nExample post 2:\n\n```markdown\n---\nlayout: post\ntitle: Post 2\nimage: /assets/front_matter_image.png\n---\n\nThis is my second example post, because the\npost includes the front matter image, the plugin \nwill return it instead of the first image in the \ncontents.\n\n![first image](/assets/first_image.png)\n\n```\n\n#### Template example\n\n```liquid\n{% for post in site.posts %}\ntitle: {{ post.title }}\n\u003cbr\u003e\nimage: {{ post.image }}\n\u003chr\u003e\n```\n\n#### Output HTML Rendered:\n\n```html\ntitle: Post 1\n\u003cbr\u003e\nimage: /assets/first_image.png\n\u003chr\u003e\n\ntitle: Post 2\n\u003cbr\u003e\nimage: /assets/front_matter_image.png\n```\n### Example using twitter cards\n\nAnother use of this plugin is to create a [twitter card](https://dev.twitter.com/cards/getting-started).\n\nYou can define a set of `\u003cmeta\u003e` elements in your `head.html` template, so when sharing a post in twitter, the tweet displays it in cool way. You have more info in [twitter's developers page](https://dev.twitter.com/cards/types)\n\nHere you have a sample:\n\n```html\n \u003c!-- twitter card --\u003e\n  \u003cmeta name=\"twitter:card\" content=\"{% if page.image %}summary_large_image{% else %}summary{% endif %}\"\u003e\n  \u003cmeta name=\"twitter:site\" content=\"@{{ site.twitter_username }}\"\u003e\n  \u003cmeta name=\"twitter:creator\" content=\"@{{ site.twitter_username }}\"\u003e\n  \u003cmeta name=\"twitter:title\" content=\"{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}\"\u003e\n  \u003cmeta name=\"twitter:description\" content=\"{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 200 }}{% else %}{{ site.description }}{% endif %}\"\u003e\n{% if page.image %}\n  \u003cmeta name=\"twitter:image:src\" content=\"{{ page.image | prepend: site.baseurl | prepend: site.url }}\"\u003e \n{% endif %} \n  \u003c!-- end twitter card --\u003e\n```  \n\nYou can validate how it will look using the [cards validator](https://cards-dev.twitter.com/validator)\n\n\n# Contributing\n\n1. Fork it (https://github.com/merlos/jekyll-auto-image/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)\n4. Create a new Pull Request\n\n# Run tests\n\n```\n   $ rake test\n```\n\nThe tests are based on the code of [https://github.com/ivantsepp/jekyll-autolink_email](https://github.com/ivantsepp/jekyll-autolink_email)\n\n\n# License\n\nCopyright (c) 2015 Juan M. Merlos (@merlos) [www.merlos.org](http://www.merlos.org) Distributed under MIT License\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerlos%2Fjekyll-auto-image","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmerlos%2Fjekyll-auto-image","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmerlos%2Fjekyll-auto-image/lists"}