COMMUNITY FORUM

Keyword
  1. Forum
  3. K2 Community Forum
  5. English K2 Community
  7. Improved block height calculations (per row) in Category descriptions

Improved block height calculations (per row) in Category descriptions

  • Carlén Communications
  • Carlén Communications's Avatar Topic Author
  • Offline
  • New Member
More
13 years 6 months ago #95467 by Carlén Communications
Improved block height calculations (per row) in Category descriptions was created by Carlén Communications
Hi all,

 

One of the things I like about K2 is the way that the (sub)categories are dispalyed as "boxes", and how they are all given the same height. But maybe you - as well as I - noticed that the height calculation is a bit simplistic: it simple looks for the longest description and then adds the same height to all subcategory boxes. That means that if your category descriptions varies in length, or if you have portrait images mixed with landscape images you might have unneccessary and ugly empty spaces within the dscription boxes. This piece of codes adjusts that by calculating the height on a per row basis.

If you can use it  - please feel free. (And if Keris and others want to include it in future versions of K2, please do so!)

 

Instructions:

1. Change this line in category.php(either in your templates HTML folder, or in com_k2/templates/default/category.php )

<div class="subCategory">to<div class="subCategory" id="subCategory<?php $key;?>">

 

2. Change the javascript code in k2.js:

Find this:

window.addEvent('load', function(){  // Equal block heights for the "default" view  if($$('.subCategory')){        var blocks = $$('.subCategory');        var maxHeight = 0;        blocks.each(function(item){            maxHeight = Math.max(maxHeight, parseInt(item.getStyle('height')));        });        blocks.setStyle('height', maxHeight);    }    });


Replace with:

 

window.addEvent('load', function(){    // Equal block heights for the "default" view    if($$('.subCategory')){        var blocks = $$('.subCategory');        var n = blocks.length;        for(var i=0; i<n; i+=2){            var maxHeight = 0;            var sublast_id1 = 'subCategory'+i;            var sublast_id2 = 'subCategory'+(i+1);            if($(sublast_id2)){                maxHeight = Math.max(parseInt($(sublast_id1).getStyle('height')), parseInt($(sublast_id2).getStyle('height')));                $(sublast_id1).setStyle('height', maxHeight);                $(sublast_id2).setStyle('height', maxHeight);            }        }    }    });

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #95468 by left19
Replied by left19 on topic Improved block height calculations (per row) in Category descriptions
thanks very much for this! In addition I changed div.SubCategory to height, line-height etc.

Please Log in or Create an account to join the conversation.

More
11 years 8 months ago - 11 years 8 months ago #95469 by Tom
Replied by Tom on topic Re: Improved block height calculations (per row) in Category descriptions
Where should i insert the code?

<div class="subCategory">to<div class="subCategory" id="subCategory<?php $key;?>">

:huh:

<div class="subCategoryContainer<?php echo $lastContainer; ?>"<?php echo (count($this->subCategories)==1) ? '' : ' style="width:'.number_format(100/$this->params->get('subCatColumns'), 1).'%;"'; ?>>
                                <div class="subCategory">
                                        <?php if($this->params->get('subCatImage') && $subCategory->image): ?>
                                        <!-- Subcategory image -->
                                        <a class="subCategoryImage" href="<?php echo $subCategory->link; ?>">
                                                <img alt="<?php echo K2HelperUtilities::cleanHtml($subCategory->name); ?>" src="<?php echo $subCategory->image; ?>" />
                                        </a>
                                        <?php endif; ?>

                                        <?php if($this->params->get('subCatTitle')): ?>
                                        <!-- Subcategory title -->
                                        <h2>
                                                <a href="<?php echo $subCategory->link; ?>">
                                                        <?php echo $subCategory->name; ?><?php if($this->params->get('subCatTitleItemCounter')) echo ' ('.$subCategory->numOfItems.')'; ?>
                                                </a>
                                        </h2>
                                        <?php endif; ?>

                                        <?php if($this->params->get('subCatDescription')): ?>
                                        <!-- Subcategory description -->
                                        <p><?php echo $subCategory->description; ?></p>
                                        <?php endif; ?>

                                        <!-- Subcategory more... -->
                                        <a class="subCategoryMore" href="<?php echo $subCategory->link; ?>">
                                                <?php echo JText::_('K2_VIEW_ITEMS'); ?>
                                        </a>

                                        <div class="clr"></div>
                                </div>
                        </div>
                        <?php if(($key+1)%($this->params->get('subCatColumns'))==0): ?>
                        <div class="clr"></div>
                        <?php endif; ?>
                        <?php endforeach; ?>

                        <div class="clr"></div>
                </div>
                <?php endif; ?>

        </div>
        <?php endif; ?>

Please Log in or Create an account to join the conversation.

  1. Forum
  3. K2 Community Forum
  5. English K2 Community
  7. Improved block height calculations (per row) in Category descriptions

Powered by Kunena Forum