ComboStrap UI - Images

About

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

Features

All images:

Supported Image Type

ComboStrap supports:

Syntax

ComboStrap uses:

{{[ ]path?WxH&nolink&att=value[ ]}}

where:

  • 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

Example

Resize to a given width

To resize to a given width, add a number.

Example of an image resized to 400px

{{:docs:block:stock_image_surfer_in_the_see.png?400|}}

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

{{:docs:block:stock_image_surfer_in_the_see.png?0x250|}}

Position

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

Background

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>
</slide>

A background image

A background image will emphase a short message.

Support

Cropping

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

{{:docs:block:stock_image_surfer_in_the_see.png?200x200|}}

Configuration

imageEnable

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

imageDefaultLinking

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