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: 18 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 (over 9 years ago)
Default Branch: master
Last Pushed: 2022-06-27T13:22:01.000Z (about 2 years ago)
Last Synced: 2024-03-18T00:34:13.993Z (3 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

Lists

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)
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)
awesome-lists-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)
awesome-stars - merlos/jekyll-auto-image - jekyll plugin that makes available the first image of a post in the template (Ruby)

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.

![first image](/assets/first_image.png)

```
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.

![first image](/assets/first_image.png)

```

#### 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