How to use the image tag in ComboStrap

Stock Image Surfer In The See


image is a inline component that permits to show raster or svg images from your media library in your pages.


All images:

  • are lazy loaded by default to enhance performance
  • are automatically reduced in size and responsive
  • support scaling on width, height or both
  • are cached permanently by the server and the browser until the physical file has changed.

Supported Image Type

ComboStrap supports:


ComboStrap uses:

{{[ ]path?WxH&ratio=w:h&nolink&att=value[ ]}}


  • path is:
    • for an internal image: the internal path of the dokuwiki
    • for an external image: the URL.
  • W is the width (Optional, 0 if you want to set only the height)
  • H is the height (Optional)
  • ratio is the image ratio (21:9, 16:9, 4:3, 1:1 or any other custom ratio).
  • [ ] are optional spaces that indicates the alignement of the image (left, center, or right float)
  • nolink will not add a link to the image itself.
  • lazy=(none|html|lozad) controls the lazy method
  • att=value is one or more styling attributes


Resize to a given width

To resize to a given width, add a number.

Example of an image resized to 400px


Stock Image Surfer In The See

Raster images are automatically resized below the screen size. For more information, see the Raster - Automatic Resizing feature

Resize to a given height

To resize to a given height, set a width to 0 followed by the height.

Example of an image resized to 250px height


Stock Image Surfer In The See


cropping can be defined by setting the following properties:

  • a width and an height
  • a ratio and a width
  • a ratio and a height
  • a ratio

cropping works on:

First, the image is scaled down by height and is then cropped on the width towards the center.


  • raster image cropped to 200x200px with the definition of a 200 width and 200 height

Stock Image Surfer In The See

  • raster image cropped to 200x200px with the definition of the ratio 1:1 and a 200 width

Stock Image Surfer In The See

  • raster image cropped to 4:3 with the definition of the ratio at the natural width

Stock Image Surfer In The See

  • svg image cropped to 16:9 with 200 height We have added an height because svg expands to the available space and will take the whole page width, while a raster image expands only to its intrinsic width

Undraw Content Creator


  • To position the image to the left, let no space, this is the default
  • To position the image to the center with a center block, let a space at the left and at the right
  • To position the image to the right with a right float, let a space at the left

Example: position the image to the right with:

{{ :docs:block:stock_image_surfer_in_the_see.png?300&spacing=p-3&background-color=white|}}

Stock Image Surfer In The See

If you want more control on position, we advise you to use the grid and its cells.

Styling Attributes

You can style even further your image with styling element:

For instance, to elevate this photography with a surfer, you could use this syntax.

{{ :docs:block:stock_image_surfer_in_the_see.png?400&onHover=float&shadow=lg |}}

Stock Image Surfer In The See


You can also use the image as background.

<slide color="steelblue" align="text-center" >
   <background opacity="0.3">{{:docs:block:stock_image_surfer_in_the_see.png|}}</background>
    <heading d2>A background image</heading>
    <text lead font-size="h3">A background image will emphasise a short message.</text>
A background image

A background image will emphasise a short message.

With the carroussel component, you can create an image gallery

  • The cards:
{{ :woman-yoga-sunset.jpg?0x600&ratio=16:9 |}}
{{ :page_speed_performance.png?0x600&ratio=16:9 |}}
{{ :undraw_content_creator.svg?0x600&ratio=16:9 |}}
  • The output:
Woman Yoga Sunset Page Speed Performance Undraw Content Creator




This configuration permits to disable completely this component. It will also disable:


This configuration permits setting the link type to the image.

Value Behavior
default The default value is direct
direct Direct link to the image in a lightbox
detail Link to a web page with image details
linkonly Only the link is displayed, not the image
nolink No link is added around the image

Metadata Image

You can also add image in the metadata in order to add/set illustrations for social cards or templates.

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Related HowTo's
Undraw Animating
How to center an image ?

This howto show you how to center an image. To center an image there is two possibilities: with the and with the With the space syntax, to center an image, you add a space after {{ and before...
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...

Recommended Pages
Undraw My Documents
A broken link is a link that points to a non-existing page or media

This page will show you how to monitor the list of broken links for your ComboStrap website
Undraw My Documents
Background styling - Add any background to your ComboStrap component

The background element permits you to add any background to your ComboStrap component in an easy and declarative way.
Cache Management

All the caches are explained in this page, from pages to images
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Undraw My Documents
ComboStrap Analytics - Page Statistics

The statistics feature allows you to query your page statistics such as word count, internal, backlinks and get insight on your whole website at once.
Undraw My Documents
ComboStrap Styling - Align Attribute

align is an styling attribute of the HTML superset component It permits to align: the content of a component the component itself its children grid The align attribute values may applies: ...
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Tooltip Illustration
ComboStrap UI - Tooltip

A Tooltip displays informative text when users hover over, focus on, or tap an element.
Undraw Website Builder Re Ii6e
Grid Layout: How to create a responsive space distribution on the horizontal axis

grid is a component that permits to distribute the horizontal space in a responsive fashion (ie suitable for mobile screen). The children: will go to a new line in a centered position (by default)...
Undraw My Documents
Hover animation

Improve the emphasis of your component by adding onHover animation

Task Runner