PHP code for variable numbers of modules in a single module position

Question

I am creating a Joomla 3.8 template from scratch using Bootstrap 4.0. At the same time I am teaching myself both Bootstrap 4.0 and PHP as I go along, so please bear with me.

Under the main component area I have a full-width position which I have called 'feature_bottom'. At the moment, I have two modules assigned to that position. On a wide desktop screen they are stacked vertically, each full width, but I want them to be side-by-side until the smaller device break points. On another menu item there might be three or four modules in that position, so hard-coding the column width for the modules doesn't work.

In my index.php I have this code in the body:

<?php if ($this->countModules('featurebottom')) : ?>                          
  <div class="container-fluid">
       <div class="row">
        <div id="featurebottom" class="<?php echo $featurebottom_width; ?> featurebottom">
            <jdoc:include type="modules" name="featurebottom" style="xhtml"/>
        </div>
       </div>
    </div>
<?php endif; ?>

What I can't work out is how and where to tell the template that on medium plus screens if there are two modules in the feature_bottom position then they should be side-by-side with col-md-6 each, if there are three modules they are side-by-side with col-md-4 each, four modules col-md-3 each and so on, up to twelve modules spread over three rows of col-md-4 each.

I have tried this code above the head tag (only up to 4 modules for testing purposes):

<?php if ($featurebottom == 2) {
    $featurebottom_width = "col-md-6";
} elseif ($featurebottom == 3) {
    $featurebottom_width = "col-md-4";
} elseif ($featurebottom == 4) {
    $featurebottom_width = "col-md-3";
} else {
    $featurebottom_width = "col-md-12";
}
?>

... but nothing happens. The two modules are still stacked above each other.

What am I doing wrong?

The template can be viewed here: https://www.vanillasponge.co.uk

Update: 27.02.18

If I edit the page manually via a browser's Web Developer > Inspector and add the class 'col-md' after 'moduletable' (for each instance) I can get exactly the effect I want (see image).

Screenshot of manually adjusted modules

If I add " col-md" as a Module Class Suffix in the Joomla module Advanced Tab then it also (sort of) works, but a) it double indents the main content underneath the module title, and b) I don't want to have to do this manually, mainly because my somewhat less techy clients may have to use a version of this module in the future when their current Joomla templates are updated by me in the next 18 months or so in order to work with Bootstrap 4. I can't guarantee that they would remember to add a module class suffix.

I don't know Joomla but looking at your template I can see $feature_bottom is always 1 (presumably it is counting the module rather than the elements inside the module). The col-md-? class is being applied to an outer DIV, not to each element inside the module. I am guessing you need to make your class changes inside of the feature_bottom module instead of where you have them now. — johna
– johna, Commented Feb 21, 2018 at 0:20
Thank you. So now I need to work out how to count the elements in the module... or scrap that idea and have four separate module positions and use the countModules function. — Gillian
– Gillian, Commented Feb 21, 2018 at 9:49

David Taiaroa · Accepted Answer · 2018-02-23 00:19:36Z

0

I think you are close, see if this works for you?

Count the number of module items in featurebottom

The Joomla method for this logic is countModules https://docs.joomla.org/Counting_modules_in_a_given_module_position

<?php if($this->countModules('featurebottom') == 2){
    $featurebottom_items = "two";
} elseif ($this->countModules('featurebottom') == 3) {
    $featurebottom_items = "three";
} elseif ($this->countModules('featurebottom') == 4) {
    $featurebottom_items = "four";
} else {
    $featurebottom_items = "one";
}
?>

Apply the class from above to #featurebottom

<?php if ($this->countModules('featurebottom')) : ?>                          
  <div class="container-fluid">
       <div class="row">
        <div id="featurebottom" class="<?php echo $featurebottom_items; ?> featurebottom">
            <jdoc:include type="modules" name="featurebottom" style="xhtml"/>
        </div>
       </div>
    </div>
<?php endif; ?>

Add a class to your modules

For each of the modules which will have output in featurebottom, go to module > advanced > module class suffix and add ' featurebottom_item' (no quotation marks, but with a leading space)

CSS to style the width of your modules

#featurebottom .featurebottom_item{
width:100%;
position: relative;   /* replicate Bootstap column styling */
padding-right: 15px;
padding-left: 15px;
} 

 @media (min-width: 992px){
 #featurebottom.one .featurebottom_item{
 width:100%;
 }

 #featurebottom.two .featurebottom_item{
 width:50%;
 float:left;
 }

 #featurebottom.three .featurebottom_item{
 width:33%;
 float:left;
 }

 #featurebottom.four .featurebottom_item{
 width:25%;
 float:left;
 }
 }

You'll probably have to play with paddings and margins in the CSS, and you may even need to add rules like display:inline-block;, and my php code is untested. You are so close though that I think you'll be able to take it from here.

Good luck!

edited Feb 23, 2018 at 0:19

answered Feb 21, 2018 at 13:12

David Taiaroa

25.5k7 gold badges67 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gillian Over a year ago

Thank you, David. Unfortunately, it doesn't work. I did try something like that before but, as Johna says above, it's counting the outer div which will always be =1 (or 0) and I need to somehow count the individual elements that are nesting inside the module. Your solution works for separate module positions and I have indeed achieved this with the featuretop1/2/3/4 modules which I have added to the template since posting this question.

David Taiaroa Over a year ago

yes @Gillian, i just realised this won't quite work for you too, stay tuned ;)

Gillian · Accepted Answer · 2018-02-27 18:46:05Z

0

I've found the answer (with thanks to the jquery website). All it takes is a tiny jquery script added to the very bottom of my index.php file, just before the closing body tag (plus opening and closing script tags, which don't show here:

<script>
$( ".feature-bottom > div" ).addClass( "col-md" );
</script>

What this means, for those who know as little about Jquery as me, is:

.feature-bottom is the class of the parent div,
> div means child divs of the parent, and
.addClass adds a predefined css class to those children. It is possible to add more than one class inside the double quotes, each separated with a space, just as you would in html.

answered Feb 27, 2018 at 18:46

Gillian

3074 silver badges12 bronze badges

Collectives™ on Stack Overflow

PHP code for variable numbers of modules in a single module position

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related