Image sliders on main page not working anymore? #202

ottlinger · 2024-07-20T09:30:46Z

I recently upgraded to the latest version of hugo-scroll and my image slider on the index page stopped working.

Has that feature been removed? How can I configure multiple images on my start page.

The slider integration was based on a slide.json under the data directory.
At the moment no cover image/image at all is shown on the base index page.

ottlinger · 2024-07-20T11:18:18Z

The video background on the main page seems to be broken, too:
Trying to enable it by providing a custom partial stops rendering with

executing "partials/custom_header_video.html" at <$videoResource.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

PS: I took the custom_header_video.html from the exampleSite's layout/partials folder.

zjedi · 2024-07-20T21:42:39Z

aye, we should prepare a github page with video cover, otherwise this get detected too late :/

ottlinger · 2024-07-20T22:31:29Z

Unfortunately no image is rendered on the main page anymore -
has the parameter/parameter names changed as well?

I had a look into the theme code and still saw:

header_image "/img/slide/slide01.jpg"

The referenced file is available under /public/img/slide but just not gets rendered/shown at all.

The image itself can be rendered locally via
http://localhost:1313/img/slide/slide01.jpg but no markup is rendered containing any reference to the image.

ottlinger · 2024-07-20T22:57:57Z

I found a hacky workaround to get my background back ....

define a custom_header_video and enable video rendering in _index.md
remove all the permalink stuff (Go template part)
link to background image in video*s poster attribute
provide a link to a video via source that does not exist

Voila - the background is shown!

FFMbyBicycle · 2024-10-04T14:27:56Z

Unfortunately no image is rendered on the main page anymore - has the parameter/parameter names changed as well?

I had a look into the theme code and still saw:
* header_image "/img/slide/slide01.jpg"
The referenced file is available under /public/img/slide but just not gets rendered/shown at all.

The image itself can be rendered locally via http://localhost:1313/img/slide/slide01.jpg but no markup is rendered containing any reference to the image.

I can reproduce this issue and found that commit 4191af6 introduced this behavior. You can test it yourself quite easily:

cd themes/hugo-scroll/
git checkout a1772f49e4491e1fce510fdd21e4f3b8ebf0294c
cd ../..
hugo

a1772f4 is the commit before the multi language patch. Using 4191af6 or newer I'm unable to view the defined header_image, it's not referenced anywhere after generating the public pages.

instantdreams · 2024-11-01T19:43:17Z

I am encountering this issue as well.

Previous versions worked, header_image rendered. File content/_index.md contains the following lines:

header_image: "images/cover-image.jpg"
header_logo: "images/header-logo.jpg"

Navigating to http://www.example.com/images/cover-image.jpg or http://www.example.com/images/header-logo.jpg renders both images. Viewing the page source shows the following:

<head>
[...]
<meta property="og:image" content="https://www.example.com/images/cover-image.jpg">
[...]
<meta name=twitter:image content="https://www.example.com/images/cover-image.jpg">
[...]
<meta itemprop=image content="https://www.example.com/images/cover-image.jpg">
[...]
</head>

Using the instructions from @FFMbyBicycle to revert back to a last known good commit 4191af6 then viewing source provides the following:

<meta property="og:image" content="http://localhost:1313/images/cover-image.jpg">
<meta name="twitter:image" content="http://localhost:1313/images/cover-image.jpg">
<meta itemprop="image" content="http://localhost:1313/images/cover-image.jpg">
[...]
<header id="site-head" class="withCenteredImage" style="background-image: url(/images/cover-image.jpg)">

This header element is not being rendered by subsequent releases.

instantdreams · 2024-11-01T20:01:47Z

Additional investigation

Previous version:

<header id="site-head" class="withCenteredImage" style="background-image: url(/images/cover-image.jpg)">
[...]
<div id="site-head-content" class="inner">
[...]
<a class='fn-item' item_index='7' href='./#site-head'>Return To Top</a>

Current Version:

<header id=site-head class=withCenteredImage>
[...]
<div id=site-head-content class=inner>
[...]
<a class=fn-item item_index=7 href=./#site-head>Return To Top</a>

I note that my hugo.toml contains the line:

    image_options = "webp q90 lanczos photo"

But I do not expect this to affect the render.

It looks like layouts/index.html is where the issue may be.

zjedi · 2024-11-04T20:54:00Z

According to reported bug analysis, the problem originates from
https://github.com/zjedi/hugo-scroll/pull/177/files#diff-96762550561f76f989ced99c4a0751e94696682490ee94b2d77a66377c9619eb
@ilja-radusch does it ring any bells?

ilja-radusch · 2024-11-04T21:26:19Z

From a CSS point of view, the header tag still has the background-image like before. Just not defined through unsafe-inline but the style-Tag to also allow for different image sizes depending on screen size. For mobile phones this avoids downloading a big desktop version of the image.

depending on the implementation of the image slider this might break, if I.e. not all media query images are changed for the sliding. Technically the desktop images might still be sliding but are just not displayed on smaller screens. ;-)

To see which solution should be applied, I would would need an example site.

instantdreams · 2024-11-04T21:43:49Z

Steps to reproduce the issue:

mkdir example-com
cd example-com
git init
hugo new site site
git submodule add https://github.com/zjedi/hugo-scroll.git site/themes/hugo-scroll
cd site
notepad++ hugo.toml

Add following details to hugo.toml:

