No featured images on mobile devices in Headway content block – part 2

This post follows a previous one and will detail using an option added to Headway Themes default content block to prevent featured post images being loaded and shown when seen on a mobile device.

Reading the code

When called and asked to present its content HeadwayContentBlock class will in turn call the HeadwayContentBlockDisplay class and that defines the function

function display_thumbnail($post, $area = 'above-title') {

if ( !has_post_thumbnail() || !$this->get_setting('show-post-thumbnails', true) || !apply_filters('headway_featured_image_src', wp_get_attachment_image_src(get_post_thumbnail_id(), 'full')) )
    return;
...

that before displaying the featured post thumbnail (the featured image) will check if:

1. the post actually has a post thumbnail and the user wants featured images to be shown
2. if not then if something is returned from the headway_featured_image_src filter

Being an or check if a post has a thumbnail and the user decided to show the featured post images then the filter won’t be applied and returning false in a function hooked to that filter will not prevent the featured image from being shown.

Full use of object-oriented code

Once again I’m appreciating Headway work and will be using method overriding and class extension to accomplish the task at hand.
The function that displays the Content block content is defined in the default content block as

function content($block) {

    $content_block_display = new HeadwayContentBlockDisplay($block);
    $content_block_display->display();

}

I will be overriding that to inject a modified version of the HeadwayContentBlockDisplayClass.

Modified display class

The includes/BlockDisplay file defines the respcont\BlockDisplay class as a simple class extension

<?php 
namespace respcont;

require_once HEADWAY_LIBRARY_DIR . '/blocks/content/content-display.php';

class BlockDisplay extends \HeadwayContentBlockDisplay
{
    public function display_thumbnail($post, $area = 'above-title')
    {
        if ($this->shouldShowThumbnail()) {
            parent::display_thumbnail($post, $area);
        }
    }
    public function shouldShowThumbnail(){
        // get the user setting
        $hideForMobile = \HeadwayBlocksData::get_block_setting($this->block, 'hide-for-mobile', false);
        if (wp_is_mobile() and $hideForMobile) {
            return false;
        }
        return true;
    }
}

that will use the parent display_thumbnail function to eventually display the post featured image after some checks.

Modified content function

In my includes/Block.php file I will override the content function to use the modified display class defined above

<?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.';

    public function content($block) {
        $content_block_display = new \respcont\BlockDisplay($block);
        $content_block_display->display();
    }
}

And that will yield the desired result. Again I have to praise Headway for delivering code that’s well documented and easy to use and extend.

Caveat

My block makes use of class extension and that’s very strong coupling with original source code. That’s often the case in WordPress and I’m not making a drama of it but probably a far better result would be achieved using filters and actions. If HeadwayContentBlockDisplay::display_thumbnail read like

function display_thumbnail($post, $area = 'above-title') {

// if there is no post thumbnail or the designer decided not to show post
// thumbnails return
if ( !has_post_thumbnail() || !$this->get_setting('show-post-thumbnails', true) {
    return;
}
// if applying the filter to the image source returns false then return
if ( !apply_filters('headway_featured_image_src', wp_get_attachment_image_src(get_post_thumbnail_id(), 'full')) ) {
    return;
}

// go on and display
... 

then hooking into the headway_featured_image_src filter would do.