Introducing images!

Heads up! This article is quite old. Take a look at the official documentation for the latest information.

The v0.10.0 release introduces featured images for blog posts.

Add images to your posts by setting the image in the front matter. If you pass a string it will be used to find an image in the _media directory if the file is local. If you supply a full URL starting with https:// it will be used as-is.

Adding basic images

Add a Local image

1---
2image: image.jpg # Will load the following `_site/_media/image.jpg`
3---

Add a Remote image

1---
2image: https://cdn.example.com/image.jpg # Will load the URL directly
3---

Using the full power of the Image object to create rich and accessible images

If you want to be fancy you can supply extra data to the image. To do this you instead pass an array as the image parameter.

1---
2image:
3  source: image.jpg
4  description: Alt text
5  title: Tooltip
6---

Supported properties:

Here are the properties supported by the Image object, paired with examples and descriptions.

Local image path

1path: _media/image.jpg

Remote image URL

Will override the path property if both are set.

1url: https://example.com/media/image.jpg

Alt description

Used for alt text for screen readers. You should always set this to provide accessibility.

1description: "This is an image of a cat sitting in a basket."

Image title

Shows a tooltip on hover.

1title: "My Cat Archer"

Copyright text

1copyright: "Copyright (c) 2020 John Doe"

License name.

1license: "CC BY-NC-SA 4.0"

License URL.

1licenseUrl: "https://creativecommons.org/licenses/by-nc-sa/4.0/"

Image author

The author of the image, for example, the photographer, illustrator, stock photo website, etc.

1author: "John Doe"

Image source

Used together with the author property to give credit to the source of the image.

1credit: "htps://unsplash.com/photos/example"

Practical example

Using all of the supported properties described above, we can create an image that is accessible and data-rich.

The source markdown

 1---
 2title: A cute kitten I found on Pixabay
 3description: I found this cute kitten, and thought it would make a great example for featured images in posts!
 4category: example
 5author: Caen
 6date: 2022-04-11 15:51
 7image:
 8  description: "Image of a small kitten with its head tilted, sitting in a basket weaved from nature material."
 9  title: "Kitten Gray Kitty [sic]"
10  url: https://raw.githubusercontent.com/hydephp/hydephp.com/gh-pages/media/kitten-756956_640-min.jpg
11  copyright: Copyright (c) 2022
12  license: Pixabay License
13  licenseUrl: https://pixabay.com/service/license/
14  credit: https://pixabay.com/photos/kitten-gray-kitty-kitty-756956/
15  author: Godsgirl_madi
16---
17 
18## Write something awesome.

Parsed HTML output

1<figure role="doc-cover" itemprop="image" itemscope="" itemtype="https://schema.org/ImageObject">
2    <img src="https://raw.githubusercontent.com/hydephp/hydephp.com/gh-pages/media/kitten-756956_640-min.jpg" alt="Image of a small kitten with its head tilted, sitting in a basket weaved from nature material." title="Kitten Gray Kitty [sic]" itemprop="image" class="mb-0">
3    <figcaption itemprop="caption">
4        Image by <span itemprop="creator" itemscope="" itemtype="https://schema.org/Person"><a href="https://pixabay.com/photos/kitten-gray-kitty-kitty-756956/" rel="author noopener" itemprop="url"><span itemprop="name">Godsgirl_madi</span></a></span>. <span itemprop="copyrightNotice">Copyright (c) 2022</span>. License by <a href="https://pixabay.com/service/license/" rel="license nofollow noopener" itemprop="license">Pixabay License</a>
5    </figcaption>
6  <meta itemprop="text" content="Image of a small kitten with its head tilted, sitting in a basket weaved from nature material.">
7  <meta itemprop="name" content="Kitten Gray Kitty [sic]">
8</figure>

Screenshot of the output

Deep dive into the Image object

If you are a package developer, or just curious, here is an overview of how the Image object is created internally.

An Image object is created by passing an array of values to the constructor.

Here is an example, with all the supported properties, and example values.

 1public static function exampleImage(): self
 2{
 3  return new Hyde\Framework\Models\Image([
 4    'path' => '_media/image.jpg',
 5    'url' => 'https://picsum.photos/300/200',
 6    'description' => 'A random image.',
 7    'title' => 'An image from Picsum',
 8    'copyright' => 'Copyright (c) 2022',
 9    'license' => 'CC BY-NC-SA 4.0',
10    'licenseUrl' => 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
11    'credit' => 'https://picsum.photos',
12    'author' => 'John Doe',
13  ]);
14}

Syntax highlighting by Torchlight.dev