Author Topic: Different Layouts For Different Categories  (Read 3595 times)

innov8t

  • Beginner
  • *
  • Posts: 34
Different Layouts For Different Categories
« on: May 31, 2010, 15:10:35 pm »
Hi All,

We are  looking to have a main category eg SKINCARE display all its sub categories in a list on top of a  particular background image, I have (by editing categoryChildlist.tpl.php) been able to get the sub cat links/items to display as I would like them (See attached before.jpg)

But I need them to sit on a particular bg image, which i can do in the categoryChildlist.tpl.php file, but i need to be able to have a differetn bg image for each of my main categories eg SKINCARE, BODYCARE, GIFTS & CANDLES.
(See after.jpg)

Can anyone adise me on how to display my sub categories on a unique bg image for each main category? I would like to be able to edit/change the bg image in virtuemart > Products > List Categories > Category HTML section with soem code like   

Code: [Select]
<div style="background: url('/images/skincare-bg.jpg') no-repeat scroll 0% 0% transparent; width: 760px; height: 330px; margin: 0pt; padding: 20px 0px 0px;">

<table>Sub Category Table generated  in categoryChildlist.tpl.php</table>

</div>

Many thanks in advance


rb

  • Advanced
  • Hero Member
  • *****
  • Posts: 1503
Re: Different Layouts For Different Categories
« Reply #1 on: May 31, 2010, 16:05:52 pm »
One thought is to use each Category's image as the background image in categoryChildlist.tpl.php.  You assign each Category its own image in the back-end (Products->List Categories->Images tab).  You would then use some PHP code in categoryChildlist.tpl.php to obtain each Category's image file name and then dynamically assign it to the background URL (as opposed to the static assignment you show in your example).

innov8t

  • Beginner
  • *
  • Posts: 34
Re: Different Layouts For Different Categories
« Reply #2 on: May 31, 2010, 16:27:17 pm »
That seems like a logical solution, many thanks, I will try that.
PHP aint really my speciality, not sure how to dynamically set the bg in php but i'll give it a shot.

Thanks again.

innov8t

  • Beginner
  • *
  • Posts: 34
Re: Different Layouts For Different Categories
« Reply #3 on: May 31, 2010, 18:30:15 pm »
Hi Again,

OK I am trying this line in categoryChildlist.tpl.php

<table width="760" height="350" cellspacing="0" cellpadding="0" style="background:url(<?php echo $category["category_full_image"] ?>);">

But when i view the source, the url is not there...
<table width="760" height="350" cellspacing="0" cellpadding="0" style="background:url();">

Anyone know how to call the Category Full Image from the categoryChildlist.tpl.php file so it will display on the category page
eg: www.mydomain.com/mycategory

Many thanks Guys n Gals.

rb

  • Advanced
  • Hero Member
  • *****
  • Posts: 1503
Re: Different Layouts For Different Categories
« Reply #4 on: May 31, 2010, 22:57:33 pm »
You've got the right idea, but the parent Category's image needs to be read from the database and then passed to the categoryChildlist.tpl.php template script.  So first, to read the image from the database, make a copy of, then edit this file:

     administrator/components/com_virtuemart/html/shop.browse.php

Around line 69, find these lines:
Code: [Select]
$db->query( "SELECT category_id, category_name FROM #__{vm}_category WHERE category_id='$category_id'");
$db->next_record();
$category_name = shopMakeHtmlSafe( $db->f('category_name') );

Replace with these:
Code: [Select]
$db->query( "SELECT category_id, category_name, category_full_image FROM #__{vm}_category WHERE category_id='$category_id'");
$db->next_record();
$category_name = shopMakeHtmlSafe( $db->f('category_name') );
$category_full_image = $db->f('category_full_image');

Next, to pass the image to the template, further down in the same file near line 114, find these lines:
Code: [Select]
$category_childs = $ps_product_category->get_child_list($category_id);
$tpl->set( 'categories', $category_childs );
$navigation_childlist = $tpl->fetch( 'common/categoryChildlist.tpl.php');

Replace with these:
Code: [Select]
$category_childs = $ps_product_category->get_child_list($category_id);
$tpl->set( 'categories', $category_childs );
// rb add to show parent category full image
$tpl->set( 'parent_category_full_image', $category_full_image );
$navigation_childlist = $tpl->fetch( 'common/categoryChildlist.tpl.php');

Save the file.

Finally, in categoryChildlist.tpl.php, change your style statement to look like this:
Code: [Select]
style="background: url(<?php echo '/components/com_virtuemart/shop_image/category/'.$parent_category_full_image ?>) no-repeat "
Save and test.

innov8t

  • Beginner
  • *
  • Posts: 34
Re: Different Layouts For Different Categories
« Reply #5 on: June 01, 2010, 10:57:24 am »
Done, done & done...
Works perfectly, my image is in place, now i just have to style the links etc to get them to look a bit more placed, (this is the easy bit)

Thank you so much for your help guys.

Much Appreciated.

Yunnek

  • Beginner
  • *
  • Posts: 1
Re: Different Layouts For Different Categories
« Reply #6 on: August 31, 2010, 04:35:12 am »
Can we change the thumbnail size of each category? for example:
 category 1 has thumbnail size 90px by 90px.
 category 2 has thumbnail size 180px by 180px.

And in admin, configuration, site, layout tab. the "Thumbnail Image Width" is 270px and "Thumbnail Image Height" is 270px...

Is this possible?

Eugen S.

  • 3rd party VirtueMart Developer
  • Full Member
  • *
  • Posts: 255
  • Hire me for individual customization work => info
    • Virtuemart Themes
Re: Different Layouts For Different Categories
« Reply #7 on: August 31, 2010, 14:57:08 pm »
Can we change the thumbnail size of each category? for example:
 category 1 has thumbnail size 90px by 90px.
 category 2 has thumbnail size 180px by 180px.

And in admin, configuration, site, layout tab. the "Thumbnail Image Width" is 270px and "Thumbnail Image Height" is 270px...

Is this possible?

you will have to change the size settings everytime before updating the category images.
Send me a pm ;-)

jenkinhill

  • UK Web Developer & Consultant
  • Global Moderator
  • Super Hero
  • *
  • Posts: 24499
  • On vacation
    • Jenkin Hill Internet
Re: Different Layouts For Different Categories
« Reply #8 on: August 31, 2010, 16:46:08 pm »
Kelvyn
Jenkin Hill Internet,
Keswick, Lake District

Unsolicited PMs/emails will be ignored.

Please mention your VirtueMart, Joomla and PHP versions when asking a question in this forum

Currently using VM3.0.16 on Joomla 3.5.1 PHP 5.5.30

Testing VM3.0.17 on Joomla 3.5.1