Show category images but not their text names v1.5.3

[quickguitar]

Hello,

Can any of you show me a way to suppress the category names, as I have them built into the images?

https://starvingmusician.com/cart2/b...a590ccf76f098a

Thank you,

Vernon

[mc12345678]

But computers don't exactly read images and eliminating the text associated with them may be detrimental. But if you want to at least visually suppress the word(s), could use css to hide the category name(s)/descriptions.

Unfortunately not where I can provide that type of assistance at the moment, but pretty sure someone who can will be along soon. :)

[quickguitar]

Ahhh... Good point. No wonder there's no option to suppress them. Zen programmers saving me from myself again.
I would love some code to hide the category names if anyone out there is so inclined.

[Website Rob]

In whichever CSS file is applicable:

#indexCategoriesHeading { visibility:hidden }

You want to Hide rather than None as it is an H1 heading (that's important) and hidden still allows SE bots and handicap readers to see it/read it.

[lat9]

Check to see that your template (custom) has the file /includes/modules/custom/category_row.php. If not, create a template-override by copying /includes/modules/category_row.php to that folder.

The as-shipped file will look similar to:

<?php
/**
 * index category_row.php
 *
 * Prepares the content for displaying a category's sub-category listing in grid format.  
 * Once the data is prepared, it calls the standard tpl_list_box_content template for display.
 *
 * @package page
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: category_row.php 4084 2006-08-06 23:59:36Z drbyte $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$title = '';
$num_categories = $categories->RecordCount();

$row = 0;
$col = 0;
$list_box_contents = '';
if ($num_categories > 0) {
  if ($num_categories < MAX_DISPLAY_CATEGORIES_PER_ROW || MAX_DISPLAY_CATEGORIES_PER_ROW == 0) {
    $col_width = floor(100/$num_categories);
  } else {
    $col_width = floor(100/MAX_DISPLAY_CATEGORIES_PER_ROW);
  }

  while (!$categories->EOF) {
    if (!$categories->fields['categories_image']) !$categories->fields['categories_image'] = 'pixel_trans.gif';
    $cPath_new = zen_get_path($categories->fields['categories_id']);

    // strip out 0_ from top level cats
    $cPath_new = str_replace('=0_', '=', $cPath_new);

    //    $categories->fields['products_name'] = zen_get_products_name($categories->fields['products_id']);

    $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>');

    $col ++;
    if ($col > (MAX_DISPLAY_CATEGORIES_PER_ROW -1)) {
      $col = 0;
      $row ++;
    }
    $categories->MoveNext();
  }
}
?>

Make the following edits to "not display" the name as well as the image:

<?php
/**
 * index category_row.php
 *
 * Prepares the content for displaying a category's sub-category listing in grid format.  
 * Once the data is prepared, it calls the standard tpl_list_box_content template for display.
 *
 * @package page
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: category_row.php 4084 2006-08-06 23:59:36Z drbyte $
 */
if (!defined('IS_ADMIN_FLAG')) {
  die('Illegal Access');
}
$title = '';
$num_categories = $categories->RecordCount();

$row = 0;
$col = 0;
$list_box_contents = '';
if ($num_categories > 0) {
  if ($num_categories < MAX_DISPLAY_CATEGORIES_PER_ROW || MAX_DISPLAY_CATEGORIES_PER_ROW == 0) {
    $col_width = floor(100/$num_categories);
  } else {
    $col_width = floor(100/MAX_DISPLAY_CATEGORIES_PER_ROW);
  }

  while (!$categories->EOF) {
    if (!$categories->fields['categories_image']) !$categories->fields['categories_image'] = 'pixel_trans.gif';
    $cPath_new = zen_get_path($categories->fields['categories_id']);

    // strip out 0_ from top level cats
    $cPath_new = str_replace('=0_', '=', $cPath_new);

    //    $categories->fields['products_name'] = zen_get_products_name($categories->fields['products_id']);
//-bof-20161208-lat9-Don't display the name, just the image
/*
    $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>');
*/
   $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) . '</a>');
//-eof-20161208-lat9

    $col ++;
    if ($col > (MAX_DISPLAY_CATEGORIES_PER_ROW -1)) {
      $col = 0;
      $row ++;
    }
    $categories->MoveNext();
  }
}

[quickguitar]

Thanks lat9 - That worked for the top level page, but not the category view (where the subcategories are showing).

It also suppressed the subcategory text which I would rather have show since the .jpg does not include the text.

Thank you,

Vernon

[quickguitar]

Thanks Website Rob - I will experiment with that also.

[quickguitar]

In whichever CSS file is applicable:

#indexCategoriesHeading { visibility:hidden }

You want to Hide rather than None as it is an H1 heading (that's important) and hidden still allows SE bots and handicap readers to see it/read it.

I inserted the tag in line 600 of my /custom/css/stylesheet.css

It worked in this example:
https://starvingmusician.com/cart/bandorchestra-c-3104/

But not on my main page:
https://starvingmusician.com/cart/

I also tried making a file called index_home.css with just the #indexCategoriesHeading { visibility:hidden } tag which I uploaded to /custom/css but that seemed to have had no effect.

[Website Rob]

https://starvingmusician.com/cart/

It doesn't work for that page because you are using a module of some sort to layout your columns. That module appears to use a CONSTANT to pull the Category Name and show it. The text is shown is what's known as "bare text" and without any CSS descriptor one cannot use CSS on that specific text.

You would need to check the files for the module to find out what CONSTANT is being used to show that "bare text" and remove/change it.


Your index_home.css is loading fine and shows this as being in the file:

#indexCategoriesHeading {
}

which is basically a blank selector and will do nothing.

[schoolboy]

You can do this with a 3 or 4 line piece of css, I worked it out about 8 years ago but have forgotten the sequence. It involves using display:none and visibility:hidden, then visibility:visible to re-reveal the image but not the text. The sequence of css declarations is in a certain order for the category a: link and a.img link. Don't know if the original thread I posted all that time ago is searchable on the forum but I have't time to go through my 10,000+ posts to find it. If I recall the sequence I'll post it up for you.

There are a couple of considerations, however:

1. Bad for SEO.
2. May contravene disability access laws. Not sure what the US position is here, but in the UK websites MUST be configured to cater for people with visual impairments - and software that blind people use to "vocalise" web pages rely on text elements in the HTML. While an "alt" component is often used to do this, not all vocaliser software does this, and depending on whar's in the "alt", it may not be clear what the image is describing.
3. In text format, hyperlinks are more "obvious" to people than images, so there is a UX element as well.