I know i'm just scratching the surface, but this is a great module. thank you. my blog layout is getting close. I have a two column custom template. I'd like the left column to not collapse if there is no content (currently an image).

also, i must be missing a class, but i'd like the all the text to fill the grid to the right if a a column can't be collapsed. either solution woud work. appreciate any advice. I've attached a screen shot.

thanks.

CommentFileSizeAuthor
#4 blog_2col_teaser.zip5.16 KBdotman
force-col-width.jpg306.66 KBdotman

Comments

swentel’s picture

swentel commented
Assigned: Unassigned » jyve

Well, the region should be printed in case you selected the 2-col layout (so not the fluid). However, I'm not a frontend guy, so assigning to jyve so he can tell what needs to be done. I figure you'll need to write some css I think (in branch 1 we printed a non breaking space but that was an ugly hack to get the width).

dotman’s picture

dotman commented

thank you. it's a pretty simple template, since i'm new. here the tpl code:

<?php

/**
 * @file
 * Display Suite 2 column template.
 */
?>
<<?php print $layout_wrapper ?> class="ds-blog-2col-tease <?php print $classes;?> clearfix">

  <?php if (isset($title_suffix['contextual_links'])): ?>
  <?php print render($title_suffix['contextual_links']); ?>
  <?php endif; ?>

  <<?php print $left_wrapper ?> class="blog-group-left<?php print $left_classes; ?>">
    <?php print $left; ?>
  </<?php print $left_wrapper ?>>

  <<?php print $right_wrapper ?> class="blog-group-right<?php print $right_classes; ?>">
    <?php print $right; ?>
  </<?php print $right_wrapper ?>>

</<?php print $layout_wrapper ?>>

<?php if (!empty($drupal_render_children)): ?>
  <?php print $drupal_render_children ?>
<?php endif; ?>

and the css:

/**
 * @file
 * Styling for the ds_blog_2col_teaser template.
 */

.ds-blog-2col-tease > .blog-group-left {
  float: left; /* LTR */
  width: 110px;
}
.ds-blog-2col-tease > .blog-group-right {
  float: left; /* LTR */
  width: 470px;
}

thanks.

aspilicious’s picture

aspilicious commented

Can you take a screenshot of your source. I would like to see the layout and region classes added to the source code.

dotman’s picture

dotman commented
StatusFileSize
new blog_2col_teaser.zip5.16 KB

I think this is most of it. you can also see the page here where the left column isn't rendered if no photo is uploaded:

http://mircdev.mplp.org/blog

I've also zipped the custom template. As mentioned, I just followed the tutorial and it's pretty simple.

              <div class="content clearfix">
      <div class="ds-blog-2col-tease node node-blog node-teaser contextual-links-region view-mode-teaser clearfix">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/mirc/node/13/edit?destination=blog">Edit</a></li><li class="node-delete"><a href="/mirc/node/13/delete?destination=blog">Delete</a></li><li class="manage-display last"><a href="/mirc/admin/structure/types/manage/blog/display/teaser?destination=blog">Manage display</a></li></ul></div>  
  <div class="blog-group-left">
      </div>

  <div class="blog-group-right">
    <div class="field field-name-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even" property="dc:title"><h2><a href="/mirc/content/my-6th-and-offset-blog">My 6th and offset blog</a></h2></div></div></div>By Lillie Wolff Monday, April 23, 2012 - 19:42<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Placerat nisi porta! Habitasse tincidunt nec facilisis turpis velit facilisis, hac? Porta hac montes? Dignissim in hac est, duis scelerisque sit? Aenean massa odio, scelerisque, pulvinar, cum! Magna ut dignissim ac ultricies tincidunt proin aliquam massa urna vel sed, porta et diam hac auctor? A, in scelerisque velit diam eros porttitor diam risus a mattis platea tincidunt massa placerat massa tincidunt ultrices dignissim. Sagittis, etiam turpis parturient ultricies. Et integer rhoncus elit eros etiam magna diam est et tempor urna ac! Integer mid etiam?</p></div></div></div>  </div>

</div>

<div class="ds-blog-2col-tease node node-blog node-teaser contextual-links-region view-mode-teaser clearfix">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/mirc/node/12/edit?destination=blog">Edit</a></li><li class="node-delete"><a href="/mirc/node/12/delete?destination=blog">Delete</a></li><li class="manage-display last"><a href="/mirc/admin/structure/types/manage/blog/display/teaser?destination=blog">Manage display</a></li></ul></div>  
  <div class="blog-group-left">
      </div>

  <div class="blog-group-right">
    <div class="field field-name-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even" property="dc:title"><h2><a href="/mirc/content/my-fifth-blog">My fifth Blog</a></h2></div></div></div>By Lillie Wolff Monday, April 23, 2012 - 19:42<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Placerat nisi porta! Habitasse tincidunt nec facilisis turpis velit facilisis, hac? Porta hac montes? Dignissim in hac est, duis scelerisque sit? Aenean massa odio, scelerisque, pulvinar, cum! Magna ut dignissim ac ultricies tincidunt proin aliquam massa urna vel sed, porta et diam hac auctor? A, in scelerisque velit diam eros porttitor diam risus a mattis platea tincidunt massa placerat massa tincidunt ultrices dignissim. Sagittis, etiam turpis parturient ultricies. Et integer rhoncus elit eros etiam magna diam est et tempor urna ac! Integer mid etiam?</p></div></div></div>  </div>

