- Posts: 38
- Thank you received: 0
Bullet list of sub-categories in blog
14 years 2 months ago #4528
by kenmcd
Replied by kenmcd on topic Bullet list of sub-categories in blog
.
Thanks for posting the code.
Please post a link to where we can see this in action.
.
Thanks for posting the code.
Please post a link to where we can see this in action.
.
Please Log in or Create an account to join the conversation.
14 years 2 months ago #4537
by ewel
Replied by ewel on topic Bullet list of sub-categories in blog
Unfortunately I cannot give a link because it is a limited access site under development, but here is a screen shot.
[attachment=0:1se9lbjd]<!-- ia0 -->flexi-cats-bullets.png<!-- ia0 -->[/attachment:1se9lbjd]
[attachment=0:1se9lbjd]<!-- ia0 -->flexi-cats-bullets.png<!-- ia0 -->[/attachment:1se9lbjd]
Please Log in or Create an account to join the conversation.
14 years 2 months ago #4727
by ewel
Replied by ewel on topic Bullet list of sub-categories in blog
I now replaced the bullets by images, so each category is preceded by the image belonging to that category.
Also I used two columns but it can be turned into one column as indicated by the comments in the code.
My code has a flaw which is that it does not have a fall-back default if a category does not have an image. I am leaving this as it is, because it helps me identify which categories have no image - I want each category to have an image.
I have not tested this with all browsers but it seems ok in IE7 and FF.
It caters for images of all size proportions but does so at the expense of vertical centering. It should center if all images have the same proportions but in that case you might as well fine-tune the css.
[attachment=0:fjhoi765]<!-- ia0 -->flexi-cats-images.png<!-- ia0 -->[/attachment:fjhoi765]
Perhaps this will help someone.
Also I used two columns but it can be turned into one column as indicated by the comments in the code.
My code has a flaw which is that it does not have a fall-back default if a category does not have an image. I am leaving this as it is, because it helps me identify which categories have no image - I want each category to have an image.
I have not tested this with all browsers but it seems ok in IE7 and FF.
It caters for images of all size proportions but does so at the expense of vertical centering. It should center if all images have the same proportions but in that case you might as well fine-tune the css.
[attachment=0:fjhoi765]<!-- ia0 -->flexi-cats-images.png<!-- ia0 -->[/attachment:fjhoi765]
Code:
<?php
$n = count($this->categories);
$i = 0;
?>
<style type="text/css"><!--
.fccatimg {
vertical-align:middle;
max-width: 48px;
max-height: 32px;
width: expression(this.width > 48 ? "48px" : true);
height: expression(this.height > 32 ? "32px" : true);
}
--></style>
<div class="subcategorieslist">
<?php echo JText::_( 'FLEXI_SUBCATEGORIES' ) . ' : '; ?>
<div>
<?php foreach ($this->categories as $sub) :
$subsubcount = count($sub->subcats); ?>
<?php if ( $i == 0 || $i == $n/2 || $i == (($n+1)/2) ) : // to have one column remove: || $i == $n/2 || $i == (($n+1)/2)-1 ?>
<div style="float:left; padding:0 15px 15px 0; width:47%;">
<?php endif; ?>
<div style="position:relative; height:36px; margin:5px 0;">
<div style="float:left; position:absolute; top:50%; margin-top:-18px; height:36px; width:60px;">
<span style="display:block; height:32px;">[url=<?php echo JRoute::_( FlexicontentHelperRoute::getCategoryRoute($sub->slug) ); ?>]<?php echo JHTML::_('image.site', $sub->image, 'images/stories/', NULL, NULL, $sub->title, 'class="fccatimg"'); ?>[/url]</span>
</div>
<div style="float:left; position:absolute; top:50%; margin-top:-18px; height:36px; left:60px;">
<span style="display:block; height:32px;">[url=<?php echo JRoute::_( FlexicontentHelperRoute::getCategoryRoute($sub->slug) ); ?>]<?php echo $this->escape($sub->title); ?>[/url]<br/>
<?php if ($this->params->get('show_itemcount', 1)) echo ' (' . ($sub->assigneditems != null ? $sub->assigneditems.' documents / '.$subsubcount : '0 documents / '.$subsubcount) . ' sub-categories)'; ?></span>
</div>
</div>
<div style="clear:both;">
</div>
<?php $i++;
if ( $i == $n || $i == $n/2 || $i == (($n-1)/2)+1 ) : // to have one column remove: || $i == $n/2 || $i == ($n-1)/2 ?>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
<div style="clear:both;">
</div>
</div>
Perhaps this will help someone.
Please Log in or Create an account to join the conversation.
Time to create page: 0.281 seconds
Last FLEXI-site
... loading images 
