Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/merlos/jekyll-auto-image
jekyll plugin that makes available the first image of a post in the template
https://github.com/merlos/jekyll-auto-image
Last synced: 26 days ago
JSON representation
jekyll plugin that makes available the first image of a post in the template
- Host: GitHub
- URL: https://github.com/merlos/jekyll-auto-image
- Owner: merlos
- License: mit
- Created: 2015-02-08T23:09:50.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2022-06-27T13:22:01.000Z (over 2 years ago)
- Last Synced: 2024-03-18T00:34:13.993Z (9 months ago)
- Language: Ruby
- Homepage:
- Size: 21.5 KB
- Stars: 81
- Watchers: 3
- Forks: 7
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-jekyll-plugins - **Auto Image** - auto-image](https://rubygems.org/gems/jekyll-auto-image) by Merlos -- gets the first image of a post; useful to list your posts with images or to add twitter cards to your site (Generators)
README
# jekyll-auto-image plugin
jekyll plugin that makes available the first image of a post in the template as a variable.
By installing the plugin you will be able to access the first image of a page through `{{ @page.image }}`.
This plugin is useful if you want to:
* Include an image on your list of posts
* Set a twitter card image for a post (see example below)
# Install
Add to your Gemfile:
```
gem 'jekyll-auto-image'
```
or run
```
$ gem install jekyll-auto-image
```
Then, add to your `_config.yml`:
```yaml
gems:
- jekyll-auto-image
```
The plugin allows you to set a default image for all pages/posts. To do that, add to your `_config.yml`:
```yaml
# _config.yml
image: /path/to/your/default/image.png
```
### Jekyll 3.0
Versions of jekyll-auto-image >= 1.1.0 are compatible with jekyll 3.0. If you require compatibility with jekyll 2.0 use jekyll-auto-image 1.0.2.
```
# Run this command check installed versions
$ gem list | grep jekyll
jekyll (3.0.1)
jekyll-auto-image (1.0.2)
```
# Usage
In each post/page, the plugin will set `{{ page.image }}` following this fallback rules:
1. Front matter `image` value
2. First image in the post/page contents
3. Default site image (defined in `_config.yml`)
4. nil
Basically, 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.
### Example of usage
Example post 1:
```markdown
---
layout: post
title: Post 1
---
This is my example post. It includes an image in the contents.
```
Example post 2:
```markdown
---
layout: post
title: Post 2
image: /assets/front_matter_image.png
---
This is my second example post, because the
post includes the front matter image, the plugin
will return it instead of the first image in the
contents.
```
#### Template example
```liquid
{% for post in site.posts %}
title: {{ post.title }}
image: {{ post.image }}
```
#### Output HTML Rendered:
```html
title: Post 1
image: /assets/first_image.png
title: Post 2
image: /assets/front_matter_image.png
```
### Example using twitter cards
Another use of this plugin is to create a [twitter card](https://dev.twitter.com/cards/getting-started).
You can define a set of `` 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)
Here you have a sample:
```html
{% if page.image %}
{% endif %}
```
You can validate how it will look using the [cards validator](https://cards-dev.twitter.com/validator)
# Contributing
1. Fork it (https://github.com/merlos/jekyll-auto-image/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)
4. Create a new Pull Request
# Run tests
```
$ rake test
```
The tests are based on the code of [https://github.com/ivantsepp/jekyll-autolink_email](https://github.com/ivantsepp/jekyll-autolink_email)
# License
Copyright (c) 2015 Juan M. Merlos (@merlos) [www.merlos.org](http://www.merlos.org) Distributed under MIT License