Change bigImg rotation timing for beautifulhugo theme

Hello, thank you for letting me post this. I am using Hugo v0.148.1 with the beautifulhugo theme. Nothing else, just the bare theme and demoSite content. This theme has the option to include some sort of carousel for the header part called bigimg , a documentation of this feature can be seen here.

I would like to change the timing for the bigimg to change from one img to the next image, which is currently at aprox 7 seconds for one changeover to something longer - say 30 seconds or 60 seconds ( in the docs above it speaks of a standard rotation time of 10 seconds). I could not find the variable where to change this. I have searched for the better part of the day now and still can not find anything. Could anyone help me please? Thank you.

PS I am sorry I do not have a git… account.

a search for “bigimg” reveals that the code is in static/js/main.js.

There are multiple instances of setTimeout,

did not dive in the code, but it would be naturally if these define the period.

educated guess, change the 6000 in line 110. If that’s not working, you’ll have to play or dive in.

1 Like

hi @irkode! Thank you for your fast answer. Yes, I checked main.css and also found the 6000 number you mentioned I should have put this in my first post. Mea Culpa. Unfortunately, that 6000 number does not change the timing. It must influence something different. I did Ctrl C to stop the hugo server, emptied the /public folder,did

hugo server --buildDrafts --disableFastRender --cleanDestinationDir --printPathWarnings

and opened a fresh firefox session. So the “secret” parameter to change image rotating time must be hidden somewhere else. I will try to crawl through the code and report back here if I was successful before one of you experts hints me to it. BTW, I set the amount of images when it starts to rotate them to 10 in the same main.css couple of lines below. one would expect that since there are just the three example bigimgs, it would stop rotating, but it did not. so conclusion is that main.css has no primary influence on the rotating feature. I shall look into the partials…

you should have - it saves time and leads to better answers if you tell what you have done to get things up and running.

I adapt my answer to: I’m sure the 6000 is the time the image is shown :wink:

I changed the 6000 to 1000, started hugo server and I get a roughly 2 second change, the 1000 above seems to influence the transition…

You problem is how you include and/or configure your theme and where you change the value.

git clone https://github.com/halogenica/beautifulhugo.git SOMEDIR\beautifulhugo
cd SOMEDIR\beautifulhugo/exampleSite

Start the server like that it will use SOMEDIR\beautifulhugo

hugo server --themesDir ../.. 

Changing the value in SOMEDIR\beautifulhugo\static\js\main.js will work. It also catches up changes while the server is running.

Changing anything in your public folder won’t work

If you don’t want to mess up with the theme files you may copy main.js to YOURSITE\static\js\main.js.

1 Like

Spot on. I just changed the main.js in the wrong place. Now it works. Thank you@irkode for following up on this and spending time.

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.