Images

Images are crucial part of web contents. Images can be loaded normally and they cover set width and height. However, you can make images full width and cover extra width.

⚠️

It is important to know the first image of your post is featured image and won't be displayed on post body.

Big Images

They cover extra width compared to your post body and extend to left and right.

Big Image

<div class='big-image'>
    <img src='' />
</div>

Full Images

They cover full body width.

Full Image

<div class='full-image'>
    <img src='' />
</div>

Image Gallery

You can create a beautiful, fully responsive and lightbox effect image gallery with following code:

Image Gallery

<div class="tb-gallery">
 
  <!-- [ Row#1 ] -->
    <div class="tb-rows">
      <!-- [ Row#1 - Image#1 ] -->
      <div class="tb-image">
        <img alt="" height="1300" src="" width="2500" />
      </div>
      <!-- [ Row#1 - Image#2 ] -->
      <div class="tb-image">
        <img alt="" height="600px" src="" width="1200px" />
      </div>
       <!-- [ Row#1 - More images ] -->
    </div>   
 
    <!-- [ Row#2 ] -->
    <div class="tb-rows">
      <!-- [ Row#2 - Image#1 ] -->
      <div class="tb-image">
        <img alt="" height="1300" src="" width="2500px" />
      </div>
      <!-- [ Row#2 - Image#2 ] -->
      <div class="tb-image">
        <img alt="" height="1300px" src="" width="2500px" />
      </div>
       <!-- [ Row#2 - More images ] -->
    </div>   
 
   <!-- [ More Rows ] -->
 
</div>

ℹ️

Lightbox image gallery supports lazy loading too. You can add a class lazy and data-src attribute.

⚠️

It is a must to specify proper width and height values of <img> tag for our image gallery to function properly.

Cards Toggles