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
Autoscale images (img_overlay) in slider widget #2158
Comments
This issue has been automatically marked as stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the If this is a feature request, and you feel that it is still relevant and valuable, please tell us why or contribute a Pull Request for review. This issue will automatically close soon if no further activity occurs. Thank you for your contributions. |
The name of this issue is wrong the item parameter is overlay_img maybe @DominiqueMakowski can update this issue. Update: Seems handling of images has been changed for 5.x, the partial for the slider widget has not been updated 4.7.0 for this new method. Hence I would tag it as a bug. Would love to help but there are no dev docs to follow up on. Update 2: It seems in #2164 are some pointers what needs to be done for 5.x to support rescale. |
So, because it bothered me a lot I hacked just some CSS in there, this should be better served with proper resizing in hugo but for now it works. I copied https://github.com/wowchemy/wowchemy-hugo-modules/commits/main/wowchemy/layouts/partials/widgets/slider.html into a background-position:center; background-repeat: no-repeat; background-size: cover; to get some sort of resizing. Not really a good solution but until the actual problem is fixed it suffices. |
This issue is stale because it has not had any recent activity. The resources of the project maintainers are limited, and so we are asking for your help. If this is a bug and you can still reproduce this error on the If this is a feature request, and you feel that it is still relevant and valuable, consider contributing a Pull Request for review. This issue will automatically close soon if no further activity occurs. Thank you for your contributions. |
I agree with @seichter that this is a bug. The hack @seichter presents https://github.com/wowchemy/wowchemy-hugo-modules/issues/2158#issuecomment-803296060 is really helpful and clever, thanks. I offer that it can be implemented in a simple way in the markdown file for the homepage widget (e.g. ./content/home/slider.md):
This is because the current slider template (as of this writing) inserts the height in the style attribute of the carousel item:
So by replacing
with
you can insert additional CSS into the div tag. |
Hi @fliptanedo , thanks for looking into this issue. It has bothered me for a long time! I tried replacing the
in ./content/home/slider.md with
but it seems the slider picture is still not auto-scaled. Is there another change that I should have made somewhere else? |
HugoBlox/hugo-blox-builder#2158 (comment) to achieve the goal of auto scale photos in slider remove the overriden slider.html in .layouts/partials/widgets to fall back to the default html update the photos in assets/media
@jingtaisong ... you need to copy the |
With version 5.3.0
|
This issue together with the overlay filter being applied to text and buttons breaks two essential features of the slider widget. The snippet by @seichter fixes the autoscaling issue and I posted an adapted version that fixes both issues here: #2357 (comment) |
Thanks for the great work! I am currently updating my website from academic 4.0 to wowchemy 5.0, and I've encountered an issue with the slider widget.
Previously (see https://dominiquemakowski.github.io/#slider), the overlay image was rescaled by the width, whereas with the new version, the same image is not rescaled: it starts from its corner and the image extends far beyond the widget.
Is there any option to tweak the scaling / size of images? Thanks
The text was updated successfully, but these errors were encountered: