Chronicles of a build - qTranslate Headway Theme block 01

I’ve been requested to allow the users of the site I’m currently implementing to see different language versions of posts and pages; on the other side editors should be able to edit all the versions in the same post.
After a quick search I’ve came across qTranslate plugin and found it satisfying the actual needs.

Using Headway for the current project

Since I’m using Headway for the current project, and can see myself using the same plugin in at least another project, I will not print the plugin output to the page using the custom code block but will give it a try for testing purposes. After creating a new custom code block [caption id=“attachment_663” align=“aligncenter” width=“1024”] Adding a custom code block[/caption] I will be setting its content to the function that will print qTranslate language selection drop-down to the page

<div class="qtblock-language-selection">
    <?php 
    if (function_exists('qtrans_generateLanguageSelectCode')) {
        echo qtrans_generateLanguageSelectCode('dropdown');
    }
    ?>
</div>

[caption id=“attachment_664” align=“aligncenter” width=“1024”] Editing the custom code block[/caption] [caption id=“attachment_665” align=“aligncenter” width=“1024”] Here it is[/caption] I could then go on and use the live CSS editor to customize the style of the dropdown further but would like some more structure to it.

Scaffold a new block

Again I will use grunt-init Headway Block template to scaffold the new block and get an empty but working block added to Headway list of blocks.
[caption id=“attachment_666” align=“aligncenter” width=“1024”] The new block[/caption] The first implementation of the block will yield the same visual result as before.
The content of the includes/Block.php file is

<?php
namespace qtblock;

class Block extends \HeadwayBlockAPI {

    public $id = 'qtblock';
    public $name = 'qTranslate language chooser';
    public $options_class = '\qtblock\BlockOptions';
    public $description = 'An Headway block to display qTranslate plugin language chooser on the page.';

    public function content($block) {
        if (function_exists('qtrans_generateLanguageSelectCode')) {
            $out = '';
            $out .= '<div class="qtblock-language-selection">';
            $out .= qtrans_generateLanguageSelectCode('dropdown');
            $out .= '</div>';
            echo $out;
        }
    }
}

while the options are non-existing in the includes/BlockOptions.php file

<?php
namespace qtblock;

    class BlockOptions extends \HeadwayBlockOptionsAPI {
    }

Options maybe?

The block as is is missing any style and options and I do not see me appreciating this later so I will add a first option to decide which kind of layout, among the possible ones the function will allow, to show. qTranslate allows four 4 possible outputs for the qtrans_generateLanguageSelectCode function:

• image
• text
• both
• dropdown

and I will add an option to the block to choose the output among those.

Adding and using the first option

I will add an option, display-mode to the BlockOptions class

<?php
namespace qtblock;

class BlockOptions extends \HeadwayBlockOptionsAPI
{

    public $tabs = array(
        'settings' => 'Settings'
        );

    public $inputs = array(

        'settings' => array(
            'display-mode' => array(
                'type' => 'select',
                'name' => 'display-mode',
                'label' => 'Display mode',
                'default' => 'dropdown',
                'options' => array(
                    'image' => 'Images',
                    'text' => 'Text',
                    'both' => 'Images and text',
                    'dropdown' => 'Dropdown'
                    )
                )
            )
        );
}

and will use it in the Block class

<?php
namespace qtblock;

class Block extends \HeadwayBlockAPI
{

    public $id = 'qtblock';
    public $name = 'qTranslate language chooser';
    public $options_class = '\qtblock\BlockOptions';
    public $description = 'An Headway block to display qTranslate plugin language chooser on the page.';

    public function content($block)
    {
        if (function_exists('qtrans_generateLanguageSelectCode')) {
            $displayMode = \HeadwayBlocksData::get_block_setting($block, 'display-mode', 'dropdown');
            $out = '';
            $out .= '<div class="qtblock-language-selection">';
            $out .= qtrans_generateLanguageSelectCode($displayMode);
            $out .= '</div>';
            echo $out;
        }
    }
}

Choosing the images display mode will yield the desired, still not styled and ugly, results [caption id=“attachment_667” align=“aligncenter” width=“996”] Display mode can now be choosen[/caption] [caption id=“attachment_668” align=“aligncenter” width=“1024”] Ugly flags[/caption]

Next steps and the code

I will add styling, styling options and the possibility to prepend and append text to the plugin output in the next iterations.
The code shown in the article can be found on GitHub.