Formatting: Image

About

Image formatting is an HTML format and configuration for displaying images - (Demo).

Specification

Configuration

Description

box

Value	Preview
none	View
border	View
shadow	View

align

Value	Description
left	Left-aligned
center	Center-aligned
right	Right-aligned

formatting

By default, the system will process all img elements that placed in supported sections (see data specifications). By setting the configuration value to no, the img elements will not be processed with formatting (will use the default browser style).

Usage

Semantic Format
Semantic format is an HTML format recommended for defining an image. This format uses the figure HTML element.

Format S1: Only image

      
<figure>
  <img src='image-url.png' data-original-width='300' data-original-height='187'/>
</figure>

Format S2: Image with link

      
<figure>
  <a href='image-url.png'>
    <img src='image-url.png' data-original-width='300' data-original-height='187'/>
  </a>
</figure>

Format S3: Image with caption

      
<figure>
  <img src='image-url.png' data-original-width='300' data-original-height='187'/>
  <figcaption>Image caption</figcaption>
</figure>

The figcaption element must be placed either at the beginning or at the end of the figure element. The position of the caption will follow the placement of the figcaption element.

Format S4: Image with link and caption

      
<figure>
  <a href='image-url.png'>
    <img src='image-url.png' data-original-width='300' data-original-height='187'/>
  </a>
  <figcaption>Image caption</figcaption>
</figure>

Blogger Format Blogger Format is an HTML image format generated by the Blogger system through insert images in the Post Editor or Page Editor. This formatting will also automatically process various Blogger formats. You do not need to make changes to existing images. Below are various HTML image formats processed by this formatting besides the previously mentioned Semantic format:

Format B1: Basic Format

    
<img src='image-url.png' data-original-width='1000' data-original-height='500'/>

Format B2: Basic Format with Link

    
<a href='image-url.png'>
  <img src='image-url.png' data-original-width='1000' data-original-height='500'/>
</a>

Format B3: Blogger Format

    
<div class='separator'>
  <img src='image-url.png' data-original-width='1000' data-original-height='500'/>
</div>

Format B4: Blogger Format with Link

    
<div class='separator'>
  <a href='image-url.png'>
    <img src='image-url.png' data-original-width='1000' data-original-height='500'/>
  </a>
</div>

Format B5: Blogger Format with Caption

    
<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
       <img src="image-url.png" data-original-width='1000' data-original-height='500'/>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">Image caption</td>
    </tr>
  </tbody>
</table>

Format B6: Blogger Format with Link and Caption

    
<table class="tr-caption-container">
  <tbody>
    <tr>
      <td>
        <a href="image-url.png">
          <img src="image-url.png" data-original-width='1000' data-original-height='500'/>
        </a>
      </td>
    </tr>
    <tr>
      <td class="tr-caption">Image caption</td>
    </tr>
  </tbody>
</table>

Description: In all the above HTML, no configuration is added. All configurations will take Default Values.

Adding Configuration Due to the diverse HTML image structures, configurations are limited to being added only to the img element.

Add the desired configuration by including the attribute
data-configuration-name='Value' on the img element.

Example:
```
      
<figure>
  <img data-box='shadow' src='image-url.png' data-original-width='300' data-original-height='187'/>
</figure>
      
      
```

Others

This formatting will update the src of the image to the appropriate size and use a webp version of the image which has a lighter size. For this purpose, the data-original-width and data-original-height attributes must be available. These attributes are automatically added when you upload an image through the Post Editor or Page Editor.
Images will be loaded lazy (only loaded when visible on the browser screen).
Adding captions only supports S3, S4, B5, and B6 formats.