Hello, i would like to modify the category view to display like here
i.imgur.com/AAxchfT.jpg
the sub category title over the image subcategory, i think i need to modify this template
Code:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
$i = 0;
$layout = JRequest::getCmd('layout', '');
// Sub-category prefix/suffix/separator parameters
$pretext = $this->params->get( 'subcat_pretext', '' ); $posttext = $this->params->get( 'subcat_posttext', '' );
$opentag = $this->params->get( 'subcat_opentag', '' ); $closetag = $this->params->get( 'subcat_closetag', '' );
$separatorf = $this->params->get( 'subcat_separatorf' );
$separators_arr = array( 0 => ' ', 1 => '<br />', 2 => ' | ', 3 => ', ', 4 => $closetag.$opentag, 5 => '' );
$separatorf = isset($separators_arr[$separatorf]) ? $separators_arr[$separatorf] : ' ';
$cats_label = JText::_( $this->category->id ? 'FLEXI_SUBCATEGORIES' : 'FLEXI_CATEGORIES' );
// Sub-category information parameters
$show_empty_cats = $this->params->get('show_empty_cats', 1);
$show_label_subcats = $this->params->get('show_label_subcats', 1);
$show_itemcount = $this->params->get('show_itemcount', 1);
$show_subcatcount = $this->params->get('show_subcatcount', 0);
$itemcount_label = ($show_itemcount==2 ? ' '.JText::_('FLEXI_ITEM_S').' ' : '');
$subcatcount_label = ($show_subcatcount==2 ? ' '.JText::_('FLEXI_CATEGORIES').' ' : '');
$show_description_image_subcat = (int) $this->params->get('show_description_image_subcat', 0);
$show_description_subcat = (int) $this->params->get('show_description_subcat', 0);
$description_cut_text_subcat = (int) $this->params->get('description_cut_text_subcat', 120);
// Classes for sub-category containers
$subcats_lbl_class = ($show_description_subcat || $show_description_image_subcat) ? "fc_inline_clear" : "fc_inline";
$subcats_lbl_dots = ($show_description_subcat || $show_description_image_subcat) ? "" : ": ";
$subcat_cont_class = $show_description_subcat ? "fc_block" : "fc_inline_block";
$subcat_info_class = $show_description_subcat ? "fc_inline_clear" : "fc_inline";
$subcats_html = array();
foreach ($this->categories as $sub) {
if (!$show_empty_cats && $show_itemcount && $sub->assigneditems==0) continue;
$subsubcount = count($sub->subcats);
// a. Optional sub-category image
$subcats_html[$i] = "<span class='floattext subcat ".$subcat_cont_class."'>\n";
if ($show_description_image_subcat && $sub->image) {
$subcats_html[$i] .= " <span class='catimg'>".$sub->image."</span>\n";
}
$subcats_html[$i] .= " <span class='catinfo ".$subcat_info_class."'>\n";
// b. Category title with link and optional item counts
$cat_link = ($layout=='myitems' || $layout=='author') ? $this->action .(strstr($this->action, '?') ? '&' : '?'). 'cid='.$sub->slug :
JRoute::_( FlexicontentHelperRoute::getCategoryRoute($sub->slug) );
$infocount_str = '';
if ($show_itemcount) $infocount_str .= (int) $sub->assigneditems . $itemcount_label;
if ($show_subcatcount) $infocount_str .= ($show_itemcount ? ' / ' : '').count($sub->subcats) . $subcatcount_label;
if (strlen($infocount_str)) $infocount_str = ' (' . $infocount_str . ')';
$subcats_html[$i] .= " <a class='catlink' href='".$cat_link."'>".$this->escape($sub->title)."</a>".$infocount_str."</span>\n";
// c. Optional sub-category description stripped of HTML and cut to given length
if ($show_description_subcat && $sub->description) {
$subcats_html[$i] .= " <span class='catdescription'>". flexicontent_html::striptagsandcut( $sub->description, $description_cut_text_subcat )."</span>";
}
$subcats_html[$i] .= "</span>\n";
// d. Add prefix, suffix to the HTML of current sub-category
$subcats_html[$i] = $pretext.$subcats_html[$i].$posttext;
$i++;
}
// Create the HTML of sub-category list , add configured separator
$subcats_html = implode($separatorf, $subcats_html);
// Add open/close tag to the HTML
$subcats_html = $opentag .$subcats_html. $closetag;
// Add optional sub-categories list label
if ($show_label_subcats) {
$subcats_label = "<span class='subcategorieslabel ".$subcats_lbl_class."'>".$cats_label."</span>".$subcats_lbl_dots;
$subcats_html = $subcats_label.$subcats_html;
}
?>
<div class="subcategorieslist group">
<?php echo $subcats_html; ?>
</div>
also if possible i would like to use thz gantry 5 grid layout like this
<div class="g-grid">
<div class="g-block size-25">
sub category 1 image and title here
</div>
<div class="g-block size-25">
sub category 2 image and title here
</div>
<div class="g-block size-25">
sub category 3 image and title here
</div>
<div class="g-block size-25">
sub category 4 image and title here
</div>
</div>
and if there is more than 4 sub category
<div class="g-grid">
<div class="g-block size-25">
sub category 5 image and title here
</div>
<div class="g-block size-25">
sub category 6 image and title here
</div>
<div class="g-block size-25">
sub category 7 image and title here
</div>
<div class="g-block size-25">
sub category 8 image and title here
</div>
</div>
Thank you for your help.
