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.

These are not the options you are looking for
These are not the options you are looking for

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.

A responsive content block appears
A responsive content block appears

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.

The new option
The new option

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

I appreciate your input