I have an about page which includes regular text, a blockquote and an image. I would like to layout the page such that the blockquote is to the right of the image. What is the best way to go about this if the image and blockquote are within the content, meaning there is a header, some text then the image and block quote, then some more text?
In a html template using bootstrap, this is the desired layout.
The page is our-story.md which renders to the {{ .Content }} block in the template file. The image and block quote are about in the middle of the rest of the text in the markdown file.
Short code solution works. The issue with this is I don’t fully understand the .Parent hierarchy to process the image without duplicating the code in the shortcode layout.
In the layout below it seems fine, but it lacks the logic to render for various view ports.
type or paste code here
{{ $image := resources.GetMatch (.Get "src") }}
<div class="row align-items-center">
<div class="col-auto">
<!--todo: call for the img shortcode here-->
<img src="{{ ( $image.Fit " 300x300 webp Smart q75").RelPermalink }}" {{ with .Get "alt" }}alt="{{.}}" {{ else
}}alt="" {{ end }} class={{ .Get "class" }}>
</div>
<div class="col">
<blockquote class="blockquote shadow-sm">
{{ .Get "block" }}
</blockquote>
</div>
</div>