How to Create Responsive Cover Block? (Updated 2022)

Want to have a different image for the Cover block on Desktop and Mobile? Visit us to learn how.

One basic feature that is lacking from Gutenberg’s Cover block is setting different images for desktop and mobile.

In this article, we will show two methods to do it: Simple and Advanced.

Simple Method: Custom Style

Create two custom styles: “Desktop Only” and “Mobile Only”.

Then create two Cover blocks, each having its respective style. This way you can set different image for the one appearing in Desktop and Mobile.

It’s not pretty, but it works!

Here’s the code to register custom styles and the CSS:

add_action('init', 'my_register_cover_styles');
add_action('wp_enqueue_scripts', 'my_enqueue_cover_assets', 99);

function my_register_cover_styles() {
  register_block_style('core/cover', [
    'name' => 'desktop-only',
    'label' => 'Desktop Only',
  ]);

  register_block_style('core/cover', [
    'name' => 'mobile-only',
    'label' => 'Mobile Only',
  ]);
}

function my_enqueue_cover_assets() {
  $dir = get_stylesheet_directory_uri() . '/css';
  wp_register_style('my-cover', $dir . '/my-cover.css', false);
}
@media (max-width: 768px) {
  .wp-block-cover.is-style-desktop-only {
    display: none;
  }
}

@media (min-width: 767px) {
  .wp-block-cover.is-style-mobile-only {
    display: none;
  }
}

Advanced Method: Custom Control

Use JavaScript to add new control into the Cover block as shown above. This looks more professional, although quite complex to implement.

Our goal is to wrap the image in a <picture>. This way, the browser will only load the image needed.

<!-- BEFORE -->

<div class="wp-block-cover">
  <img class="wp-block-cover__image-background" src="...">
  ...
</div>

<!-- AFTER -->

<div class="wp-block-cover">
  <picture>
    <source srcset="..." media="(max-width:767px)">
    <img class="wp-block-cover__image-background" src="...">
  </picture>
  ...
</div>

STEP 1: The JavaScript

Here we have my-cover.js. We won’t explain the syntax since it’s quite complex. If you want to learn from the basics, check out our Gutenberg Tutorial.

Then, enqueue the script. Change the directory according to your folder structure:

add_action('enqueue_block_editor_assets', 'enqueue_responsive_cover', 100);

function enqueue_responsive_cover() {
  $dir = get_template_directory_uri() . '/js';
  wp_enqueue_script('my-cover', $dir . '/my-cover.js', [ 'wp-blocks', 'wp-dom' ] , null, true);
}

Now check out the Cover block in Editor. Does the Mobile Upload section show up?

A common mistake is enqueuing the wrong directory. Open the browser’s console to see whether there is a 404 error for the JS file.

STEP 2: Modify Rendering Function

We will filter the rendering method and use Regex to wrap the image in <picture>.

add_filter('render_block_core/cover', 'my_responsive_cover_render', 10, 2);

function my_responsive_cover_render($content, $block) {
  // If has mobile image
  if (isset($block['attrs']['mobileImageURL'])) {
    $image = $block['attrs']['mobileImageURL'];
    $content = preg_replace(
      '/<img class="wp-block-cover__image.+\/>/Ui',
      "<picture><source srcset='{$image}' media='(max-width:767px)'>$0</picture>",
      $content
    );
  }

return $content;
}

Done! Check out the Cover block in frontend and you will see the <img> wrapped in <picture> and become responsive.

Conclusion

So which method to choose?

If it’s your personal website, using the Simple method is fine.

But for the client website, it will look more professional if you use the Advanced method. It’s easier to edit and less prone to mistakes too.

Let me know if you have any question in the comment below. Thank you for reading.

Default image
Henner Setyono
A web developer who mainly build custom theme for WordPress since 2013. Young enough to never had to deal with using Table as layout.
Leave a Reply

7 Comments

  1. This is just what I need. I tried the Simple Method but doesn't seem to work. The block only saves one style, either mobile or desktop. Whichever was set last, that's what is used on the page.

    I'm not a developer, but I don't see how it would work without changing or adding code to change how the block actually functions. Just adding style options doesn't appear to give the block the ability to save two different images.

    Any suggestions, or am I doing something wrong?

    Thanks

    • Hi tony,

      The idea of the simple method is having two Cover block, one having Desktop Only and the other having Mobile Only style

      • Ah yes, that makes perfect sense now. You may want to mention that in the article. Thank you.

        • Yes, thanks for the input, will revise my article

          • Hi, my appreciation for your work.

            I've been trying for months to implement something similar, but with one substantial difference, I don't want to hide the photo in mobile (or in desktop) with display:none, for the simple fact that the browser anyway loads it and this slows down the page for the user and for pagespeed (small problem in desktop but important in mobile because the hidden photo for desktop can weigh a lot). And so I'm asking if in your opinion it is possible to change the second mode you proposed so that wp_is_mobile is used to make the photo appear in mobile and its negation to make the photo appear in desktop.

            Thank you! Regards Harry