Tablet background image at article level

Hi,

Is it possible to add a “Tablet Background Image” as well as the “Mobile Background Image” option at Article level? It seems odd that in lots of components you can set desktop/tablet/mobile images - but here you can only set desktop and mobile images.

The reason I’m asking is that we regularly use a background Article image to fill the width of the screen and then put text over part of it, and it doesn’t work well on tablets.

What we do is use a background image to visually divide the screen into 2 vertical spaces. So we might have a solid colour on the left, but a picture on the right. We then have text on the left over the solid colour part of the image on the left, and an empty column on the right so that the background picture shows.

This works for desktop, and for mobile we can specify a different image that is a solid colour, so you see the text over that in mobile view.

As there is no option to add a background image for tablets you often end up with the text that should be over the solid colour going over the solid colour and the picture, so it looks messy and isn’t very accessible.

So, can we please be able to specify a Tablet Background Image at article level?

Thanks, Nick

P.s. I would have shared screenshots but they are all of our clients work, so I can’t. If this doesn’t make sense I’ll mock something up!

1 Like

Hi @nickwest
I understand what you’re saying, and apologies this is causing issues for you. I think the reason tablet isn’t available is because when the article (and page) items were created, we weren’t at that point accommodating tablet sizes.

I’m not sure when/if we may be able to add tablet size, but I have made a note of your request and will consult the Evolve devs. In the meantime, you could consider this possible work around - create an article style with a background image that you know works at tablet size - then set up a logic trigger that detects when the device that’s viewing is a tablet, and then shows that particular article style. So the logic trigger would look like this:


It’s a bit hacky I know, but could possibly solve the issue for you for now.
Cheers-Sam

2 Likes

Thanks for the reply Sam. Your suggestion is definitely something to consider if we get stuck in the future!

Nick

2 Likes

Feel your pain on that one! I use a similar workaround to Sam’s suggestion, but instead of changing the article style we use the action “show hidden article” and “hide article” to hide the mobile/desktop version of something and reveal an alternate tablet-only version. We then use a transparent blank PNG as a “spacer” and re-crop the desktop background image so it appears above or below the text “underneath” the spacer graphic.

2 Likes