Layout Formatting withing the .Content block

support
1

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.


<div class="row align-items-start">
    <div class="col-auto">
        <img src>
    </div>
    <div class="col">
        <blockquote class="blockquote">
           text
        </blockquote>
    </div>
</div>
2

What does this mean?

3

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.

4

I would place both the image path and blockquote content in front matter.

5

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>

page.md

{{< blockqImg src="images/familypic2.jpg" alt="" class="card-img-top img-fluid shadow p-3 mb-5 bg-body rounded" block="content here" >}}```
6

If you mean that you want it to adapt to different devices like desktop and smartphone: that’s a task for CSS.