YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar pedrojsicilia asked

Match Height option for Blog Layout

Hello YOOtheme community,

I think it would be nice to have a Match Height option for Blog Layout. For example, if you have more than one columns in a row and one of the articles has a longer/shorter title or intro text next row doesn´t display all columns at same top position.

Image

In YOOtheme PRO Builder when you edit a ROW inside a SECTION there is an option called "MATCH HEIGH". I need this behaviour for Blog layout. I think this could be very useful. Something as shown in the image below.

Image

You can vote UP on this ticket and on this thread too

Regards,
Pedro

  • Feature Request
  • YOOtheme Pro

Edited

3 Answers

0

Avatar sven.grossenbacher Online answered

I did that with a warp7 template a while ago here and I needed to override two files - which you can do in Yootheme Pro as well I guess but with a different approach - but it should work with those overrides:

I added a Module: Articles - Newsflash then chose in Advanced: horizontal
I then created an article and loaded the module inside that article.

I created an override for that module: mod_articles_news > horizontal.php
I changed:

    <?php if (count($list) > 0) : ?>  
    <ul class="uk-grid" data-uk-grid-match data-uk-grid-margin>  
        <?php for ($i = 0, $count = count($list); $i < $count; $i ++) : ?>  
        <?php $item = $list[$i]; ?>  
        <li class="uk-width-medium-1-<?php echo $count ?>">  
            <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item'); ?>  
        </li>  
        <?php endfor; ?>  
    </ul>  
<?php endif;

to

    <?php if (count($list) > 0) : ?>  
    <ul class="uk-grid uk-grid-match" data-uk-grid-match="{target:'.uk-panel'}" data-uk-grid-margin >  
        <?php for ($i = 0, $count = count($list); $i < $count; $i ++) : ?>  
        <?php $item = $list[$i]; ?>  
        <li class="uk-width-medium-1-3 ">  
            <?php require JModuleHelper::getLayoutPath('mod_articles_news', '_item'); ?>  
        </li>  
        <?php endfor; ?>  
    </ul>  
<?php endif;

You can still select how many news you want to show inside the module but now it shows 3 on each line and not all on one line...

I then added the intro image you can add in the blog article - inside the the file mod_articles_news > item.php
I changed:

    <?php  
    /**  
    * @package   Warp Theme Framework  
    * @author    YOOtheme http://www.yootheme.com  
    * @copyright Copyright (C) YOOtheme GmbH  
    * @license   http://www.gnu.org/licenses/gpl.html GNU/GPL  
    */  

    // no direct access  
    defined('_JEXEC') or die;  

    ?>  

    <?php if ($params->get('item_title')) : ?>  
    <h3>  
        <?php if ($params->get('link_titles') && $item->link != '') : ?>  
            <a href="<?php echo $item->link; ?>"><?php echo $item->title;?></a>  
        <?php else : ?>  
            <?php echo $item->title; ?>  
        <?php endif; ?>  
    </h3>  
    <?php endif; ?>  

    <?php if (!$params->get('intro_only')) echo $item->afterDisplayTitle; ?>  

    <?php echo $item->beforeDisplayContent; ?>  

    <?php echo $item->introtext; ?>  

    <?php if (isset($item->link) && $item->readmore && $params->get('readmore')) :  
        echo '<a href="'.$item->link.'">'.$item->linkText.'</a>';  
    endif;

to

    <?php  
/**  
* @package   Warp Theme Framework  
* @author    YOOtheme http://www.yootheme.com  
* @copyright Copyright (C) YOOtheme GmbH  
* @license   http://www.gnu.org/licenses/gpl.html GNU/GPL  
*/  

// no direct access  
defined('_JEXEC') or die;  
$images = json_decode($item->images);  
?>  
<div class="uk-panel uk-panel-box">  
<a href="<?php echo $item->link; ?>"><img src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt);?>" width="411" height="232"/></a>  

<?php if ($params->get('item_title')) : ?>  
<h3 class="uk-h4">  
    <?php if ($params->get('link_titles') && $item->link != '') : ?>  
        <a href="<?php echo $item->link; ?>"><?php echo $item->title;?></a>  
    <?php else : ?>  
        <?php echo $item->title; ?>  
    <?php endif; ?>  
</h3>  
<?php endif; ?>  

<?php if (!$params->get('intro_only')) echo $item->afterDisplayTitle; ?>  

<?php echo $item->beforeDisplayContent; ?>  

<?php echo $item->introtext; ?>  

<?php if (isset($item->link) && $item->readmore && $params->get('readmore')) :  
    echo '<a class="uk-button uk-button-primary" href="'.$item->link.'">'.$item->linkText.'</a>';   
endif;?>  
</div>

Edited

0

Avatar pedrojsicilia answered

Hi Sven,

Thank you so much for taking your time in your answer. May it help YOOtheme team to add this Feature Request. I´ll try to follow your code to customize my site.

Meanwhile you can vote UP this request on this ticket and on this thread too.

Regards,

Know someone who can answer? Share a link to this question via email or twitter.