Displaying Remote Links Natively#
Displaying Local Images Natively#
Customizing Local Images#
Modify the image to HTML format and set style="width: 320px;"
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg" style="width:320px;">
One Row, Two Columns#
<div class="image-cols-2">
<img src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
To achieve lazy loading: we need to enter /spinner.gif in src and the actual image address in data-src. If you don't want to use this feature, simply enter the actual image address in src.
However, the image interface has been replaced with HTML format and added some styles.
One Row, Three Columns#
<div class="image-cols-3">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
</div>
One Row, Four Columns#
<div class="image-cols-4">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
</div>
Actually, You Can Do Whatever You Want#
You can actually display it however you want, you just need to understand a bit of TailwindCss.
<div class="image-cols-2">
<img src="/spinner.gif" data-src="/images/pexels-photo-8536415.jpeg">
<img class="row-span-2" src="/spinner.gif" data-src="/images/pexels-jeffer-berrire-9027257.jpg">
<img src="/spinner.gif" data-src="/images/pexels-kyle-miller-20582700.jpg">
</div>
Remember#
The theme provides three simple style classes that you can use directly.
- One row, two columns:
class="image-cols-2" - One row, three columns:
class="image-cols-3" - One row, four columns:
class="image-cols-4"
If you want to achieve more complex displays, learn about TailwindCss.