<figure class="figure image">
<a href="https://www.google.com">
<img src="/img/maxresdefault.jpg" alt="hot lava" />
</a>
<figcaption class="figure-caption">This is the caption</figcaption>
</figure>
<figure class="figure image">
<a href="{{ img_url }}">
<img src="{{ img_src }}" alt="{{ img_alt }}" />
</a>
<figcaption class="figure-caption">{{ img_caption }}</figcaption>
</figure>
{
"img_src": "/img/maxresdefault.jpg",
"img_alt": "hot lava",
"img_url": "https://www.google.com",
"img_caption": "This is the caption"
}
@mixin img {
display: block;
height: auto;
max-width: 100%;
width: 100%;
}
.image img {
@include img;
}
.favicon img {
width: inherit;
}
.figure,
.caption-img {
margin: 0;
figcaption,
.figure-caption {
text-align: right;
padding: $space_one_half;
background-color: $grey_lightest;
color: $grey_darkest;
.color-scheme-dark & {
background-color: $dark_mode_grey;
color: $white;
}
}
}
.lehigh-logo {
margin: 0 $spacer 0 0;
flex-grow: 2;
max-width: 180px;
@include media-breakpoint-up(md) {
min-width: 200px;
}
img {
.fractal-preview & {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
}
}
}
img {
&.align-left {
padding: $spacer $spacer $spacer 0;
}
&.align-right {
padding: $spacer 0 $spacer $spacer;
}
}
Display figure with a caption.