Image handling
We distinguish between header images and images
- Choose images that are connected to your topic.
- If possible, take images that are made by you (especially for posts about conferences or events).
- If you do not use your own images, take free stock images, e.g. from https://www.pexels.com/ or https://pixabay.com/. This way we avoid copyright issues.
Every blog post needs a header image to catch the readers attention.
To ensure a consistent and clear structure, every header image needs to have the same size which is 1700x850.
- If you work with Pexels use the custom size to directly download your chosen image in this size.
- If you work with Pixabay you need to cut the image manually. The required steps are explained in Confluence.
-
Header images are divided into public and private header images.
-
Public header images are free stock images you took from Pexels, Pixabay or alike. Store these kind of images in
assets.img.pages.headers.public. -
Private header images are images you took yourself. Store these kind of images in
assets.img.pages.headers.private. -
Choose a meaningful title for your header image. Do only use lower case for the title. If you use more than one word for your title, separate the words with a
-.
Posts, especially those long once, can look tedious and boring without graphical content. But using images randomly is just as dangerous. Images of generic people or scenery are treated as “fillers” and instantly ignored. So do only use images if they have a purpose.
-
All images (except of header images) are saved in one folder which is located in
/assets/img/pages/blog/images. -
Choose a meaningful title for your image. Do only use lower case for the title. If you use more than one word for your title, separate the words with a
-.
We support three different types of images for different use cases:
- The Lightbox image is used for images with 100% width and a fixed height. If the reader wants to see the whole image, he can click on it.
{% image_lightbox image="relative full path to the image" %}
Optionally, you can decide how to align the image. The default setting is center.
{% image_lightbox image="relative full path to the image" align="top|center|bottom" %}
- The Custom image is used to define the width of your image in percent.
{% image_custom image="relative full path to the image" width="5|10|15|20|25|30|35|40|45|50|100" %}
Optionally, you can define the alignment of the image (default setting is center),
align="left|center|right"
add a caption,
caption="This_is_a_caption"
enable the lightbox view
lightbox
and enable a circle view (e.g. for avatar images). Note: You need to add a square image for the circle view.
circle
- The Markdown image that is always shown 100%. Do only use this type in rare cases, as the size is not adjustable and the image might fill the whole screen.
