ComboStrap UI - Images


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


All images:

Supported Image Type

ComboStrap supports:


ComboStrap uses:

{{[ ]path?WxH&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 (0 if you don't want to set it)
  • H is the height (Optional)
  • [ ] 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.
  • 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


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



  • 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|}}

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 |}}


You can also use the image as background.

<slide color="steelblue" text-align="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 emphase a short message.</text>

A background image

A background image will emphase a short message.



cropping works only for raster image but does not get any extra features such as lazy loading and styling.

Example of an image cropped to 200x200px




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


This configuration permits to set the link type to the image.

Value Behavior
direct (default) Direct link to the image
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
Powered by ComboStrap