Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Responsive layout and ACF fields

  • Hello

    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.

  • Hi there,

    do you have this layout setup ? And if so could i see it ?

  • Hi

    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.

    Example page: https://www.rockmybusiness.fi/rock-my-business-kumppanina-polionvastaisessa-tyossa/

    ACF fields
    – Kuva (means Image)
    – Mobiilikuva (means Mobile Image)

    Pics
    https://ibb.co/FKBLkmk
    https://ibb.co/XSTWnyK

  • Hi there,

    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.

    If you’re alright with that, then that should be good. Otherwise, you might need javascript to have something that works with the exact viewport width. Performance-wise, this may not be optimal.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.