I’m thinking of redeveloping an existing site in Ghost, and I’d appreciate this forum’s advice on best practice.
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).
The content of these blocks doesn’t change often, but we’d like to offer something that is
editor-friendly, exposing people who work on these pages to as little code as possible
able to take advantage of Ghost’s built-in image optimisation, serving responsive images automatically
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.
- Is this the best approach or is there something even easier that meets our objectives?
- 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.