Images

Customised

Publishers can use images to provide a visual representation of context.

Publishers can use standard Bootstrap image utilities as well as the following custom image features.

Figures

Default HTML5

To use figures, just add the standard HTML5 figure code in the <div id="qg-primary-content"> element, or add the class qg-fig to any figure element outside of the qg-primary-content element:


Basic


<figure class="qg-fig">
  <img src="https://placehold.co/300/ccc/ccc/png" alt="" />
  <figcaption>
    Caption text here
  <div class="figure-cc">Figure credits here</div>
  </figcaption>
</figure>
Caption text here
Figure credits here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Alignment

You can pull this figure left or right (turning it into a cut-in image) by adding the class pull-right or pull-left to the figure element <figure class="qg-fig pull-right">, you also need to add class="clearfix" to the parent container.


<div class="clearfix">
  <figure class="qg-fig pull-right">
    <img src="https://placehold.co/300/ccc/ccc/png" alt="" />
    <figcaption>
      Caption text here
    <div class="figure-cc">Figure credits here</div>
    </figcaption>
  </figure>
  <p>
    Image description
  </p>
</div>
Caption text here
Figure credits here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Caption text here
Figure credits here

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Enlarge image

Custom

Image can be enlargable in a lightbox with the following template. By defining data-fancybox you could group images to be navigated in the same lightbox.


HTML


<figure class="qg-fig">
  <a href="https://picsum.photos/id/237/1200/700" data-fancybox="gallery_id" data-analytics-link-group="swe-images">
    <span>View larger image</span>
    <img src="https://picsum.photos/id/237/500/200" alt="image_description"/>
    <img class="figure__expand-icon" src="https://static.qgov.net.au/assets/v4/latest/images/Expand.svg" alt="Enlarge image">
  </a>
  <figcaption>
    Caption text here
    <div class="figure-cc">Figure credits here</div>
  </figcaption>
</figure>
View larger image image_description Enlarge image
Caption text here
Figure credits here