如何在博客布局中使 Joomla 介绍图像响应答案

【问题标题】：How to make Joomla Intro Image Responsive in Blog Layout如何在博客布局中使 Joomla 介绍图像响应
【发布时间】：2016-01-12 03:10:33
【问题描述】：

我想问如何让 Joomla Intro Image 响应。由于我正在处理死胡同，我还没有成功使其响应。我目前正在使用 Joomla 3.4.4 创建基于引导程序的模板

我正在尝试做的事情：

但我无法使简介图像缩略图响应：

代码如下：

<div class="news-item">
  <div class="row">
    <div class="col-xs-12 col-sm-offset-1">
      <a href="<?php echo $link; ?>"><h3 class="news-title"><?php echo $this->escape($this->item->title); ?></h3></a>
    </div>
  </div><br>
  <div class="row">
    <div class="hidden-xs col-sm-1">
      <span class="date"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('d'))); ?></span><br><span class="month"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('M'))); ?></span>
    </div>
    <div class="col-xs-4 col-sm-3">
      <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
</a>
    </div>
    <div class="col-xs-8 col-sm-8">
      <?php echo JHtmlString::truncate(strip_tags($this->item->text), 400); ?>
      <a href="<?php echo $link; ?>">Read More</a>
    </div>
  </div>
</div>

对于此特定代码的任何建议将不胜感激：

&lt;?php echo JLayoutHelper::render('joomla.content.intro_image', $this-&gt;item); ?&gt;

提前致谢！

【问题讨论】：

标签： php css twitter-bootstrap joomla

【解决方案1】：

gw2 不错 :) 但想念旧的 gw。

顺便说一句，你的代码没有容器（或者可能是之前的？）：

    <div class="news-item container">  
  <div class="row">
    <div class="col-xs-12 col-sm-offset-1">
      <a href="<?php echo $link; ?>"><h3 class="news-title"><?php echo $this->escape($this->item->title); ?></h3></a>
    </div>
  </div>  
  <div class="clearfix"></div>
  <div class="row">
    <div class="hidden-xs col-sm-1">
      <span class="date"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('d'))); ?></span>
      <br/>
      <span class="month"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('M'))); ?></span>
    </div>
    <div class="col-xs-4 col-sm-3">
      <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    </div> 
    <div class="col-xs-8 col-sm-8">
      <?php echo JHtmlString::truncate(strip_tags($this->item->text), 400); ?>
      <a href="<?php echo $link; ?>">Read More</a>
    </div> 
  </div>
</div>

另外，您在第二行有一个结束，没有一个开始。此外，第一行之后不需要
，只需将其删除或替换为 clearfix div。如果您需要更多空间，请改用 css margin-bottom。

如果你想管理介绍图像，你可以修改 html 输出查看文件夹：template/your_template/html/layouts/joomla/content/intro_image 或从根目录只是 layouts/joomla/content/intro_image

希望对你有帮助，祝你好运！

【讨论】：

啊是的， item); ?> 多么笨拙的我。非常感谢您的建议，我真的很感激。但我仍在努力修改 joomla 介绍图像 php 代码的 html 输出，稍后我会更新结果。干杯!很高兴你也玩GW系列^.^
天哪，我终于按照你的指示做了。我编辑了根目录 layouts/joomla/content/intro_image.php 并添加了 bootstrap class="img-responsive" 它就像魅力一样。非常感谢！问题解决了！

【解决方案2】：

可以用一行CSS简单地修复：

img.[image-class]{ max-width:100%;}

如果您有实时页面或 Fiddle，则很容易向您展示修复方法。
问候
Nabeel

【讨论】：