• Images can appear in any posts.
  • Create one image at one of the following widths: 1920px, 1600px, 1366px, 1024px, 768px, 640px, 320px.
  • Create the largest image (from those sizes) you will need.
  • Name the image file properly. Let's say the largest I'll need is 1600px wide, I'd create balloon-1600w.jpg.
  • Note the size of the file in the file name (it's dash, then pixels wide, then 'w'): -1600w
  • You create the largest image (at 1600px wide in above example) and SBS will generate the other images.
  • So if you create balloon-1600w.jpg, SBS will create balloon-1366w.jpg, balloon-1024w.jpg, balloon-768w.jpg etc.
  • The HTML code generated will include all the images in a set and the browser will select the right one for the screen size.
  • You can name the image tags (my-tag-1 and my-tag-2, below, as you wish)
  • Image classes below refer to how far you want the image to stretch across the screen. They must be one of the following: s25, s33, s50, s66, s75.
  • You can then add left or right after the tag for alignment eg. s33 left
  • If you include no class at all it stretches 100% of the post width.
  • There is one special class which is full on its own and that stretches right across the screen to the very edges.
---
images:
    my-tag-1:
        url: /assets/posts/2019/10/balloon-1600w.jpg
        scale: true
        alt: The text that appears on hover - you really should have this.
        caption: Optionally a caption to appear below the image.
        credit: Optionally a credit to whoever created the image if it's not you.
        class: s33 right
    my-tag-2:
        url: /assets/posts/2019/10/otter-1366w.jpg
        scale: true
        alt: The text that appears on hover - you really should have this.
        caption: Optionally a caption to appear below the image.
        credit: Optionally a credit to whoever created the image if it's not you.
---

Including images in your .md file

Wherever you want the image to appear, use the following syntax:

(((image-my-tag-1))) 

So, the tag is surrounded by three brackets and starts with image- and after that you enter the tag you used for the image in your front matter (my-tag-1 in the above example).

Special images

Images can be additionally tagged to give them special meaning about how they’re used on the web. SBS automatically generates Schema, which is machine readable code that appears at the bottom of your web page and is invisible to users.

A page can have a ‘primary’ image, which is used in certain search results. It can also have a ‘featured’ image and that’s used by things like the Feedly RSS reader.

One internal thing SBS uses is an ‘icon’ image and it’ll display that next to the excerpt on the Home page.

Those tags are just flags as follows:

---
images:
    my-tag-1:
        url: /assets/posts/2019/10/balloon-1600w.jpg
        scale: true
        alt: The text that appears on hover - you really should have this.
        caption: Optionally a caption to appear below the image.
        credit: Optionally a credit to whoever created the image if it's not you.
        pageImage: true
        featuredImage: true
        iconImage: true
---

As general advice, if you have one image in a file, make it both the pageImage and the featuredImage. If you have more than one image, then use pageImage for one and featuredImage for another.

For the iconImage, you could use one of your standard images but it’s overkill in terms of size. I usually just create a small image 200x200 and use that. Do NOT end such files with 200w as mentioned for normal images (so SBS will not create loads of sizes which aren’t needed for an icon). I’d have something like:

---
images:
    my-icon:
        url: /assets/posts/2019/10/small-icon.jpg
        alt: Just a small icon.
        iconImage: true
---

You don’t need to put icons in the .md file with (((image-)) syntax. SBS will pick them up automatically on the Home page.

Front Matter Index