How to display a random image, once per session

JDW · March 22, 2019, 4:45am

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:

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.

Pealco · March 22, 2019, 3:54pm

Hello @JDW

Check this I made for you…

https://blocs.webtekpc.pt/jdw

JDW · March 23, 2019, 2:14am

@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.

Pealco · March 23, 2019, 8:09am

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?

JDW · March 23, 2019, 9:08am

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!

Mattheus · March 23, 2019, 10:05am

Wow Pealco!!! That is great!!!

theenrico · March 28, 2020, 12:38am

Hi, can you send the tutorial?

KBConcepts · March 29, 2020, 3:44am

This link leads to nowhere.

Pealco · March 29, 2020, 1:42pm

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

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

Sorry,

About how to do it:

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>

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…

theenrico · March 31, 2020, 12:28am

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

Pealco · March 31, 2020, 10:35pm

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

chrishsl · April 20, 2020, 8:58pm

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 !

theenrico · April 20, 2020, 9:59pm

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

Pealco · April 21, 2020, 1:08pm

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

Have a look.

Hope it helps you…

chrishsl · April 21, 2020, 1:49pm

Awesome, thank you ! Will give it a try !

chrishsl · April 21, 2020, 1:55pm

@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… ?

Pealco · April 21, 2020, 2:00pm

There is different and there is no timer…

When you refresh the page it randomly change the image…

chrishsl · April 21, 2020, 3:02pm

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.

Pealco · April 21, 2020, 10:06pm

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.

chrishsl · April 22, 2020, 10:31am

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