Autoscale images (img_overlay) in slider widget

[DominiqueMakowski]

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

[stale]

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 main branch, consider contributing a Pull Request with a fix.

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.

[seichter]

The name of this issue is wrong the item parameter is overlay_img maybe @DominiqueMakowski can update this issue. Unfortunately the history of https://github.com/wowchemy/wowchemy-hugo-modules/commits/main/wowchemy/layouts/partials/widgets/slider.html has been deleted. So tracing back what has changed is not possible.

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.

[seichter]

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 layouts/partials/widgets and added after line 24 this:

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.

[github-actions]

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 main branch, consider contributing a Pull Request with a fix.

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.

[fliptanedo]

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):

height: '300px; background-position:center; background-repeat: no-repeat; background-size: cover'

This is because the current slider template (as of this writing) inserts the height in the style attribute of the carousel item:

<div class="wg-hero dark carousel-item active" style=" height: 300px; 

So by replacing

height: 300px

with

height: '300px; background-position:center;'

you can insert additional CSS into the div tag.

[jingtaisong]

Hi @fliptanedo , thanks for looking into this issue. It has bothered me for a long time! I tried replacing the

height: 300px

in ./content/home/slider.md with

height: '300px; background-position:center; background-repeat: no-repeat; background-size: cover'

but it seems the slider picture is still not auto-scaled. Is there another change that I should have made somewhere else?

[seichter]

@jingtaisong ... you need to copy the slider.html template to the new folder as I mentioned here. There you can add your CSS changes. This will overlay the existing template. The actual slider.md can stay unchanged or can be used as usual.

[seichter]

With version 5.3.0 slider.html needs to be fixed like this:

    {{ $style_bg := "" }}
    {{with $page.Params.height}}
      {{ $style_bg = printf "%s height: %s;" $style_bg . }}
    {{end}}
    {{ if $item.overlay_color }}
      {{ $style_bg = printf "%s background-color: %s;" $style_bg ($item.overlay_color | default "transparent") }}
    {{ end }}
    {{ if $item.overlay_img }}
      {{ $bg_img := resources.Get (printf "media/%s" $item.overlay_img) }}
      {{ if $bg_img }}
        {{ $style_bg = printf "%sbackground-image: url('%s'); background-position: center; background-repeat: no-repeat; background-size: cover;" $style_bg $bg_img.Permalink }}
      {{ else }}
        {{ errorf "Couldn't find `%s` in the `assets/media/` folder - please add it." $item.overlay_img }}
      {{ end }}
      {{ if $item.overlay_filter }}
        {{ $style_bg = printf "%sfilter: brightness(%s);" $style_bg (string $item.overlay_filter) }}
      {{ end }}
   {{ end }}

[DominiqueMakowski]

@seichter thanks ofr the workaround! Is there an easy PR that could be made to directly fix this bug? I cannot find any slider.html in this repo. Tagging also @gcushen since the issue has been closed but the bug is unresolved and a fix seems to be possible.

[joe4dev]

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)