aaron1

Text content with some specific styling applied.
I have mostly got around it now by using the Markup Block, however pseudo elements dont seem to animate.

Would be nice if the site wide effects applied to code blocks too.

Hi All,

Is there a way to make site-wide effects apply to code block content also? It's not very smooth when most blocks slide in nicely but a couple of code blocks just 'appear'.

My code blocks mostly contain text with custom CSS classes/styling applied.
Had wondered if an alternate option might be to use Markup Blocks instead for this.

Appreciate any suggestions.

Cheers.

On 5/15/2022 at 3:07 PM, tuanphan said:

Hi,

We can achieve this with Gallery. Do you still need help on this?

Hi tuanphan,

Yes still looking for a suitable solution here.

Ideally I was hoping to achieve this using background images as I have a bit of content to go over top of the imagery. A gallery may be a workable option though if I cant get background images to work - how do you go about achieving random load of gallery images? (I don't want users to be able to scroll through other images either).

Thanks,
Aaron

Hi all,

I'm trying to get the background image of a section (first section on a 7.1 home page) to randomly load a different image each time the user visits or refreshes the page - probably around 8 images in total.

I found the below code on an older post - sometimes it works, sometimes a new image loads but the original suddenly pops up over top of it.

Any suggestions that might iron out the bugs here would be appreciated.

<script>
document.addEventListener('DOMContentLoaded', function() {
  var images = [
    'https://randomwordgenerator.com/img/picture-generator/54e9d1454b5ba914f1dc8460962e33791c3ad6e04e507440752b7edc9649c2_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/50e2dc464e4faa0df7c5d57bc32f3e7b1d3ac3e45658724e77267bd493_640.jpg',
    'https://randomwordgenerator.com/img/picture-generator/nick-dunlap-h65WkTvyWJY-unsplash.jpg'
].sort( () => .5 - Math.random() );
    var randImage = images[0];
    document.querySelector(".homepage article.sections section:first-child .section-background img").src = randImage;
    document.querySelector(".homepage article.sections section:first-child .section-background img").setAttribute("srcset", "");
});

</script>