Displaying Remote Links Natively#
Displaying Local Images Natively#
Customizing Local Images#
Modify the image to HTML format, set style="width: 320px;"
<img src="/spinner.gif" data-src="/images/pexels-photo-20523844.jpeg" style="width:320px;">
Two Columns in One Row#
<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 is written in HTML format, and a little bit of styling has been added.
Three Columns in One Row#
<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>
Four Columns in One Row#
<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, Anything Works#
You can display it however you want, you just need to know a little 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.
- Two columns in one row:
class="image-cols-2" - Three columns in one row:
class="image-cols-3" - Four columns in one row:
class="image-cols-4"
If you want to achieve more complex displays, learn about TailwindCss.