Twitch Category List Image Control Switch

[twitchtoo]

Method to control category image display on index or main page display for 1.56c (Twitch Base6)

There are other controls for these images however none control the display when includes/modules/YOUR_TEMPLATE/category_row.php is being used... until now!

Twitch - Show Index Category Image?
0 = OFF No Image Shown - Use CSS Button
1 = ON Show Image - Text (default)


Backup your database and your fileset before installing this little switch. Understand that your template may be different and you can adjust the CSS to match the sizes/colours you may prefer.


Twitch Category List Image Control Switch
# SQL Update - new switch
INSERT INTO configuration (configuration_title, configuration_key, configuration_value, configuration_description, configuration_group_id, sort_order, date_added, use_function, set_function) VALUES ('Twitch - Show Index Category Image?', 'TWI_INDEX_CATEGORY_IMAGE_SWI', '1', '0 = OFF No Image Shown - Use CSS Button <br />1 = ON Show Image - Text (default)', 8, 120, now(), NULL, 'zen_cfg_select_option(array(''0'', ''1''), ');


# Uninstall Only
DELETE FROM configuration WHERE configuration_key in ('TWI_INDEX_CATEGORY_IMAGE_SWI');
# Uninstall Only


includes/modules/YOUR_TEMPLATE/category_row.php
replace this:
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');

with this:
if (TWI_INDEX_CATEGORY_IMAGE_SWI != 0 ) { // bof Twitch Category List Image Control Switch
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');
} else { // do not show category image
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContentsButton"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . $categories->fields['categories_name'] . '</a>');
} // eof Twitch Category List Image Control Switch



includes/templates/YOUR_TEMPLATE/templates/css/stylesheet.css
replace this:
/*bof categories and product listing*/
#productListHeading, #indexCategoriesHeading{font-weight:normal;margin-bottom:.5em;}
#indexCategories {text-align: center; margin: 0 auto; width: 98%;} /* Twitch center the index category images */
.categoryListBoxContents img {/*margin-bottom:1em;*/}
.categoryListBoxContents a{font-size:1.2em;text-decoration:none;font-weight:bold;border: solid 2px #356536;}
.categoryListBoxContents a:hover{}
.categoryListBoxContents{padding:1em 0;display:inline-block;cursor:pointer;}
.categoryListBoxContents:hover{}
.categoryListBoxContents:hover a{}


with this:
/*bof categories and product listing*/
#productListHeading, #indexCategoriesHeading{font-weight:normal;margin-bottom:.5em;}
#indexCategories {text-align: center; margin: 0 auto; width: 98%;} /* Twitch center the index category images */
.categoryListBoxContents img {/*margin-bottom:1em;*/}
.categoryListBoxContents a{font-size:1.2em;text-decoration:none;font-weight:bold;}
.categoryListBoxContents a:hover{}
.categoryListBoxContents{padding:1em 0;display:inline-block;cursor:pointer;}
.categoryListBoxContents:hover{}
.categoryListBoxContents:hover a{}
/* Twitch Category List Image Control Switch */
.categoryListBoxContentsButton a {font-size:1.2em;text-decoration:none;font-weight:bold;border: solid 2px #356536;padding: 1em .5em;}
.categoryListBoxContentsButton {padding:1em 0;display:inline-block;cursor:pointer;}



includes/templates/YOUR_TEMPLATE/templates/css/stylesheet_colors.css
replace this:
/* Twitch CSS changes */
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color:#8b0000;}
.categoryListBoxContents:hover {/* border: solid thin #AE9A80; */}
.categoryListBoxContents a:hover, .categoryListBoxContents:hover a{color:#000;}


with this:
/* Twitch CSS changes */
.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {color:#8b0000;}
.categoryListBoxContents:hover {/* border: solid thin #AE9A80; */}
.categoryListBoxContents a:hover, .categoryListBoxContents:hover a{color:#000;}
/* Twitch Category List Image Control Switch */
.categoryListBoxContentsButton a:hover, .categoryListBoxContentsButton:hover a {color:#FFF;background: #356536;}


Keywords: turn off category image, index category image off, categories css buttons, categories image off


If my work has helped you today in any way, show your appreciation with things like positive feedback or donations.
Find me at twitchtoo.com.

[twitchtoo]

Slight update for anyone having CSS button overlap issues:

includes/modules/YOUR_TEMPLATE/category_row.php

replace this:
if (TWI_INDEX_CATEGORY_IMAGE_SWI != 0 ) { // bof Twitch Category List Image Control Switch
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');
} else { // do not show category image
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContentsButton"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . $categories->fields['categories_name'] . '</a>');
} // eof Twitch Category List Image Control Switch


with this:
if (TWI_INDEX_CATEGORY_IMAGE_SWI != 0 ) { // bof Twitch Category List Image Control Switch
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContents"' . ' ' . 'style="width:' . $col_width . '%;"',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . zen_image(DIR_WS_IMAGES . $categories->fields['categories_image'], $categories->fields['categories_name'], SUBCATEGORY_IMAGE_WIDTH, SUBCATEGORY_IMAGE_HEIGHT) . '<br />' . $categories->fields['categories_name'] . '</a>');
} else { // do not show category image
$list_box_contents[$row][$col] = array('params' => 'class="categoryListBoxContentsButton"' . ' ',
'text' => '<a href="' . zen_href_link(FILENAME_DEFAULT, $cPath_new) . '">' . $categories->fields['categories_name'] . '</a>');
} // eof Twitch Category List Image Control Switch


Add a bit more space between the buttons...
includes/templates/YOUR_TEMPLATE/templates/css/stylesheet.css

.categoryListBoxContentsButton {margin: .5em;padding:1em 0;display:inline-block;cursorointer;}