mirror of https://github.com/istio/istio.io.git
29 lines
1.1 KiB
HTML
29 lines
1.1 KiB
HTML
{% comment %}
|
|
Purpose:
|
|
Inserts a figure into a page. The user of this template specifies the
|
|
relative width of the figure in percentage, and an aspect ratio value in
|
|
lieu of the Y coordinate. Through CSS trickery, these two values let us
|
|
calculate the actual width and height of the image at render time in such
|
|
a way that it avoids the typical 'shifting text' problem as images are
|
|
loaded asynchronously.
|
|
|
|
Usage:
|
|
{% include figure.html width='<NN>%' ratio='<NN>%'
|
|
img='<path to image file>'
|
|
alt='<text to display when the image is not available>'
|
|
title='<text to display when hovering over the image>'
|
|
caption='<text to display below the image>'
|
|
%}
|
|
{% endcomment %}
|
|
|
|
<div class="figure" style="width: {{include.width}};">
|
|
<div class="wrapper-with-intrinsic-ratio" style="padding-bottom: {{include.ratio}}">
|
|
<figure>
|
|
<a href="{{include.img}}">
|
|
<img class="element-to-stretch" src="{{include.img}}" alt="{{include.alt}}" title="{{include.title}}" />
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
<p>{{include.caption}}</p>
|
|
</div>
|