Show Posts
1
Tutoriales y Tips SMF / Imagenes por categorias - Estilo SMFSimple.com
« on: July 10, 2011 - 11:06 11:06 »Imagenes por categorias - Estilo SMFSimple.com
Muchos nos mandaron MP pidiendo esta modificacion que les parecio interesante y original!
Entonces, como es nuestra costumbre, les vamos a dejar el codigo y la explicacion para hacerlo funcionar en sus foros.
Obviamente cada diseño es muy distinto y puede que no funcione en foros con themes muy modificados en el indice.
Entonces, como es nuestra costumbre, les vamos a dejar el codigo y la explicacion para hacerlo funcionar en sus foros.
Obviamente cada diseño es muy distinto y puede que no funcione en foros con themes muy modificados en el indice.
Comencemos!
Abrimos el archivo boardIndex.template.php de la carpeta del theme donde haran la modificacion. Si su theme no tiene ese archivo, entonces haran la modificacion directamente en el archivo boardIndex.template.php del theme default.
Buscaremos el siguiente codigo en ese archivo:
Code: [Select]
echo '
<div id="boardindex_table">
<table class="table_list">';
/* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */
foreach ($context['categories'] as $category)
{
// If theres no parent boards we can see, avoid showing an empty category (unless its collapsed)
if (empty($category['boards']) && !$category['is_collapsed'])
continue;
echo '
<tbody class="header" id="category_', $category['id'], '">
<tr>
<td colspan="4">
<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>
</td>
</tr>
</tbody>';Y lo vamos a reemplazar por lo siguiente:
Code: [Select]
// SMFSimple.com Rules!
echo '
<div id="boardindex_table">
<table class="table_list">';
/* Each category in categories is made up of:
id, href, link, name, is_collapsed (is it collapsed?), can_collapse (is it okay if it is?),
new (is it new?), collapse_href (href to collapse/expand), collapse_image (up/down image),
and boards. (see below.) */
foreach ($context['categories'] as $category)
{
// If theres no parent boards we can see, avoid showing an empty category (unless its collapsed)
if (empty($category['boards']) && !$category['is_collapsed'])
continue;
echo '
<tbody class="header" id="category_', $category['id'], '">
<tr>
<td colspan="4" align="center">
';
// 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 ($category['id'] == 1)
echo '<img src="', $settings['images_url'],'/categoria1.png" alt="Nombre de la categoria" />';
if ($category['id'] == 2)
echo '<img src="', $settings['images_url'],'/categoria2.png" alt="Nombre de la categoria" />';
if ($category['id'] == 3)
echo '<img src="', $settings['images_url'],'/categoria3.png" alt="Nombre de la categoria" />';
if ($category['id'] == 4)
echo '<img src="', $settings['images_url'],'/categoria4.png" alt="Nombre de la categoria" />';
echo'
</td>
</tr>
</tbody>';
// SMFSimple.com Rules!Les explico un poco el codigo:
Voy a explicar el ejemplo para la categoria 1.
Code: [Select]
if ($category['id'] == 1)
echo '<img src="', $settings['images_url'],'/categoria1.png" alt="Nombre de la categoria" />';Donde dice $category['id'] == 1 es el id de la categoria, para saber el id de la categoria tienen varias formas, una de las mas faciles es mirar el linktree entrando a algun tema cualquiera de esa categoria y donde dice el nombre de la categoria colocan el cursor y les aparecera algo como http://www.tusitio.com/index.php#c=1 eso significa que esa categoria tiene el id 1, y asi veran las demas. Donde dice categoria1.png sera la imagen que subiran de esa categoria. Y donde dice "Nombre de la categoria" ponen el nombre de la misma.
En el codigo que les di para reemplazar veran para hacerlo con 4 categorias, pero le puenden agregar mas, solo deberan copiar y pegar un nuevo if:
Code: [Select]
if ($category['id'] == 1)
echo '<img src="', $settings['images_url'],'/categoria1.png" alt="Nombre de la categoria" />';Nota importante: Las categorias rara vez tienen numeros correlativos, osea, 1, 2, 3, 4... Por ejemplo, en smfsimple los numeros son 1, 13, 14, 15, 3. Asi que no quieran poner 1, 2, 3, 4 como esta en el ejemplo porque no les va a funcionar.
Las imagenes las suben a la carpeta images del theme que estan modificando.
Y bueno, eso es todo. Cualquier duda nos las hacen saber! Y si les salio estaria bueno que nos muestren como les quedo!
SSimple Team!
