Drupal视图水平布局的行

时间:2015-01-24 11:07:42

标签: responsive-design drupal-7 drupal-views

我是Drupal主题的新手,并且负责在首页上显示文章列表。我创建了一个视图,还创建了自定义视图模板,以便可能覆盖样式和标记。我有响应式标记准备好显示Drupal文章内容。当前视图显示文章图像,标题和正文作为垂直列表,我试图使用给定标记水平显示它们。我花了几个小时试图找到一种方法来做到这一点,但没有成功,任何帮助将不胜感激。布局如下:

enter image description here

标记可以在这里找到:

<section class="category-row people-row container">
    <h1><a href="#">Category</a></h1>
    <div class="row">
    <!-- medium article format-->
    <article class="col-md-8 col-xs-12 article-medium pull-left">              <figure><a href="#"><img src="http://xxxx" alt="REPLACE THIS WITH        STORY TITLE"></a></figure>
        <div class="teaser">
            <h2><a href="#">xyz</a></h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
    </article>

    <!--small article format-->
    <article class="col-md-4  col-xs-6 article-small pull-right mpu-holder">
        <h2 class="hide">Advert</h2>
        <div>
            <img src="images/mpu.jpg" width="300" height="250" alt=""/>
        </div>
    </article>

    <!--small article format-->
    <article class="col-md-4  col-xs-6 article-small pull-right">
        <figure><a href="#"><img src="http://xxxx" alt="REPLACE THIS WITH STORY TITLE"></a></figure>
        <div class="teaser">
            <h2><a href="#"> Etiam porta sem malesuada magna mollis euismod sem malesuada magna mollis euismod</a></h2>
            <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
        </div>
    </article>

    <!-- link to category listing page-->
    <div class="col-md-12 clearfix">
        <a href="#" class=" more-link">More people stories &#8594;</a>
    </div>

  </div> <!--end row-->

</section> <!-- end container -->

由于

1 个答案:

答案 0 :(得分:1)

通过创建2个视图(或更准确地说,两个显示视图),可以最好地实现目标。

  • 主区域的一个显示 - 可以设置为仅显示第一个结果。
  • 侧边栏的一个显示。在第二个视图中,您可以将广告粘贴在标题区域中,然后将该视图作为块输出。将其设置为跳过第一个结果,该结果将由主视图显示。

然后,您可以在panels中嵌入每个显示,并为每个显示提供不同的上下文。这将允许您添加尽可能多的这些&#34;集&#34;根据需要添加到您的页面,每个页面显示来自不同分类术语的内容。