frjo / hugo-theme-zen

A fast and clean Hugo base theme with css-grid and Hugo pipes support.
https://zen-demo.xdeb.org/
GNU General Public License v2.0
276 stars 80 forks source link

Max image width does not work when the sidebar is set to false #62

Closed georgew509 closed 1 year ago

georgew509 commented 2 years ago

I have these settings in my config.yaml file:

imageMaxWidth: 600
sidebar: false

I have noticed that the max image width is not working when sidebar is set to false. It works fine when set to true. This is an example. I currently have sidebar set to false. The actual image width is 1280. I know that I can set the desired width in the figure short code. But I would have to do that for every image.

I have also installed a notice short code that is using an SVG image for the background color, and I noticed that it is also expanding the beyond the 600 width.

georgew509 commented 2 years ago

I forgot to mention that I am using page bundles, in case that makes a difference:

george@imac1:~/Hugo/apcom/content/posts/2021
$ tree a-new-year-and-a-new-host
a-new-year-and-a-new-host
├── images
│   └── new-years-eve-3882231_1280.jpg
└── index.md
georgew509 commented 2 years ago

Some additional details (sorry that I didn't see this in the beginning).

The image on the home page is in the assets/images directory, and the max image width setting is working for it (image is 1200 pixels wide). I also noticed that the text on the home page is also expanding to the full page width, but the post text stays at about the 70 ch setting (I know, not the same issue).

frjo commented 2 years ago

"imageMaxWidth" is only used in the "img" and "figure" shortcodes.

https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/_variables.scss#L126-L127

https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/reset/sections/_sections.scss#L73-L81

georgew509 commented 2 years ago

Thanks for the feedback.

georgew509 commented 1 year ago

I am using the figure shortcode:

{{< figure src="images/new-years-eve-3882231_1280.jpg" alt="New Years image." attr="Image by Gerd Altmann from Pixabay." class="center" >}}

But the images is in a page bundle. Does that make a difference?

Thanks much, George

On Jul 6, 2022, at 3:46 PM, Fredrik Jonsson @.***> wrote:

"imageMaxWidth" is only used in the "img" and "figure" shortcodes.

https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/_variables.scss#L126-L127 https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/_variables.scss#L126-L127 https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/reset/sections/_sections.scss#L73-L81 https://github.com/frjo/hugo-theme-zen/blob/3f01e69d6d63c120053a3c837219257dd8398449/assets/sass/reset/sections/_sections.scss#L73-L81 — Reply to this email directly, view it on GitHub https://github.com/frjo/hugo-theme-zen/issues/62#issuecomment-1176716791, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLKIOM57D5B7DLMZHUC67TVSXWBFANCNFSM522IQZTA. You are receiving this because you authored the thread.

frjo commented 1 year ago

The figure and img shortcodes support images in "static" and in "assets" directories.

They do not work with page bundles. See the Hugo forum for examples is my recommendation. Some other theme might have shortcodes that work with pae bundles as well, you could copy them.

They

georgew509 commented 1 year ago

Thanks for reopening and replying.

I am still a bit confused. I am using the figure shortcode with page bundle images, and it seems to be working just fine. For example:

https://altoplace.com/macos/configure-apache-and-php-fpm-on-macos/

$ l content/macos/configure-apache-and-php-fpm-on-macos images/ index.md


{{< figure src="images/apple-1868496_1280.png" alt="Apple Computer." attr="Image by Pexels from Pixabay." class="center" >}}

On Oct 11, 2022, at 4:34 AM, Fredrik Jonsson @.***> wrote:

The figure and img shortcodes support images in "static" and in "assets" directories.

They do not work with page bundles. See the Hugo forum for examples is my recommendation. Some other theme might have shortcodes that work with pae bundles as well, you could copy them.

They

— Reply to this email directly, view it on GitHub https://github.com/frjo/hugo-theme-zen/issues/62#issuecomment-1274407491, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABLKIOJ7J5YOHNFYFIFVYJ3WCUYDDANCNFSM522IQZTA. You are receiving this because you modified the open/close state.

frjo commented 1 year ago

It works sort of, as you have noticed. All the code that resizes the image and figure out the correct width and height gets skipped since that code assumes the image is in assets or static.

georgew509 commented 1 year ago

Got it. For now, I am moving all my images to the assets directory. I still have a lot to learn. Page bundles sounded like a neat idea. After trying several Hugo themes, I want to stick with the Zen theme for a solid base for performance and learning about Hugo. Thank you for your help.

On Oct 13, 2022, at 12:01 PM, Fredrik Jonsson @.***> wrote:

It works sort of, as you have noticed. All the code that resizes the image and figure out the correct width and height gets skipped since that code assumes the image is in assets or static.

frjo commented 1 year ago

Page bundles are really neat. I do not use them since they do not fit the workflow of my customers.