Create a clickable front page image

[nstratman]

Is there a standard way in Xtreme I can create a single full screen front page image which is clickable anywhere? That front page will then link to the home page of a site in development. My only effort so far is to create a draft page, use the Xtreme per page options to omit pretty much everything then set the featured image as the background image. It looks just as I want but I can’t see how to add a url to the image to link to the home page.

 

Thank you.

[scrambler]

I assume you meant using the raw page template.

For the link, you could probably create a small transparent (.png) image, then add that image in the page with a link and a 100% 100% size using 100vw and 100vh (Viewer width and height CSS) (see below)

[scrambler]

The html for the transparent image link would look like

<a href="LinkUrl" ><img src="ImageUrl"  style="width:100vw;height:100vh;" /></a>

[nstratman]

Thanks for this. Armed with your code I was able to achieve what I wanted without needing to use the transparent png. Using the raw template (I hadn’t done this, I was using my normal template and using per page to omit everything). Then instead of the featured image I put a SiteOrigin html widget on the page and added your code using the required full screen image as my source and linking to the home page. It works just as I hoped so thank you.

By the way, this front page is for the site about which I asked for your advice and we had a brief discussion about the merits of subdomains and subfolders. At the same time I was experimenting with the per page options in Xtreme. I found that I could achieve what I wanted by switching off much of the main site layout and using 1 or 2 per page layout widgets. There aren’t many pages in the site and half of those are similar. So I set up my per page options and cloned the page a few times to get me started.I mention all of this because I have strong reasons to be very grateful for the extensive per page options and overall flexibility of Xtreme.

[nstratman]

Having said it works fine, it doesn’t respond properly in portrait mode on a phone. Admittedly the image is very much a landscape design, but the vertical dimension is not scaling leading to a squashed image.

Furthermore now that I have added cookie consent to the page using one of the standard plugins, the consent statement works fine for the first time visit, but the statement also shows up when you scroll the page. Do they all work like that?

This is the html, inserted as described in the earlier post above into the front page, to allow then a click into the home page.

[nstratman]

Woops the html has been interpreted, didn’t think of that. To save looking at the source here it is commented out.

<!– 

–>

 

Edit: Clearly commenting out doesn’t do what I intended.

[scrambler]

To post code, you need to give it the preformatted style from the tool bar.

That said I am not following what you are saying.

I see your landscape image and if I reduce the browser size to any format portrait or landscape, the image is there at the top undistorted.

As for your cookie consent it does not seem to work, the ACCEPT is not clickable and the close button does nothing.

Using the browser development tool console I see the error below

(index):108 Uncaught ReferenceError: jQuery is not defined
at (index):108

Which may explain why it is broken

 

[Author]

Posts