Headway header block, with options – 02

5-minute read

After some setup in the previous post I will be dealing with adding the first simple theme developer options.

Theme users get one choice, theme developers get many layouts

While the theme user will be given the possibility to make choices about the header in one place only, the Customize screen [caption id=“attachment_732” align=“aligncenter” width=“973”]Here, make choices Here, make choices[/caption] theme developers will get the options to use those choices in different ways any time they use the block in a layout.
The options offered to the theme developer will not allow him to revert a user choice hence a theme developer will not have the option not to show the header image if the user did upload one and the same will apply all throughout the block.

User choices

I will begin taking the user choice of uploading an image into account and will offer the theme developer the following options:

  • if the user did upload an image
    • use the image as a background for the block
    • show the image on the left side of the block
    • show the image on the right side of the block
    • show the image in the center of the block
  • if the user did not upload an image
    • show no image in the block
    • use a default image as a background for the block
    • show a default image on the left side of the block
    • show a default image on the right side of the block
    • show a default image in the center of the block

I’m not taking the user choice about header text into account now for sake of simplicity and the will to build incrementally.

Adding theme user options to theme developer options

I will add the user possible choices in the “User choices” tab in the block options, its first incarnation will take into account the two possible user choices and allow the theme designer to set a default header image. [caption id=“attachment_736” align=“aligncenter” width=“1024”]Default settings Default settings[/caption] [caption id=“attachment_737” align=“aligncenter” width=“1024”]Pick a default image Pick a default image[/caption]

Using theme user and theme developer options, a first build

The first version of the headerlogo\Block::content function will take theme user and some theme developer choices into account

public function content($block)
{
// get the theme user choice about the header image
// defaults to false
    $headerImage = get_theme_mod('header_image', 'remove-header');
    $imageSrc = $headerImage;
    if ($headerImage == 'remove-header') {
        // the user does not want to show an header image
        // does theme developer wishes to use a default image?
        // options for select controls are saved by their index
        // show no image is the 0 index option
        $useDefaultImage = \HeadwayBlocksData::get_block_setting($block, 'use-default-image');
        if (!$useDefaultImage) {
            // nothing will be printed to the page but before and
            // after filter will be fired the same
            $this->theHeader();
        }
        // the image source is set to default image one
        // not checking if the theme developer actually set it or not
        $imageSrc = \HeadwayBlocksData::get_block_setting($block, 'default-image-src');
    }
    // echo the markup to the page
    $this->theHeader($imageSrc);
}
protected function theHeader($imageSrc = null)
{
    do_action('headway_before_header_link');
    // no image source then do not print the image markup to the page
    if (!is_null($imageSrc)) {
        echo '<a href="' . home_url() . '" class="banner-image">';
        echo '<img src="' . $imageSrc . '" alt="' . get_bloginfo('name') . '" />';
        echo '</a>';
    }
    do_action('headway_after_header_link');
}

The result is not worth showing for its lack of any appeal.

Adding a theme wide option

The above code will allow the user to upload images of any size to be used in the theme header and that might not be the best course of action.
The options I’ve added in the code above are all specific to the current block instance while setting size constraints for the header image will apply to any block; the theme user gets one access point (the Customize menu) and hence his choice has to always apply independently of the current layout; any constraint to theme user options will have to be valid for any block.
Headway Visual Editor comes with general setup (theme-wide) panels and it makes sense adding this block theme wide-options there beside the grid setup panel [caption id=“attachment_742” align=“aligncenter” width=“1024”]There where no panel has ever been before There where no panel has ever been before[/caption] The key code used to obtain such a result is in the headerlogo\Main class

public function __construct(\tad\wrappers\ThemeSupport $themeSupport = null)
{
    add_action('after_setup_theme', array($this, 'blockRegister'));
    add_action('init', array($this, 'extend_updater'));
    // add custom header image support
    $this->themeSupport = new ThemeSupport();
    $this->themeSupport->add('custom-header');
    // register this block theme-wide options
    // but do it after headway theme setup
    add_action('after_setup_theme', array($this, 'addVisualEditorPanels'));
}
public function addVisualEditorPanels()
{
    // include the class defining those options
    include_once dirname(__FILE__) . '/HeaderImagePanel.php';
    // register the visual editor panel
    $class = '\headerlogo\HeaderImagePanel';
    $tag = 'headway_visual_editor_display_init';
    // hook in with a priority higher than the one Headway registers
    // its own setup block to have the Header Image options panel show
    // on the right side of it
    $priority = 1000;
    add_action($tag, create_function('', 'return headway_register_visual_editor_panel_callback(\'' . $class . '\');'), $priority);
}

and in the headerlogo\HeaderImagePanel class

<?php
namespace headerlogo;

class HeaderImagePanel extends \HeadwayVisualEditorPanelAPI
{
    public $id = 'header-image';
    public $name = 'Header Image';
    public $mode = 'grid';

    public $tabs = array(
        'dimensions' => 'Dimensions',
        );

    public $tab_notices = array(
        'dimensions' => 'The user is given the option to upload a custom header image for the theme and while the use of that image can be made on a block per block base the dimensions constraints, if any, to that image upload will be applied theme-wide.'
        );

    public $inputs = array(
        'dimensions' => array(
            'dimensions-limits' => array(
                'type' => 'select',
                'name' => 'dimensions-limits',
                'label' => 'Header image dimensions should',
                'tooltip' => 'Setting a dimension limit will allow theme users to crop or resize the image on the fly, do not worry.',
                'options' => array(
                    'be limited',
...

That’s it for today, in the next post I will use the options the theme developer set in this panel to add a more specific theme support.

Code on GitHub

The final code from this article is on GitHub.