</div>

<div class="ds-blog-2col-tease node node-blog node-teaser contextual-links-region view-mode-teaser clearfix">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/mirc/node/11/edit?destination=blog">Edit</a></li><li class="node-delete"><a href="/mirc/node/11/delete?destination=blog">Delete</a></li><li class="manage-display last"><a href="/mirc/admin/structure/types/manage/blog/display/teaser?destination=blog">Manage display</a></li></ul></div>  
  <div class="blog-group-left">
      </div>

  <div class="blog-group-right">
    <div class="field field-name-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even" property="dc:title"><h2><a href="/mirc/content/my-fourth-blog">My fourth Blog</a></h2></div></div></div>By Lillie Wolff Monday, April 23, 2012 - 19:42<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Placerat nisi porta! Habitasse tincidunt nec facilisis turpis velit facilisis, hac? Porta hac montes? Dignissim in hac est, duis scelerisque sit? Aenean massa odio, scelerisque, pulvinar, cum! Magna ut dignissim ac ultricies tincidunt proin aliquam massa urna vel sed, porta et diam hac auctor? A, in scelerisque velit diam eros porttitor diam risus a mattis platea tincidunt massa placerat massa tincidunt ultrices dignissim. Sagittis, etiam turpis parturient ultricies. Et integer rhoncus elit eros etiam magna diam est et tempor urna ac! Integer mid etiam?</p></div></div></div>  </div>

</div>

<div class="ds-blog-2col-tease node node-blog node-teaser contextual-links-region view-mode-teaser clearfix">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/mirc/node/10/edit?destination=blog">Edit</a></li><li class="node-delete"><a href="/mirc/node/10/delete?destination=blog">Delete</a></li><li class="manage-display last"><a href="/mirc/admin/structure/types/manage/blog/display/teaser?destination=blog">Manage display</a></li></ul></div>  
  <div class="blog-group-left">
      </div>

  <div class="blog-group-right">
    <div class="field field-name-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even" property="dc:title"><h2><a href="/mirc/content/my-third-blog-bost">My third Blog Bost</a></h2></div></div></div>By admin Monday, April 23, 2012 - 19:42<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Placerat nisi porta! Habitasse tincidunt nec facilisis turpis velit facilisis, hac? Porta hac montes? Dignissim in hac est, duis scelerisque sit? Aenean massa odio, scelerisque, pulvinar, cum! Magna ut dignissim ac ultricies tincidunt proin aliquam massa urna vel sed, porta et diam hac auctor? A, in scelerisque velit diam eros porttitor diam risus a mattis platea tincidunt massa placerat massa tincidunt ultrices dignissim. Sagittis, etiam turpis parturient ultricies. Et integer rhoncus elit eros etiam magna diam est et tempor urna ac! Integer mid etiam?</p></div></div></div>  </div>

</div>

<div class="ds-blog-2col-tease node node-blog node-teaser contextual-links-region view-mode-teaser clearfix">

    <div class="contextual-links-wrapper"><ul class="contextual-links"><li class="node-edit first"><a href="/mirc/node/8/edit?destination=blog">Edit</a></li><li class="node-delete"><a href="/mirc/node/8/delete?destination=blog">Delete</a></li><li class="manage-display last"><a href="/mirc/admin/structure/types/manage/blog/display/teaser?destination=blog">Manage display</a></li></ul></div>  
  <div class="blog-group-left">
    <div class="field field-name-field-blog-photo field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><img typeof="foaf:Image" src="http://localhost/mirc/sites/default/files/styles/blogthumb/public/Rick-Snyder_0.jpg" width="100" height="100" alt="" /></div></div></div>  </div>

  <div class="blog-group-right">

    <div class="field field-name-title field-type-ds field-label-hidden"><div class="field-items"><div class="field-item even" property="dc:title"><h2><a href="/mirc/content/my-second-blog">My Second Blog</a></h2></div></div></div>By admin Monday, April 23, 2012 - 19:42<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>Pellentesque interdum suscipit mollis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque dignissim tortor sit amet tellus varius a ullamcorper dui ullamcorper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tempus risus eget dolor porta scelerisque in a tortor. Nunc euismod, mauris ac porta sodales, nisl mi rhoncus arcu, eget commodo sem augue ac ligula. Maecenas velit ligula, imperdiet quis consequat in, iaculis in lorem. Vestibulum sed arcu nunc? Cras ut erat vel sem cursus ultricies.</p></div></div></div>  </div>

</div>
aspilicious’s picture

aspilicious commented

Hmm I can reproduce the problem. You can work around it for the moment by replacing

.ds-blog-2col-tease > .blog-group-right {
  float: left; /* LTR */
  width: 470px;
}

with

.ds-blog-2col-tease > .blog-group-right {
  float: right; /* LTR */
  width: 470px;
}

We need jyve on this :). No idea why you can't set a width on an empty div...

jyve’s picture

jyve commented

Sorry for the late respons.

It is indeed known behavior that empty divs collapse if they don't have any height.

There are two solutions for this: add a   in case the region is empty (bit dirty), or add a min-height: 1px to the css of any of your regions.

Good luck!

swentel’s picture

swentel commented
Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.