1. Home
  2. Marco HTML
  3. Elements
  4. Images in content

Images in content

Marco offers the ability to use gallery in content divide on equal columns, which can use on all pages except “Homepage”. To modify count of columns, simply replace class in gallery element. Optionally you can add a link to open images in lightbox. Also you can add a single image alignment in text, by modifying class, presenting below.
 

Gallery classes
two-columns
gallery in content will appear in 2 columns.
three-columns
gallery in content will appear in 3 columns.
four-columns
gallery in content will appear in 4 columns.

 

... 
   STANDARD GALLERY
   <div class="element-gallery-grid three-columns">
      <div class="image-content">  
         <img src="image url" alt="">  
      </div>      
   </div>

   GALLERY WITH LIGHTBOX
   <div class="element-gallery-grid three-columns">
       <a href="image url" class="gallery-content-lightbox"> 
          <div class="image-content">  
             <img src="image url" alt="">  
          </div>   
       </a>    
   </div>
...

Images alignment classes
float-left
image in content float left.
float-right
image in content float right.

 

... 
   IMAGE IN CONTENT
   <figure class="img-content float-left"> 
       <img src="image url" alt="">         
   </figure>

   IMAGE WITH LIGHTBOX
   <figure class="img-content float-left"> 
      <a href="image url" class="img-content-lightbox"> 
          <img src="image url" alt="">         
          <figcaption>image caption</figcaption>
      </a>
   </figure>
...
Was this article helpful to you? Yes No