hugo-scroll
hugo-scroll copied to clipboard
zjedi
Image sliders on main page not working anymore?
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.
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.
aye, we should prepare a github page with video cover, otherwise this get detected too late :/
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 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!
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 4191af692faffb7e83dfb0417fb68392f7df32b7 introduced this behavior. You can test it yourself quite easily:
cd themes/hugo-scroll/
git checkout a1772f49e4491e1fce510fdd21e4f3b8ebf0294c
cd ../..
hugo
a1772f49e4491e1fce510fdd21e4f3b8ebf0294c is the commit before the multi language patch. Using 4191af692faffb7e83dfb0417fb68392f7df32b7 or newer I'm unable to view the defined header_image, it's not referenced anywhere after generating the public pages.
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.
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.
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?
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.
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 = "© 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:
Note that this is tested in desktop mode using Firefox. The same result is obtained with Chrome and Edge.
@instantdreams Is it problem only with local deployment? When you publish the site, is it ok?
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
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.
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.
I copies my images from site/static/images/ to site/assets/images/ and deployed to my test enironment. The cover image is now present. I'll promote these changes to my master branch.
Thank you @tdenny for discovering this - it still seems to be an issue with the hugo-scroll theme, I have another theme that uses images which are picked up from the static directory, so I hope the maintainers of hugo-scroll can investigate and resolve.
@instantdreams as a maintainer, I am currently a bit overwhelmed, it may take some time till I get to it.
While I was testing extensively the i18n feature, it too noticed serving from static vs assets made a difference. But after a while researching, it looked like a Hugo feature. I'm surprised it worked for you elsewhere. Can you try with latest Hugo version? I did some experiments and behaviour changes across different Hugo versions
I realised in my github actions that I had pinned my hugo version to 0.139.2 so I updated it to latest and delete site/assets/images/. Just pushing to my test branch right now... Successful built with 0.144.2 and automatic deployment to my host.
On viewing the deployed static site, there is no background image or other site images served.