Closed lcummings12 closed 2 months ago
:mag: Preview in Federalist
@RileySeaburg
@ToniBonittoGSA
When using align="left"
the image has margin-top: 40px
applied versus margin-top: 8px
when align="right"
is used. This is current code and could cause some alignment issues when both are used. Just calling this out.
{{< img src="image-1" align="left" alt="UX Summit Image 1" >}}
align left
@ToniBonittoGSA
When using
align="left"
the image hasmargin-top: 40px
applied versusmargin-top: 8px
whenalign="right"
is used. This is current code and could cause some alignment issues when both are used. Just calling this out.{{< img src="image-1" align="left" alt="UX Summit Image 1" >}}
align left
Oh, my.. please make a Trello card in the backlog list to fix that margin, @nick-mon1
Thx!
Problem Statement
The current production code does not support inline image positioning. Additionally, there is no class for centering images, resulting in inconsistent alignment and layout issues. Refactoring the image handling logic and introducing an image-center class will provide flexibility in image positioning and improve visual quality.
Summary
I solved the problem by refactoring the img.html template to correctly handle image alignment. Specifically, I introduced an align prop to allow for image-left, image-right, and image-center classes, ensuring flexible image positioning.
{{- $align := .Get "align" | default "" -}}
I also added an inline prop to allow centered images to appear side by side.
{{- $inline := .Get "inline" | default "false" -}}
I then edited the _images.scss file to implement the class for centering the image, as well as the class for inline images.Additionally, I deleted the conditional that automatically assigned the image-right class if no alignment argument was passed and the image width was less than 600. Instead, I introduced an align parameter that ensures alignment classes are only applied when explicitly specified. Here the check also happens for the inline prop
How To Test
To test these changes, I created a markdown file to use the hugo template. I then placed various images of each of the relevant props to assure they were functioning as intended. I used assets already in the repo. Pictured is the inline, left, right, and center props.
Example Images