How can I add a class to each module produced?

1

I want to create my own template and I want it to be based on Bootstrap 4 (but I might change in the future).

I can create my module positions, but how do I then assign a class to each module i.e. class="col"

Eoin

Posted 2018-06-12T17:58:38.483

Reputation: 692

I assume you mean without adding it to the "Module Class Suffix" field? – Lodder – 2018-06-14T21:35:35.170

Yes, Understand how to do that. I'm building a template, I don't want to add it to each and every module. I suppose it would make sense to create overrides using the same framework, but in the interests of learning I'd like to understand how to make my own classes using any framework. – Eoin – 2018-06-14T22:13:04.157

1

In which case why not create a modChrome? Check the Joomla 4 Atum template ones for an example: https://github.com/joomla/joomla-cms/blob/4.0-dev/administrator/templates/atum/html/modules.php

– Lodder – 2018-06-14T23:51:17.497

@lodder ledge, thanks so much! – Eoin – 2018-06-15T15:55:33.053

1You're welcome ;) Be sure to add your code as an answer below and you'll get my upvote – Lodder – 2018-06-15T15:57:34.990

Yeah, sure will – Eoin – 2018-06-15T15:58:18.633

@Lodder so I want my code to be dynamic. Which involves counting the modules in the position, then defining a column class based upon it. But I can't use $this->countModules('position-7') in my module chrome as I can't use $this because I'm not in object context. Any ideas how to overcome this issue? I think it probably means I can't use a module chrome right? Also how to set a default module chrome? – Eoin – 2018-06-17T13:14:28.100

Ignore the default bit I can set that in my template when I call the position like this <jdoc:include type="modules" name="user1" style="custom" /> – Eoin – 2018-06-17T13:15:14.093

@lodder I've added code for now, I'd still like to do it dynamically. Just to add to the above comment about module class suffix. That is one of the major problems with module class suffix. It adds it twice. So if I put col-md-4 then it would add it to the outer div and then the next div, thus making my content much smaller than I want it to be. Do you know if this will be fixed in J4? – Eoin – 2018-06-17T17:13:05.267

You nees to do this in the templates's index.php then. To be honest I'd just suggest using CSS grid...much better than columns – Lodder – 2018-06-17T17:58:15.290

I agree, much better. But since Joomla! Is adopting BS4 and I don't know how to make a template this was my project. But now you mention it, you're right. But you still need defaults so we can use both. – Eoin – 2018-06-17T20:05:53.877

p.s. how on earth would you do this in the templates index.php? You don't have access to the modules from positions. Are you saying you need to find the original call and replicate it? – Eoin – 2018-06-17T21:27:59.100

Answers

0

index.php

// Count the modules
$belowBanner = ($this->countModules('belowBanner'));
...
// if the position below module has modules then output code
        <?php if ($belowBanner) : ?>
// my container div gives the width.  Bootstrap requires a div with the class row for each row.  I also add a section.
            <div class="container">
                <div class="row">
                    <section id="<?php echo "belowBanner" ?>">
// insert a module position.  The type is always modules.  Give it a unique name "belowBanner" and give it the default module chrome of "bootstrap4"
                        <jdoc:include type="modules" name="belowBanner" style="bootstrap4" />
                    </section>
                </div>
            </div>
        <?php endif ?>

module.php which is in the folder /html/

    <?php
    /**
     * @package     Joomla.Administrator
     * @subpackage  Templates.joomla-london
     *
     * @copyright   Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
     * @license     GNU General Public License version 2 or later; see LICENSE.txt
     */
    defined('_JEXEC') or die;
    /**
     * This is a file to add template specific chrome to module rendering.  To use it you would
     * set the style attribute for the given module(s) include in your template to use the style
     * for each given modChrome function.
     *
     * This gives template designers ultimate control over how modules are rendered.
     *
     * NOTICE: All chrome wrapping methods should be named: modChrome_{STYLE} and take the same
     * two arguments.
     */
    /*
     * Module chrome for rendering the module in a belowBanner
     */

    // make sure you name it correctly.  it always starts modChrome and I have named it bootstrap4 as I will be using that framework.  I could have called it anything, but I thought this was the most meaningful/descriptive name.
    function modChrome_bootstrap4($module, &$params, &$attribs)
    {
    // if the module has content
        if ($module->content)
        {
            // Get module params
    // get Bootstrap size and make sure it is returned as an integer
            $bootstrapSize = (int) $params->get('bootstrap_size');
    // if nothing has been selected then just use the class cols
$cols = "col";

    // if the bootstrap class is anything except 0 then insert the class cols- and add the bootstrap size class
            if ($bootstrapSize != '0') {
 $cols = "col-" . $bootstrapSize;}


    // If the modules title is set to show... then show it
            if ($module->showtitle)
            {
                echo '<h2>' .$module->title .'</h2>';
            }
        ?>
    // output a div and add the column class to it.  It will either be col or col-x depending on the bootstrap size.  So perhaps col-6 or col-4
        <div class="items<?php echo " ". $cols;?> ">
            <div class="item">
    // output the module content
                <?php echo $module->content; ?>

            </div>
        </div>

    <?php
        }
    }
    ?>

Eoin

Posted 2018-06-12T17:58:38.483

Reputation: 692

Please could you mark the answer as "accepted" so others know it has been solved? Thanks – Lodder – 2018-06-18T12:49:41.020

Thanks CL have done so. Let me.knoe.if you think there is any way to improve it – Eoin – 2018-06-18T12:54:59.380

1

Couple of minor tweaks if you want to use it: https://pastebin.com/tkFGAM4C

– Lodder – 2018-06-18T13:01:20.297

Thank you, that was very useful. My code was overly wordy. Also a good idea to put the class items before the column numbers. Thanks, much cleaner now, really appreciate you taking the time to do that. – Eoin – 2018-06-18T13:20:02.883

1No worries Eoin. Yeah I normally put hardcoded classes before as it prevents any whitespace if any dynamic class gets added. – Lodder – 2018-06-18T13:22:20.167