单个模块位置中可变数量模块的 PHP 代码答案

【问题标题】：PHP code for variable numbers of modules in a single module position单个模块位置中可变数量模块的 PHP 代码
【发布时间】：2018-02-28 02:46:05
【问题描述】：

我正在使用 Bootstrap 4.0 从头开始创建 Joomla 3.8 模板。同时我也在自学 Bootstrap 4.0 和 PHP，所以请多多包涵。

在主要组件区域下，我有一个全角位置，我称之为“feature_bottom”。目前，我有两个模块分配给该职位。在宽桌面屏幕上，它们垂直堆叠，每个全宽，但我希望它们并排直到较小的设备断点。在另一个菜单项上，该位置可能有三个或四个模块，因此硬编码模块的列宽是行不通的。

在我的 index.php 中，正文中有这段代码：

<?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; ?>

我无法解决的是如何以及在何处告诉模板在中加屏幕上如果 feature_bottom 位置有两个模块，那么它们应该与 col-md-6 并排，如果共有三个模块，每个模块与 col-md-4 并排，四个模块 col-md-3 以此类推，最多十二个模块分布在三行 col-md-4 上。

我已经在 head 标签上方尝试过这段代码（最多只有 4 个模块用于测试目的）：

<?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";
}
?>

...但什么也没发生。这两个模块仍然相互堆叠。

我做错了什么？

模板可以在这里查看：https://www.vanillasponge.co.uk

更新：27.02.18

如果我通过浏览器的 Web Developer > Inspector 手动编辑页面并在“moduletable”之后添加类“col-md”（对于每个实例），我可以获得我想要的效果（见图）。

Screenshot of manually adjusted modules

如果我在 Joomla 模块高级选项卡中添加“col-md”作为模块类后缀，那么它也（有点）可以工作，但是 a）它会在模块标题下方缩进主要内容，并且 b）我不不想手动执行此操作，主要是因为我的技术不太熟练的客户将来可能必须在未来 18 个月左右更新他们当前的 Joomla 模板时使用此模块的版本才能使用Bootstrap 4. 我不能保证他们会记得添加模块类后缀。

【问题讨论】：

我不了解 Joomla，但查看您的模板我可以看到 $feature_bottom 始终为 1（大概是计算模块而不是模块内的元素）。 col-md-? 类被应用于外部 DIV，而不是模块内的每个元素。我猜你需要在 feature_bottom 模块中进行类更改，而不是现在的位置。
谢谢。所以现在我需要弄清楚如何计算模块中的元素......或者放弃这个想法并拥有四个独立的模块位置并使用 countModules 函数。

标签： php bootstrap-4 joomla3.0

【解决方案1】：

我认为你很接近，看看这是否适合你？

统计 featurebottom 中的模块项数

这个逻辑的Joomla方法是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";
}
?>

将上面的类应用到#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; ?>

给你的模块添加一个类

对于将在 featurebottom 中输出的每个模块，转到模块 > 高级 > 模块类后缀并添加 'featurebottom_item'（无引号，但有前导空格）

CSS 来设置模块宽度的样式

#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;
 }
 }

您可能不得不在 CSS 中使用填充和边距，甚至可能需要添加 display:inline-block; 之类的规则，而我的 php 代码未经测试。虽然你离我很近，但我认为你可以从这里拿走它。

祝你好运！

【讨论】：

谢谢你，大卫。不幸的是，它不起作用。我之前确实尝试过类似的方法，但是正如 Johna 上面所说，它计算的是始终为 =1（或 0）的外部 div，我需要以某种方式计算嵌套在模块内的各个元素。您的解决方案适用于单独的模块位置，我确实通过自发布此问题后添加到模板中的 featuretop1/2/3/4 模块实现了这一点。
是的@Gillian，我刚刚意识到这对你也不太适用，敬请期待；）

【解决方案2】：

我找到了答案（感谢jquery website）。所需要的只是添加到我的 index.php 文件最底部的一个小 jquery 脚本，就在结束 body 标记之前（加上开始和结束脚本标记，这里没有显示：

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

对于像我一样对 Jquery 了解甚少的人来说，这意味着：

.feature-bottom是父div的类，
> div 表示父级的子 div，而
.addClass 将预定义的 css 类添加到这些子项。可以在双引号内添加多个类，每个类用空格分隔，就像在 html 中一样。

【讨论】：