The image shortcode [ll-image], allows you to put an image onto a Learning lab page. While the basic image mark-up is relatively simple, once options like transcripts, image sizing and captions are used, things can get more complicated.
Here's the shortcode to place an image on the page:
[ll-image url="https://path.to/image.jpg" alt="An example image"][/ll-image]
url should be an absolute path, ideally to RMIT library's CDN on github. An example url: https://rmitlibrary.github.io/cdn/learninglab/illustration/landing/assessments.png
Each image has a margin of 40px applied top and bottom
The default max width for images is 640px
Images are aligned to the left by default
Alt tags should be no longer than 100 characters
Image options
Use border="true" to add a border. This can be useful for diagram images on a white background.
Use align="center" or align="centre" to centre the image.
Use shadow="true" to add a drop shadow. Use sparingly.
Use rounded="true" to add rounded corners. Use sparingly.
[ll-image url="https://path.to/image.jpg" alt="An example image" border="true" rounded="true" shadow="true" align="centre"][/ll-image]
The example above could use more padding around the content to support a border and the rounded corners.
Sizing
By default the max-width is set to 640px.
A range of attributes can override this max-width value:
Attribute
max-width
Suggested use
size="wide"
100%
Very wide images that aren’t too tall
size="md"
400px
Portrait and square images
size="sm"
296px
Really tall portrait images
A full width image
[ll-image url="https://path.to/image.jpg" size="wide" caption="A full width image" alt="An example image"][/ll-image]
A medium sized image
[ll-image url="https://path.to/image.jpg" size="md" caption="A medium sized image" alt="An example image"][/ll-image]
A small image
[ll-image url="https://path.to/image.jpg" size="sm" caption="A small image" alt="An example image"][/ll-image]
A small image
[ll-image url="https://path.to/image.jpg" size="xs" caption="An extra small image" alt="An example image"][/ll-image]
Captions
Captions provide a place to attribute and credit the source of an image. A caption can be added using caption="Insert caption here". Simple html markup can be used within the caption. Elements such as <em> and <strong> can help with basic formatting.
If you include links in captions, make sure you use single quotations not double.
caption="Image generated with <a href='https://creator.nightcafe.studio'>NightCafe</a>"
For learning lab, we have a default attribution for use with images made from scratch:
To automatically generate this, use the following code: caption="Image title|attrib"
Links can also be used, be careful to use single quotes around the url asthe whole caption itself is wrapped in double quotes.
For diagram images where the background is white, the caption can appear too close to the bototm of the image. To alleviate this, add the attribute caption-gap="lg". This increaes the padding between the bottom of the image and the caption.
Highlight, underline and circle text, by RMIT, licensed under CC BY-NC 4.0
Transcripts
Transcripts are a way to provide an accessible alternative to an image, where a longer description is required that can be provided by an alt tag. To add a transcript, place a [transcript] shortcode in between the [ll-image] shortcode. Find out more information about the transcript shortcode.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
[ll-image url="https://path.to/image.jpg" caption="An example caption for this image. <a href='https://www.rmit.edu.au'>Image credit link</a>" alt="An example image"][transcript]<p>Transcript content here.</p>[/transcript][/ll-image]
Floating images
Floating images help wrap text around them, maximising screen space. Ensure there's more paragraph text than the height of the image at a screen size of 1400px wide. If this works, the wrap will be effective at other screen sizes too.
By default, floated content has a width of 296px.
On smaller screen sizes (< 768px wide), the image is displayed at full width.
The figure in this example uses the float=true attribute. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien cursus ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
[ll-image url="https://path.to/image.jpg" float="true" caption="An example caption for this image." alt="An example image"][/ll-image]
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
Other float options
By default, on smaller screen sizes (< 768px wide), the image is displayed at full width. To alter this, there are two options:
Add hide-sm="true" to the shortcode. This is only useful if the image is purely decorative.
Add size="sm" to the shortcode. This reduces the width of the image to 160px and maintains the float across all screen sizes.
Resize your screen to see this behaviour in action on the following examples
The figure in this example uses the size="sm" attribute to reduce the size of the floated image. If you resize your browser window, the floated image remains even at smaller sizes.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
[ll-image url="https://path.to/image.jpg" float="true" size="sm" alt="An example image"][/ll-image]
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
The figure in this example uses the hide-sm="true" attribute. Reduce the width of your browser window to see the image hide at screen < 768px wide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien cursus ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
[ll-image url="https://path.to/image.jpg" float="true" hide-sm="true" alt="An example image"][/ll-image]
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
<p>Text content to be wrapped here.</p>
Portrait image
When using a portrait, the default width of 640px might make the image too tall. You can use portrait="true" to both limit the width to 400px and place the caption to the right of the image. This caption uses html code like as <em> and <strong> to do basic formatting.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
Using portrait="true" in conjunction with size="sm" further limits the width to 296px. This is useful for really tall images. Note that other size parameters and centring do not work with portrait="true"
A tall image, limited to 296px wide.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nec gravida lorem. Maecenas urna turpis, mollis nec pharetra at, eleifend sit amet dolor. Ut blandit ac nunc sed interdum. Aliquam risus felis, congue eget commodo in, consectetur eget tortor. Donec vitae massa eros.
Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
More detail will be added shortly, perhaps on a new page!
Having the same attribution displayed multiple times can add unnecessary cognitive load for the user. To counter this, it's possible to use the attribution shortcode and then reference its id in each image required. For each image, add attribution-id="my-id"to the ll-image shortcode.
[ll-image url="https://path.to/image.jpg" attribution-id="my-id" alt="An example image"][/ll-image]
Then add the following shortcode below the images:
[attribution id="my-id"]Attribution information goes here, e.g. Videos and images on this page by <a href="https://rmit.edu.au/">RMIT</a>, licensed under <a href="https://creativecommons.org/licenses/by/4.0/">CC BY-NC 4.0</a>[/attribution]
The id referenced needs to match that of the images. There's also a default option available, simply add no text between the opening and closing tags:
If you are floating images, it's recommended to use this method as the attribuion can take up several lines at a narrow width.
These images all reference this attribution.
[ll-image url="https://path.to/image.jpg" attribution-id="my-attribution" alt="An example image"][/ll-image]
[ll-image url="https://path.to/image.jpg" attribution-id="my-attribution" alt="An example image"][/ll-image]
[ll-image url="https://path.to/image.jpg" attribution-id="my-attribution" alt="An example image"][/ll-image]
[attribution id="my-attribution"]These images all reference this attribution.[/attribution]
