Topic: Responsive layout and ACF fields

[email protected]
February 6, 2024 at 5:29 am

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.
David
February 6, 2024 at 6:24 am

Hi there,

do you have this layout setup ? And if so could i see it ?
[email protected]
February 8, 2024 at 7:11 pm

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
Fernando
February 8, 2024 at 7:22 pm

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.

February 29, 2024 at 4:06 am

Thank you. Not the biggest fan of wp_is_mobile() like solution but got working solution real fast this way.

For the sake of documentation:

add_filter(
  'render_block',
  function ($block_content, $block) {
    if (
      !is_admin() &&
      !empty($block['attrs']['className']) &&
      'article-hero' === $block['attrs']['className']
    ) {
      $image = get_field('image', get_the_ID());
      $mobileimage = get_field('mobileimage', get_the_ID());

      $heroimage = $image['sizes']["heroimage"];

      if (wp_is_mobile()) {
        $heroimage = $mobileimage['sizes']["medium_large"];
      }

      $block_content = str_replace('article-hero alignfull"', 'article-hero alignfull" style="background-image: url(' . $heroimage . ');"', $block_content);
    }

    return $block_content;
  },
  10,
  2
);

David
February 29, 2024 at 6:03 am

Just an FYI:
If you’re going to use the wp_is_mobile you will need to ensure your any page caching on the site has separate caches for Mobile and Desktop

[email protected]

February 29, 2024 at 8:41 am

Great point. New iteration for simpler cache solution. Desktop image comes from Gutenberg Blocks Element by default with dynamic binding. Solution below offers custom hero background image for mobile devices.

add_filter(
  'render_block',
  function ($block_content, $block) {
    if (
      !is_admin() &&
      !empty($block['attrs']['className']) &&
      'article-hero' === $block['attrs']['className']
    ) {

      $mobiilikuva = get_field('mobiilikuva', get_the_ID());
      $taustakuva = is_array($mobiilikuva) ? $mobiilikuva['sizes']["medium_large"] : '';

      if (strlen($taustakuva)) {
        $block_content = str_replace('article-hero alignfull">', 'article-hero alignfull"><style>@media only screen and (max-width: 768px) { .article-hero { background-image: url(' . $taustakuva . '); } }</style>', $block_content);
      }
    }

    return $block_content;
  },
  10,
  2
);

David
February 29, 2024 at 1:11 pm

Nice !

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

Are you a GenerateCustomer?

Just browsing?

Responsive layout and ACF fields