How to display a random image, once per session

Most of my existing websites are still in SoftPress Freeway. I purchased Blocs because it’s the most straight forward Mac app available to build attractive and well-coded responsive websites. I was never able to get my head around how to build responsive websites in Freeway, although nothing touches Freeway when it comes to building traditional websites. Anyway, here’s the top page of an existing website I made in Freeway:

https://kiramek.com

Note the graphic that appears just beneath the black header with KIRAMEK logo, then click your browser’s reload button and note how the graphic changes. It’s NOT a carousel because you only see a single image, and there’s no timer that changes the image, yet the image changes at random each time you reload the webpage or later return to the website.

This is drop-dead easy to implement in Freeway because there’s a Freeway action (plugin) named Random Image which does all the heavy lifting. I just tell the action what graphics I want it to use, and bam, it generates all the necessary code when I publish my website in Freeway.

How would one go about implementing this in Blocs?

Thank you,

James W.

1 Like

Hello @JDW

Check this I made for you…

https://blocs.webtekpc.pt/jdw

2 Likes

@Pealco, you are the magic man!

Do you have a step-by-step procedure that shows how you implemented it in Blocs?

Many thanks,

James W.

Hello @JDW yes I have. I’m out and only have iPhone with me, but as soon as I return home, I’ll send you. Do you want both situations or only one of them?

1 Like

Is it that much harder to add links? I suppose the version with links would be best, as I could just avoid adding the links if I decide I don’t want them. No need for a long writeup either as I probably can figure out what you did by looking over your Blocs document, if you are willing to share that. It’s the weekend now, so no need to rush. Thanks again for your kind help!

Wow Pealco!!! That is great!!!

1 Like

Hi, can you send the tutorial?

This link leads to nowhere. :neutral_face:

Hello @theenrico and @KBConcepts There is the new link:

https://blocs.pt/a_helpblocusers/@JDW2

Sorry,

About how to do it:

  1. Place a new html code bric and inside put the following code:
<script type="text/javascript">
var total_images = 6;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<img src="img/image1.jpg">';
random_img[1] = '<img src="img/image2.jpg">';
random_img[2] = '<img src="img/image3.jpg">';
random_img[3] = '<img src="img/image4.jpg">';
random_img[4] = '<img src="img/image5.jpg">';
random_img[5] = '<img src="img/image6.jpg">';
document.write(random_img[random_number]);
</script>
  1. Add as many images that you want, so now you have an issue, no images appears in blocs or in preview, so for that you have 2 solutions:
    a) Add images to asset manager and place that pictures in somewhere in project even in a page that you don’t publish (This way you can preview in blocs)
    or…
    b) Add them manually after export in folder img. (You can’t preview in blocs)

And voila …

With links in images the same explanation as above but with this code:

<script type="text/javascript">
var total_images = 6;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="page1.html"><img src="img/image1.jpg"></a>';
random_img[1] = '<a href="page2.html"><img src="img/image2.jpg"></a>';
random_img[2] = '<a href="page3.html"><img src="img/image3.jpg"></a>';
random_img[3] = '<a href="page4.html"><img src="img/image4.jpg"></a>';
random_img[4] = '<a href="page5.html"><img src="img/image5.jpg"></a>';
random_img[5] = '<a href="page6.html"><img src="img/image6.jpg"></a>';
document.write(random_img[random_number]);
</script>

Hope it helps you…

3 Likes

This html code is awesome, but if I want to use this code to change my logo every time? can you help me? Because this code it’s good, but it’s not responsive on mobile

Hello @theenrico, for make images responsives this are the codes:

No links:

<script type="text/javascript">
var total_images = 6;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<img src="img/image1.jpg" class="img-fluid" alt="Responsive image">';
random_img[1] = '<img src="img/image2.jpg" class="img-fluid" alt="Responsive image">';
random_img[2] = '<img src="img/image3.jpg" class="img-fluid" alt="Responsive image">';
random_img[3] = '<img src="img/image4.jpg" class="img-fluid" alt="Responsive image">';
random_img[4] = '<img src="img/image5.jpg" class="img-fluid" alt="Responsive image">';
random_img[5] = '<img src="img/image6.jpg" class="img-fluid" alt="Responsive image">';
document.write(random_img[random_number]);
</script>

With Links:

<script type="text/javascript">
var total_images = 6;
var random_number = Math.floor((Math.random()*total_images));
var random_img = new Array();
random_img[0] = '<a href="page1.html"><img src="img/image1.jpg" class="img-fluid" alt="Responsive image"></a>';
random_img[1] = '<a href="page2.html"><img src="img/image2.jpg" class="img-fluid" alt="Responsive image"></a>';
random_img[2] = '<a href="page3.html"><img src="img/image3.jpg" class="img-fluid" alt="Responsive image"></a>';
random_img[3] = '<a href="page4.html"><img src="img/image4.jpg" class="img-fluid" alt="Responsive image"></a>';
random_img[4] = '<a href="page5.html"><img src="img/image5.jpg" class="img-fluid" alt="Responsive image"></a>';
random_img[5] = '<a href="page6.html"><img src="img/image6.jpg" class="img-fluid" alt="Responsive image"></a>';
document.write(random_img[random_number]);
</script>

For logo check if it is what I change in example:
https://blocs.pt/a_helpblocusers/@JDW2

2 Likes

Hi @Pealco, thank you for the script.
Is there a way to do that for a background image of an hero block by any chance ?

Thank you !

1 Like

You’re awesome, It’s possible to do the same thing with text?

Hello @chrishsl, there you have it in my snippets website for blocs.

Have a look.

Hope it helps you…

1 Like

Awesome, thank you ! Will give it a try !

@Pealco, in your exemple, it always starts with the same image for what I understand, I’d like to have a different image every time, and not necessarily a timer… ?

There is different and there is no timer…

When you refresh the page it randomly change the image…

Hi @Pealco, not sure to understand, but on the link you just gave me ( CHANGE_BACKGROUND_X_SECONDS), the first image is always the train track. But I totally agree that on the first exemple you gave, there is a random image every time you refresh the page.

Sorry my bad, and to ask you sorry there is your code:

Add the bloc and its content to it, and add in the end or beginning of the bloc (inside the bloc) a code bric and add the following code:

<script type="text/javascript">
    var imgCount = 6;
        var dir = 'img/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "image1.jpg",
                images[2] = "image2.jpg",
                images[3] = "image3.jpg",
                images[4] = "image4.jpg",
                images[5] = "image5.jpg",
                images[6] = "image6.jpg",
        document.getElementById("randomimg").style.backgroundImage = "url(" + dir + images[randomCount] + ")"; 
   </script>

Then just go to your bloc and change it ID to “randomimg”,

Hope it helps you…

Check it working here.

1 Like

Thank you so much !!! it works perfectly !!