-
-
Notifications
You must be signed in to change notification settings - Fork 2.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add 'align' option to figure shortcode #256
Add 'align' option to figure shortcode #256
Conversation
Parameter values: - 'center': align image and captions to center of page - anything else, including unset: align according to language direction
Actually now that I'm thinking about it, there's no need for an E.g. {{< figure src=image.jpg center >}} instead of {{< figure src=image.jpg align=center >}} Edit: nevermind, it appears it is not possible to do named parameters without values. Hugo thinks that the I would like to ignore any value other than |
@kdkasad I guess we can make it simpler with already implemented code hugo-PaperMod/assets/css/post-single.css Lines 241 to 243 in 45c4b48
we can do this in - <img src="{{ .Get "src" }}"
+ <img src="{{ .Get "src" }}{{- if eq (.Get "align") "center" }}#center{{- end -}}" and remove extra css as show below .post-content figure.align-center {
- display: flex;
- flex-direction: column;
- align-items: center;
text-align: center;
} |
Appends "#center" to the image's URL in order to utilize existing CSS rules for centering images.
Kudos, SonarCloud Quality Gate passed!
|
Usage: {{< figure align=center src="image.jpg" >}} Parameter values: - 'center': align image and captions to center of page - anything else neglected * Appends "#center" to the image's URL in order to utilize existing CSS rules for centering images.
Allows centering figures (images) by adding an
align
parameter to thefigure
shortcode.Adding
align=center
to a figure causes the resulting figure to be centered.Example screenshot:
![image](https://user-images.githubusercontent.com/63574107/108608181-48d42880-737a-11eb-9f8a-bcc7c54f2132.png)