Re-using Joomla module positions not setting Bootstrap Column width correctly

Question

I want to use 1 module position (showcase) but have duplicate modules set the bootstrap column width based on the amount of modules assigned to that position.

I have written the following code:

<div class="row">
    <?php if($this->countModules('showcase')) : ?>
        <div class="col-md-<?php echo (12/$this->countModules('showcase'));?>">
            <jdoc:include type="modules" name="showcase" />
        </div>
    <?php endif; ?>
</div>

but this is outputting the following html:

<div class="row">
    <div class="col-md-6">
        <div class="block">
            <h2 class="header">Show Case 1</h1>
            <div class="custom">
                <p>This is a test</p>
            </div>
        </div>
        <div class="custom">
            <h2 class="header">Show Case 2</h1>
            <p>This is a test</p>
        </div>
    </div>
</div>

rather than (how I want it to look):

<div class="row">
    <div class="col-md-6">
        <div class="block">
            <h2 class="header">Show Case 1</h1>
            <div class="custom">
                <p>This is a test</p>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="block">
            <h2 class="header">Show Case 2</h1>
            <div class="custom">
                <p>This is a test</p>
            </div>
        </div>
    </div>
</div>

Answer 1

The reason being is that you've got your jdoc:include inside the following wrapper:

<div class="col-md-<?php echo (12/$this->countModules('showcase'));?>">

So all the modules assigned to this position will be displayed within this wrapper.

---

Have a look at the following file:

templates/YOUR_TEMPLATE/ html/modules.php

In here you'll see the variables and HTML markup that will be wrapped around your module. Your best bet will be to do the following:

index.php:

<?php if ($this->countModules('showcase')) : ?>
    <div class="row">
        <jdoc:include type="modules" name="showcase" style="mystyle" />
    </div>
<?php endif; ?>

Then add a new mocChrome to the file mentioned above:

function modChrome_mystyle($module, &$params, &$attribs)
{
    $moduleTag     = $params->get('module_tag', 'div');
    $bootstrapSize = (int) $params->get('bootstrap_size', 0);
    $moduleClass   = $bootstrapSize != 0 ? ' col-md-' . $bootstrapSize : ' col-md-12';
    $headerTag     = htmlspecialchars($params->get('header_tag', 'h3'), ENT_COMPAT, 'UTF-8');
    $headerClass   = htmlspecialchars($params->get('header_class', 'page-header'), ENT_COMPAT, 'UTF-8');

    if ($module->content)
    {
        echo '<' . $moduleTag . ' class="' . htmlspecialchars($params->get('moduleclass_sfx'), ENT_COMPAT, 'UTF-8') . $moduleClass . '">';

            if ($module->showtitle)
            {
                echo '<' . $headerTag . ' class="' . $headerClass . '">' . $module->title . '</' . $headerTag . '>';
            }

            echo $module->content;
        echo '</' . $moduleTag . '>';
    }
}

Note I have used style="mystyle" (default) in the index.php and the name of the modChrome function is modChrome_mystyle.

You'll also see that the bootstrap size will default to 12 is not specified.

Once you've done all this, ensure that you assign this style to the modules in this position.

Hope this helps