It's recommended to stop using the classes qg-cut-in
/ qg-cut-in-alt
and figure-credits
, and replace existing instances with qg-fig
and figure-cc
respectively.
For more details on how to create a similar layout see figure pulled left/right and figure with view larger image below.
Images are used to provide a visual representation of context. Images should be relevant to the content—avoid using images as unnecessary decoration.
img-fluid
. This applies height:auto;
and max-width:100%;
to the image so that it scales with the parent element.<p> <img src="https://picsum.photos/926/521" class="img-fluid" alt="default responsive image example"> <p>
Using the <figure>
element for an image provides a range of configuration/style options like a border, caption, credits, sizing, placement, linking, and viewing a larger version of the image in a lightbox.
<div id="qg-primary-content">
wrap the image in the standard HTML <figure>
element. <div id="qg-primary-content">
also add the class qg-fig
to any <figure>
element.<figure>
will display at a maximum width of 374 pixels. Apply the class max-width-none
to the <figure>
element to display it at full-width.qg-unstyled
to the <figure>
element.<figure> <img src="https://picsum.photos/374/210" alt="Example image as a figure"> </figure>
<figure> <img src="https://picsum.photos/374/210"> <figcaption> Wheel of Brisbane at South Bank <div class="figure-cc"> © Alice Duffield </div> </figcaption> </figure>
Remove the border of the figure element by adding qg-unstyled
to the <figure>
element.
<figure class="unstyled"> <img src="https://picsum.photos/374/210" alt="Example figure image with no border"> <figcaption> Wheel of Brisbane at South Bank <div class="figure-cc"> © Alice Duffield </div> </figcaption> </figure>
By default, the figure element is centered. You can add the class pull-left
to align the figure element to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus vehicula iaculis. Pellentesque pretium quam sit amet nulla finibus, in porta ex sagittis. Sed suscipit erat at posuere egestas. Suspendisse aliquet consectetur velit vel ultricies.
Pellentesque facilisis sit amet augue ac luctus. Donec blandit luctus orci dignissim porttitor.Vivamus condimentum pretium leo eget sodales. Phasellus vel nulla id tortor scelerisque finibus. Praesent ultricies pharetra erat, id imperdiet massa finibus vitae.
Mauris pharetra massa risus, quis consequat neque volutpat at. Nam lorem purus, sollicitudin et ex at, porta aliquam mauris. Duis imperdiet sapien et elit iaculis sagittis.
By default, the figure element is centered. You can add the class pull-right
to align the figure element to the right.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque finibus vehicula iaculis. Pellentesque pretium quam sit amet nulla finibus, in porta ex sagittis. Sed suscipit erat at posuere egestas. Suspendisse aliquet consectetur velit vel ultricies.
Pellentesque facilisis sit amet augue ac luctus. Donec blandit luctus orci dignissim porttitor.Vivamus condimentum pretium leo eget sodales. Phasellus vel nulla id tortor scelerisque finibus. Praesent ultricies pharetra erat, id imperdiet massa finibus vitae.
Mauris pharetra massa risus, quis consequat neque volutpat at. Nam lorem purus, sollicitudin et ex at, porta aliquam mauris. Duis imperdiet sapien et elit iaculis sagittis.
<!-- Pull-left example --> <figure class="pull-left"> <img src="https://picsum.photos/374/210" alt="Example figure image pulled-left"> <figcaption> Pull-left example <div class="figure-cc"> Figure credits </div> </figcaption> </figure> <!-- Pull-right example --> <figure class="pull-right"> <img src="https://picsum.photos/374/210" alt="Example figure image pulled-right"> <figcaption> Pull-right example <div class="figure-cc"> Figure credits </div> </figcaption> </figure>
To display the figure at full-width, add the class max-width-none
.
<figure class="max-width-none"> <img src="https://picsum.photos/374/210" alt="Example figure image full-width"> <figcaption> Full-width example <div class="figure-cc"> Figure credits </div> </figcaption> </figure>
The image can be viewed at a larger size in a lightbox by using the following template. By defining data-fancybox
you can group images to be navigated in the same lightbox.
<figure> <a href="https://picsum.photos/926/521" data-fancybox="gallery_id" data-analytics-link-group="swe-images"> <span>View larger image</span> <img src="https://picsum.photos/374/210" alt="Example of figure with view larger image"><img class="figure__expand-icon" src="https://static.qgov.net.au/assets/v4/latest/images/Expand.svg" alt="Enlarge image"> </a> <figcaption> View larger image example <div class="figure-cc"> Figure credits </div> </figcaption> </figure>
Images must be relevant to the content and where practical, taken in Queensland. Consider the following:
All images should be:
Always consider:
If an image is taken by a Queensland Government employee (in the course of their work) or a freelance photographer commissioned by a government agency, copyright belongs to the State of Queensland and the statement in the website footer is sufficient. The photographer is not credited in this instance.