opened
DominiqueMakowski
username_0
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
Autoscale images (img_overlay) in slider widget
issue
created
seichter
username_1
The name of this issue is wrong the item parameter is overlay_img. 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.
comment
created
seichter
username_1
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 added in line 25 in slides.html this:

```css
background-position:center; background-repeat: no-repeat; background-size: contain; 
```
to get some sort of resizing. Not really a good solution but until the actual problem is fixed it suffices.
comment
created
fliptanedo
username_2
I agree with @username_1 that this is a bug. The hack @username_1 presents [https://github.com/wowchemy/wowchemy-hugo-modules/issues/2158#issuecomment-803296060](url) 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](https://github.com/wowchemy/wowchemy-hugo-modules/blob/main/wowchemy/layouts/partials/widgets/slider.html) (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.
comment
created
jingtaisong
username_3
Hi @username_2 , 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?
comment
created
seichter
username_1
@username_3 ... you need to copy the `slider.html` template to the new folder as I mentioned [here](https://github.com/wowchemy/wowchemy-hugo-modules/issues/2158#issuecomment-803296060).  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.
comment
created
seichter
username_1
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 }}
```
comment
created
DominiqueMakowski
username_0
@username_1 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.
comment
created
joe4dev
username_4
This issue together with the [overlay filter being applied to text and buttons](https://github.com/wowchemy/wowchemy-hugo-themes/issues/2357) breaks two essential features of the slider widget.

The snippet by @username_1 fixes the autoscaling issue and I posted an adapted version that fixes both issues here: https://github.com/wowchemy/wowchemy-hugo-themes/issues/2357#issuecomment-933017687
comment