baseURL = "https://www.example.com"
languageCode = "en-ua"
title = "Example Web Site"
timeZone = "America/New_York"
disableKinds = ["section", "taxonomy", "term", "RSS", "robotsTXT"]
defaultContentLanguage = "en"
theme = "hugo-scroll"
enableGitInfo = false
enableEmoji = true
[params]
    favicon = "images/favicon.ico"
    images = ["images/cover-image.jpg"]
    title_guard = true
    title = "Example Web Site"
    description = "The Example Web Site"
    language_menu = false
    show_current_lang = false
    copyright = "&copy; Example"
    hidedesignbyline = false
    invertSectionColors = false
    image_options = "webp q90 lanczos photo"
    combine_page_and_site_title = false    
    [params.footer]
    showContactIcons = false
    showFooterLinks = false

Create home page

hugo new content content\_index.md --kind home
notepad++ content\_index.md

Add following details to content_index.md:

---
header_image: "images/cover-image.jpg"
header_logo: "images/header-logo.jpg"
header_headline: "The Example Web Site"
header_subheadline: "A very good subheading"
header_use_video: false
nav_to_top_title: "Return To Top"
nav_to_top_weight: last
---

Copy over static assets:

mkdir static\images
cp /example/static/favicon.ico static/images
cp /example/static/images/cover-image.jpg static/images
cp /example/static/images/header-logo.jpg static/images

Run server

hugo server

Browsing to http://localhost:1313/ displays no background image:

Source code view confirms the class withCenteredImage:

instantdreams · 2024-11-04T21:46:23Z

Note that this is tested in desktop mode using Firefox. The same result is obtained with Chrome and Edge.

zjedi · 2024-11-05T09:25:17Z

@instantdreams Is it problem only with local deployment? When you publish the site, is it ok?

instantdreams · 2024-11-05T19:37:23Z

The issue can be reproduced locally and when deployed. The code generated is the same.

For reference, image properties:

cover-image.jpg, 4502 x 3164, 300 dpi
header-logo.jpg, 3784 x 3784, 300 dpi
favicon.png, 48 x 48, 32 bit depth

ottlinger · 2024-11-20T10:13:08Z

My workaround does not work with the latest version of the theme - no video is rendered anymore :( but a static image remains on the frontend page. Furthermore the footer/contacts icons are broken and do not get rendered anymore .....
this "feature" is also visible on the demo: footer does not contain contact icons/infos and the page itself contains 404-images.

instantdreams · 2024-12-17T15:28:54Z

Any update on this issue?

tdenny · 2025-01-24T02:47:24Z

I ran into this issue as well. I found that the function to fetch an image from global resources--resources.Get--does not look in the static directory.

So I copied my images to the assets directory.

mkdir -p assets/img
cp static/images/*.jpeg assets/img/

I changed the prefix from images to img out of concern of name collision. Not sure if that would cause problems or not.

After that, I ran the build once, then hugo serve was showing my images again.

ottlinger changed the title ~~Image sliders not working anymore~~ Image sliders on main page not working anymore? Jul 20, 2024

zjedi added the bug Something isn't working label Nov 4, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Image sliders on main page not working anymore? #202

Image sliders on main page not working anymore? #202

ottlinger commented Jul 20, 2024 •

edited

Loading

ottlinger commented Jul 20, 2024 •

edited

Loading

zjedi commented Jul 20, 2024

ottlinger commented Jul 20, 2024 •

edited

Loading

ottlinger commented Jul 20, 2024 •

edited

Loading

FFMbyBicycle commented Oct 4, 2024 •

edited

Loading

instantdreams commented Nov 1, 2024

instantdreams commented Nov 1, 2024

zjedi commented Nov 4, 2024 •

edited

Loading

ilja-radusch commented Nov 4, 2024

instantdreams commented Nov 4, 2024

instantdreams commented Nov 4, 2024

zjedi commented Nov 5, 2024

instantdreams commented Nov 5, 2024 •

edited

Loading

ottlinger commented Nov 20, 2024 •

edited

Loading

instantdreams commented Dec 17, 2024

tdenny commented Jan 24, 2025

Image sliders on main page not working anymore? #202

Image sliders on main page not working anymore? #202

Comments

ottlinger commented Jul 20, 2024 • edited Loading

ottlinger commented Jul 20, 2024 • edited Loading

zjedi commented Jul 20, 2024

ottlinger commented Jul 20, 2024 • edited Loading

ottlinger commented Jul 20, 2024 • edited Loading

FFMbyBicycle commented Oct 4, 2024 • edited Loading

instantdreams commented Nov 1, 2024

instantdreams commented Nov 1, 2024

zjedi commented Nov 4, 2024 • edited Loading

ilja-radusch commented Nov 4, 2024

instantdreams commented Nov 4, 2024

instantdreams commented Nov 4, 2024

zjedi commented Nov 5, 2024

instantdreams commented Nov 5, 2024 • edited Loading

ottlinger commented Nov 20, 2024 • edited Loading

instantdreams commented Dec 17, 2024

tdenny commented Jan 24, 2025

ottlinger commented Jul 20, 2024 •

edited

Loading

ottlinger commented Jul 20, 2024 •

edited

Loading

ottlinger commented Jul 20, 2024 •

edited

Loading

ottlinger commented Jul 20, 2024 •

edited

Loading

FFMbyBicycle commented Oct 4, 2024 •

edited

Loading

zjedi commented Nov 4, 2024 •

edited

Loading

instantdreams commented Nov 5, 2024 •

edited

Loading

ottlinger commented Nov 20, 2024 •

edited

Loading