↑ Return to Da12 Documentation Pages

Da12b Doc: Parallel Text/Images and See what you get

George Dorgan By
George Dorgan
My articles
Follow on:

Page no: Da12b

Page no: T12b

In this page we show more details how to write parallel text with images inside a H3 section..


Screenshots with texts in parallel

Parallel Text Screen

Parallel text with an image (source Vesta doc)

Mentalities and thinking is different. Therefore some people need text to understand something, others rather prefer a screenshot.

On snbchf.com and on our doc site we aim to deliver both. The idea is that text that goes in parallel with screenshots. We prefer to avoid the need to click on the image. Hence the user should be able to read the details of the image as necessary.

When the image is bigger, then the text will take only a little piece of the screen. In rare cases the image must take its own line.


Text perfectly aligned with images

Text perfectly aligned with images (source Biweekly)

Snippets to faciliate parallel text with images

We introduced the following snippets in the editor.

  • [‘br’] for a line break
  • [‘clear’] to finish the alignment of text and image

The page to the right shows the resulting page. Text and image are perfectly aligned.













and empty lines in WordPress editor, helps to see what you ge

WordPress Editor: WYSIWYG

To use [‘clear’] would be sufficient to align text and image. However, we want to have the same in the WordPress editor, which is a WYSIWYG editor, a “What You See Is What You Get” editor.

Authors should be able “to see what they get” in the WordPress editor, too. We do not really need the linebreak [br’] symbol or empty lines for the correct output. The clear command does the alignment on its own. In previous versions WordPress removed empty lines or did not interprete them correctly.



Testing here, we realized that WordPress does not remove the empty lines any more, but it transforms an empty line in the WP editor into the HTML code “ ”.

So we will not need the [‘br’] any more, but can simply enter some empty lines. Still we will  use the clear command at the end of a section.




WordPress shrinks editing window to output size

Since some months, WordPress and/or our Graphene theme leave space to the right in the WordPress editor in the case that the editor window is wider  than the output.

Wordpress shrinks editing window to output size WYSIWYG

Summary: Section Order: H3 Title, image and text

The following HTML shows how we should use order the title, the text and the image inside a section

  1. A H3 title in bold first
  2. Then the image
  3. Then the text
  4. Some empty lines, if needed
  5. A clear command



The new solution for WYSIWYG: Tiny Tables


See more for Data in WP