Creating Editor-Friendly Content Blocks

Themes
1

Background

I’m thinking of redeveloping an existing site in Ghost, and I’d appreciate this forum’s advice on best practice.

Our Issue

One element that we’d like to recreate is a two-column block with text on one side and an image on the other. On mobile, these elements stack.

The screenshot below shows the desktop(left) and mobile version (right).

screenshots
screenshots1920×1920 217 KB

Objectives

The content of these blocks doesn’t change often, but we’d like to offer something that is

  1. editor-friendly, exposing people who work on these pages to as little code as possible

  2. able to take advantage of Ghost’s built-in image optimisation, serving responsive images automatically

Help Please!

I’m a Ghost newbie, but having spent some time looking at this forum, I think the best approach might be to create a snippet that has HTML markup around the title, text and image elements so that these can be styled by the site’s CSS.

In pseudo-code, the snippet would be:

HTML to create a container DIV
HTML to create a DIV for the block heading

free text area for editor to type the heading

HTML to close heading DIV
HTML to create a text DIV

free text area for the editor add text

HTML to close text DIV
HTML to create an image DIV

space for editor to use Ghost's insert image feature, thereby making the image automatically responsive

HTML to close image DIV
HTML to close container DIV

With a bit of luck we’ll be able to get the CSS to handle the alternating left/right styling as well.

Key Questions

  1. Is this the best approach or is there something even easier that meets our objectives?
  2. Will using the insert image feature work in this context to deliver responsive images?

Any help here would be greatly appreciated - in fact it will probably help us in our decision to switch to Ghost.

Thanks!

1 Like