I have multiple sites that uses legacy templating system for hero images. I would like to update them to Gutenberg era. Hero has 2 ACF Image fields, one for desktops & tables and second one for mobiles. If mobile image doesn’t exists (as very often is the case) then it should fallback to desktop version of the hero image.
I can propably make this work with render_block but is there any way to know if it is mobile, tablet or desktop viewport like using generateblocks hide on desktop/tablet/mobile feature?
Images are currently set as background-image but setting them with object-fit is option as well.
Any help is appreciated.
do you have this layout setup ? And if so could i see it ?
Implementation is super simple. The key point would be to be able to use same ACF fields since it would require a lot of work to update them all in all websites.
– Kuva (means Image)
– Mobiilikuva (means Mobile Image)
I see. The only PHP function is wp_is_mobile(). Reference: https://developer.wordpress.org/reference/functions/wp_is_mobile/
The caveat is it only works for real mobile devices. So, if you view the site on Desktop but with a small viewport, wp_is_mobile would return false and the background image from your ACF field won’t be grabbed.
- You must be logged in to reply to this topic.