Imágenes por categoría 2 métodos diferentes

Started by Diego Andrés, August 06, 2013, 02:37:15 PM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Diego Andrés

El principal paso para que funcionen nuestro 2 métodos, es ir a /Themes/ThemeQueUsas/images/ ---> Creamos una nueva carpeta llamada "cat", de tal forma que la nueva ruta sería:
----> /Themes/ThemeQueUsas/images/cat/ -----> Dentro de la carpeta "cat" nosotros añadiremos nuestras imágenes según la categoría, por ejemplo si a la categoría 1 le pondré imágen entonces subiré mi imagen llamada "1.png" Una ves que tengas tus imágenes, procederás a realizar cualquier método de los siguientes.





1° Método - HTML

Sin duda algo muy básico, aunque el segundo también lo será.
En este paso haremos lo siguiente, buscamos en /Themes/default/BoardIndex.template.php:

<div class="cat_bar">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a class="unreadlink" href="', $scripturl, '?action=unread;c=', $category['id'], '">', $txt['view_unread_category'], '</a>';

echo '
', $category['link'], '
</h3>
</div>


Reemplazamos eso, por esto:

<img src="', $settings['images_url'], '/cat/', $category['id'], '.png" alt="Nombre de la categoría" />

Reemplazaremos de ahí, obviamente la parte que dice "Nombre de la categoría", dejando las comillas, claro está.
Como ven es un método muy sencillo.





2° Método - CSS

Este método es un poco más manual, pero con la diferencia de poder dar de 1, toda la personalización que quieras mediante css.

Lo primero, tal como arriba. Buscamos en /Themes/default/BoardIndex.template.php:

<div class="cat_bar">
<h3 class="catbg">';

// If this category even can collapse, show a link to collapse it.
if ($category['can_collapse'])
echo '
<a class="collapse" href="', $category['collapse_href'], '">', $category['collapse_image'], '</a>';

if (!$context['user']['is_guest'] && !empty($category['show_unread']))
echo '
<a class="unreadlink" href="', $scripturl, '?action=unread;c=', $category['id'], '">', $txt['view_unread_category'], '</a>';

echo '
', $category['link'], '
</h3>
</div>


Reemplazamos por:

<div id="category', $category['id'], '"></div>

Ahora vamos a /Themes/ThemeQueUsas/css/index.css <---- abrimos el archivo, y al final añadimos esto:

#category1 {
background: url(../images/cat/1.png) no-repeat;
width: 350px;
height: 80px;
}


En Width y height, modificaríamos los valores de px por los de nuestras imágenes.
Ahora, como pueden ver, en este método, ustedes tendrán que agregar manualmente sus clases al css.
Por ejemplo si tienen una segunda categoría, añadiríamos esto luego del anterior código:

#category2 {
background: url(../images/cat/2.png) no-repeat;
width: 350px;
height: 80px;
}


Y como dije arriba, solo es modificar los valores y demás.
La desventaje del css esque es manual, pero qué ventajas tiene?
Puedes agregar toda la personalización que quieras.
Incluso con css, en lugar de poner imágenes, podemos usar textos.
Para esto, abrimos nuestro boardindex.template.php de nuevo, buscamos:

<div id="category', $category['id'], '"></div>

Reemplazamos por:

<div id="category', $category['id'], '">', $category['link']</div>

Y el código de la categoría 1 en el css, lo cambiaríamos por algo como esto:

#category1 {
font-size: 20px;
padding: 7px;
-moz-box-shadow:0px 0px 6px #000000;
-webkit-box-shadow:0px 0px 6px #000000;
box-shadow:0px 0px 6px #000000;
background-image: -moz-linear-gradient(top, #204691, #000000);
background-image: -webkit-gradient(linear, center top, center bottom, from(#204691), to(#000000));
background-image: -o-linear-gradient(top, #204691, #000000);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#204691', endColorstr='#000000');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#204691', endColorstr='#000000')";
background-image: linear-gradient(top, #204691, #000000);
}





Eso sería toda la explicación más o menos, gracias por su atención.
Saludos.

:P
Last Edit: August 20, 2019, 09:30:02 PM by Diego Andrés