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
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.
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.
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.
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
- A H3 title in bold first
- Then the image
- Then the text
- Some empty lines, if needed
- A clear command
The new solution for WYSIWYG: Tiny Tables
See more for