No featured images on mobile devices in Headway content block - part 1

The current client project I’m working on is designed mobile-first and, for pages like the blog roll and archives, has different layout requirements when those layouts are shown on a mobile device: featured post images should not show on smaller screens and slower connections.

First, easy, wrong solution

Using CSS to hide the images on a mobile device using meta queries is an option but not a good one: the image will be completely loaded, hence both server and device bandwidth used, but the image will be hidden.

@media all and (max-width: 520px){
    .post-thumbnail{
        display: hidden;
    }
}

It’s just a waste of resources.

Responsive grid

Headway themes comes with a responsive grid that will create a first classic column arrangement of the content but it’s not built in a mobile-first mentality.
I do not want featured images to be loaded at all on mobile devices and avoid wasting bandwidth for something that will not be seen by the user; sadly there is no “do not load featured image on mobile devices” option in the content block. I’m trying to create and use that possibility. [caption id=“attachment_650” align=“aligncenter” width=“1024”] These are not the options you are looking for[/caption]

Class extension setup

Going the same way I’ve used before I’m extending Headway default content scaffolding the new block using a grunt-init template; in the file includes/Block.php I will extend the block class

<?php
namespace respcont;

class Block extends \HeadwayContentBlock {

    public $id = 'respcont';
    public $name = 'Responsive Content';
    public $options_class = '\respcont\BlockOptions';
    public $description = 'An extension of default Headway content block that adds some responsive related settings.';
}

and in the file includes/BlockOptions.php I will extend the block options

<?php
namespace respcont;

class BlockOptions extends \HeadwayContentBlockOptions
{
}

Activating the plugin will now yield a block identical to the default one in options and layout. [caption id=“attachment_651” align=“aligncenter” width=“1024”] A responsive content block appears[/caption]

Adding the option

Once again treasuring past experience I will add the option via the modify_arguments method

namespace respcont;

class BlockOptions extends \HeadwayContentBlockOptions
{
    public function modify_arguments($args = false)
    {
        // call parent original method
        parent::modify_arguments($args);
        // add the option
        $this->inputs['post-thumbnails']['hide-for-mobile'] = array(
            'type' => 'checkbox',
            'name' => 'hide-for-mobile',
            'label' => 'Hide featured image on mobile devices.',
            'default' => false
            );
    }
}

And the option will promptly appear. [caption id=“attachment_652” align=“aligncenter” width=“1024”] The new option[/caption]

In the next post I will use the option just added to avoid loading featured images.