Pictures

Adding pictures to our site can be tricky sometimes. This guide should help you checking the right boxes. This guide is for the “new” corporate designe of the RUB.

Adding a Picture

Adding a Picture

Adding a picture is fairly simple. Follow the steps as shown in the video.

1. “Edit”
2. “+”
3. “Image”
4. “Choose File”
5. Select the right folder
6. “Upload files” and select it or select exiting file
7. Add Caption text
8. Important Do not disable “Use Responsive Image”.
9. Important Keep “Automatic Scaling” on, if you do not want to set the size manually.

Image Format

PNG

If you use PNG, make sure to save it as RGB or RGBA, and not as indexed color palette. Indexed color palettes are harder to compress and look ugly as a result.

JPEG

If you use JPEG, set the compression to 100. It will get compressed further down later by django.

SVG

Use SVG when needed, without further worries.

WEBP

Webp is for our tools in an experimental state.

AV1

Do not use AV1 yet.

Editorial notes

1. You can use, without fear, large images. They get scaled down automatically, if you do not turn of “Use Responsive Image” and “Automatic Scaling”.
2. Ask other editors where to put images or make a reasonable decision.
3. Pictures scale automatically with the screen/window size.

Responsive Images

Images in Text Fields

Images can be placed in text fields without a problem. Just add a text field and add an image to the text field as shown above.

Multiple Smaller Images and Alignment

One can display images in two columns. Sadly it is not simple possible to let text float arround images.

1. “Edit”
2. Ddoubleclick one image or select the image over the right menu.
3. “Advanced settings”
4. “Alignment”
5. “Best fit (half width)”
6. “Save”

Two-column pictures

Manual Width and Hight

You can set width and hight manualy, but this is generally a bad idea, because it will only look good on one certaint screen/window size. Use this only if you must.

Cropping settings

Thumbnail Options

The thumbnail options are only for some specific images. As the we use a design with a responsive width (oppose to a fixed width) we rearly need those.