Skip to main content
Prime Direction

Feature Media

The feature image you set in Post settings opens the post. Break places it in a 16:9 box beside the title on a wide screen, and above the title on a narrow one. The picture is cropped to fill the box, and the box has the theme's cut corner at the bottom right.

What the Box Shows#

PostWhat fills the box
A post with a feature imageThe feature image. A click opens it full screen, unless lightbox is in Disabled features
A post without a feature imageNo box. The title and the text take the whole width
A post tagged #videoThe video that opens the post. See Video Post

The caption you write under the feature image in the editor sits over the bottom left corner of the picture.

Pages show the same box when Show title and feature image is on in Page settings.

Changing the Shape#

The box keeps a 16:9 shape. To change it, add a rule in ⛭ Settings → Code injection → Site header. See Code Injection.

<style>
  .post-head-media {
    aspect-ratio: 4 / 3;
  }
</style>

Any ratio works, for example 3 / 2, 1 / 1 or 21 / 9. The rule applies to every post and page, and the picture is cropped to the new shape.

The --feature-media--aspect-ratio variable used by other Prime Direction themes has no effect in Break. Use the rule above instead.

Notes#

  • Choose feature images with the subject near the middle. The 16:9 crop trims the top and bottom of a portrait picture.
  • The cards on the front page and in the archives crop the same image to their own shapes. The rule above does not change them.