User Tools

Site Tools


writer-help

Wiki Writers Help & Hints


Translations

Images

  • Always use lower case characters for media file names and references!
  • Down scale the image as small as possible.


New topics

  • New topics should be created in the English Wiki first.


How to get a *hard* break below both text and an image

If you try to move an image to left, and then put a paragraph of text to the right, it is very hard to get the *next* paragraph of text to start *below* both the image and the text.

Even if you use the "break" command "\\" after the first paragraph, the second paragraph may still start on the right side of the image, when you want it to start below it.

The code might look like this:

===== My Page =====

{{myimageontheleft.jpg }}

My first paragraph, which is on the right of "myimageontheleft.jpg".  The next paragraph should begin below this.

 \\
 
My second paragraph, which still begins on the right of "myimageontheleft.jpg."  ARGH!

Borrowing an old trick from HTML page design, I have uploaded a 1x1 white pixel as a gif image. Now I can *force* the text to begin after the image by including whitepixel.gif with a very wide width and a 1 pixel height:

===== My Page =====

{{myimageontheleft.jpg }}

My first paragraph, which is on the right of "myimageontheleft.jpg".  The next paragraph should begin below this.

 \\
 
{{whitepixel.gif?1600x1}}

My second paragraph, which now begins below both "myimageontheleft.jpg" and the first paragraph.  Not so ARGH!

How to get a good look of side by side arranged pictures

Normally the width parameter of pictures is used to get the desired size in a page.
As example the picture gca:gca-pi01_pict03.jpg in the wiki has a original size of 671 x 655 pixel.
To set the width of this picture in a page to 100 pixel this form is used:

{{:gca:gca-pi01_pict03.jpg?100}}

Is an arrange of several pictures side by side desired (e.g. in a table), but that have different sizes, is that quite fiddly, if it should look good.
A good look needs the same height of all side by side arranged pictures.

One way to get the desired result is a "trial and error action" with stepwise changed the width parameter of every picture to achieve the result:
?80 > ?90 > ?100 > ?110 > ?120 . . .

A better, because easier and reliable way, is using the in the wiki not often used height parameter without lost of the picture aspect ratio.
Then the same value should be used for the height parameter of all pictures.
In case the picture of the example above should have a height of 90 pixels, then this form is needed:

{{:gca:gca-pi01_pict03.jpg?0x90}}

The used "0" behind the question mark defines that the normally at this place inserted width parameter is in this case not used and the aspect ratio is preserved.
A real example to apply this in a table of pictures is here on a wiki page.
All pictures there have different sizes with different aspect ratios, but nevertheless it looks good, because all pictures are showed with the same height parameter = ?0x90.

The trial and error action described above can be forgotten forever.

writer-help.txt · Last modified: 2019/06/06 22:24 by smitt48