php如果没有图像制作bootstrap列col-md-12

时间:2014-09-16 14:18:02

标签: twitter-bootstrap joomla twitter-bootstrap-3

这是我的第一篇文章,但我过去经常使用过这个网站。我是一个php新手,但我和bootstrap,html,css和Joomla一起玩。

我在Joomla中使用K2,我需要更改K2类别的项目布局(例如:www.caravanningoz.com.au/news)

目前我将图像设置在左侧,带有引导程序3 col-md-5然后使用col-md-7设置图像右侧的介绍文本。

我遇到的问题(我相信许多人已经知道)是因为如果没有上传的图像,那么左边的图像应该是一个很大的空白区域。

我希望能够使用一些PHP代码来说"如果没有图像,则设置删除图像col-md-5并制作introtext col-md-12(因此它适合于整栏)。

这里是k2类别项目布局php文件的大部分代码:

<div class="row">

<div class="catItemView group<?php echo ucfirst($this->item->itemGroup); ?><?php echo ($this->item->featured) ? ' catItemIsFeatured' : ''; ?><?php if($this->item->params->get('pageclass_sfx')) echo ' '.$this->item->params->get('pageclass_sfx'); ?>">
<div class="catItemImage left col-md-5 col-sm-5">

  <?php if($this->item->params->get('catItemImage') && !empty($this->item->image)): ?>
  <!-- Item Image -->

<a class="categoryItemImage" href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
<div class=" grow-up drop-shadow">
<img class="img-responsive caption" src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
            </div>
        </a>

  <?php endif; ?>
</div>

<div class="catItemContent right col-md-7 col-sm-7">
    <!-- Plugins: BeforeDisplay -->
<?php echo $this->item->event->BeforeDisplay; ?>

<!-- K2 Plugins: K2BeforeDisplay -->
<?php echo $this->item->event->K2BeforeDisplay; ?>

  <?php if($this->item->params->get('catItemTitle')): ?>
  <!-- Item title -->
  <h3 class="catItemTitle">
        <?php if(isset($this->item->editLink)): ?>
        <!-- Item edit link -->
        <span class="catItemEditLink">
<a class="modal" rel="{handler:'iframe',size:{x:990,y:550}}" href="<?php echo $this->item->editLink; ?>">
                <?php echo JText::_('K2_EDIT_ITEM'); ?>
            </a>
        </span>
        <?php endif; ?>

    <?php if ($this->item->params->get('catItemTitleLinked')): ?>
        <a href="<?php echo $this->item->link; ?>">
        <?php echo $this->item->title; ?>
    </a>
    <?php else: ?>
    <?php echo $this->item->title; ?>
    <?php endif; ?>

    <?php if($this->item->params->get('catItemFeaturedNotice') && $this->item->featured): ?>
    <!-- Featured flag -->
    <span>
        <sup>
            <?php echo JText::_('K2_FEATURED'); ?>
        </sup>
    </span>
    <?php endif; ?>
  </h3>
  <?php endif; ?>



    <?php if($this->item->params->get('catItemAuthor')): ?>
    <!-- Item Author -->
    <span class="catItemAuthor">
        <?php echo K2HelperUtilities::writtenBy($this->item->author->profile->gender); ?> 
        <?php if(isset($this->item->author->link) && $this->item->author->link): ?>
<a rel="author" href="<?php echo $this->item->author->link; ?>"><?php echo $this->item->author->name; ?></a>
        <?php else: ?>
        <?php echo $this->item->author->name; ?>
        <?php endif; ?>
    </span>
    <?php endif; ?>

<div class="clr"></div>

<div>

            <?php if($this->item->params->get('catItemDateCreated')): ?>
    <!-- Date created -->
    <span class="catItemDateCreated">
        <?php echo JHTML::_('date', $this->item->created , JText::_('DATE_FORMAT_LC3')); ?>
    </span>
    <?php endif; ?>


     <?php if($this->item->params->get('catItemCategory')): ?>
            <!-- Item category name -->
            <span class="catItemCategory">
                <span><?php echo JText::_('K2_PUBLISHED_IN'); ?></span>
<a href="<?php echo $this->item->category->link; ?>"><?php echo $this->item->category->name; ?></a>
            </span>
            <?php endif; ?>


    </div>

2 个答案:

答案 0 :(得分:1)

将它放在您发布的脚本的顶部:

<?php
    if(!empty($this->item->image)) {
        $class = "col-md-5 col-sm-5";
    } else {
        $class = "col-md-12 col-sm-12";
    }
?>

现在您可以使用$class代替“col-md-7 col-sm-7”。

答案 1 :(得分:1)

已经有一个if语句来检查图像是否存在,所以你需要做的就是将容器div放在里面,如下所示:

<?php if($this->item->params->get('catItemImage') && !empty($this->item->image)) { ?>
    <!-- Item Image -->
    <div class="catItemImage left col-md-5 col-sm-5">
        <a class="categoryItemImage" href="<?php echo $this->item->link; ?>" title="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>">
            <div class=" grow-up drop-shadow">
                <img class="img-responsive caption" src="<?php echo $this->item->image; ?>" alt="<?php if(!empty($this->item->image_caption)) echo K2HelperUtilities::cleanHtml($this->item->image_caption); else echo K2HelperUtilities::cleanHtml($this->item->title); ?>" style="width:<?php echo $this->item->imageWidth; ?>px; height:auto;" />
            </div>
        </a>
    </div>
    <div class="catItemContent right col-md-7 col-sm-7">
<?php } else { ?>
    <div class="catItemContent right col-md-12">
<?php } ?>