(Solucionado) Agregar cabecera de imagen en cada categoría

[nacheteno]

Hola compañeros.

 

No sé si el título lo explica muy bien, pero lo que quiero hacer es agregar una cabecera distina en cada categoría (en el lugar donde iría la foto de la categoría)

 

No lo quiero poner como foto de categoría por que en las miniaturas no queda bien.

 

Es decir, necesito saber como agregar un archivo en cada categoría.

 

He visto varias soluciones pero o son para agregar código html en la descripción o para hacer imagen de fondo en cada categoría.

 

Si alguien me puede ayudar....

 

Muchas gracias

Edited July 1, 2012 by nacheteno (see edit history)

[nacheteno]

¿A nadie se le ocurre nada?

[nacheteno]

Nadie...no estás por ahí? de nuevo necesito ayuda. Gracias

[nacheteno]

hola? Estoy probando de todo pero no lo consigo

[nadie]

hola? Estoy probando de todo pero no lo consigo

Hola, a ver dices que quieres una imagen por cada categoría, si eso ya lo hace prestashop, si la quieres mas grande, solo tienes que ir a la pestaña Preferencias/Imagenes y cambiar el tamaño de las imagenes.

 

Ahora si quieres colocar algo en otro sitio dependiendo de la categoría, podrias jugar con esta instrucción:

 

{if $smarty.get.id_category == 'X'} {/if}

 

 

Aunque yo creo que la pregunta no va por hay exactamente..

[nacheteno]

Hola Nadie, gracias por contestar.

 

En cada página de CMS he puesto una cabecera (adjunto imágen). Eso es fácil editando en html el editor de CMS.

 

Lo que quiero, es lo mismo para las categorías de productos(donde aparecen los productos disponibles). es decir, una cabecera igual que las CMS

 

No me vale poner una foto, por que entonces, en el listado de categorías en miniatura, sale esa cabecera en miniatura.

 

en resumen, quiero poner una foto en el listado de productos dependiendo de cada categoría.

[nadie]

Hola, ¿y eso no se puede hacer simplemente subiendo la imagen con la medida que quieres cuando creas o editas la categoria?

 

Saludos

Arriba comente que el tamaño lo puede cambiar en Preferencias/Imágenes... para hacer la miniaturas mas grande... pero se ve que quiere otra cosa, por que no me he terminado de enterar..

[nacheteno]

Hola.

 

Más o menos es lo que me dice Statictic, pero no sé que debo retocar de css ni como ocultar descripciones.

 

De momento si cambio el tamaño de la imagen sí que me sale la imagen que quiero en la lista de productos, pero en la lista de categorías sale en miniatura esa cabecera....

[nacheteno]

Vale, por pasos.

 

Me interesa una imagen de 525 x 106. Si camio el tamaño de la imagen de la categoría sí que me sale correctamente en el listado de productos de esa categoría, pero no sale bien en el listado de subgategorías.

 

¿Como hago para que en el listado de sugcategorías no aparezca en miniatura ni aparezca el nombre de la categoría?

 

Como en la imagen que quiero poner ya está el nombre de la subcategoría quiero utilizar esa imagen para que pinchen directamente en ella.

[nadie]

Vale, por pasos.

 

Me interesa una imagen de 525 x 106. Si camio el tamaño de la imagen de la categoría sí que me sale correctamente en el listado de productos de esa categoría, pero no sale bien en el listado de subgategorías.

 

¿Como hago para que en el listado de sugcategorías no aparezca en miniatura ni aparezca el nombre de la categoría?

 

Como en la imagen que quiero poner ya está el nombre de la subcategoría quiero utilizar esa imagen para que pinchen directamente en ella.

Editando el category.tpl de tu plantilla.

[nadie]

O si lo quieres ocultar, ve al fichero /themes/tu-plantilla/css/global.css

 

Y añade esto:

 

#subcategories {
display: none;
}

[nadie]

Con la instrucción que te he comentado antes, ni las miniaturas de las subcategorías ni los titulos de los miniaturas de las subcategorías se verían. (Suponiendo que trabajas con la plantilla por defecto, ya que desconozco con que plantilla trabajas)

[nadie]

O si quieres editar el fichero category.tpl, te cargas esta linea:

 

 {if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
  <h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
   <li>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {else}
   <img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
  {/if}
 </a><br />
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}

 

 

Y si modificas el fichero *.tpl, no se te olvide ir a la pestaña Preferencias/Rendimiento y señalar Forzar Compilación SI.

 

(Tocando el css, como te dije te sera mas sencillo que modificando el fichero)

[nacheteno]

Ok, pero modicando el CSS como me has dicho se vería la imagen que quiero poner en el listado de subcategorias?

 

Es decir, la misma imagen que en el listado de productos, sea tambien en el listado de subcategorias. yo uso prestahop new.

[nadie]

Ok, pero modicando el CSS como me has dicho se vería la imagen que quiero poner en el listado de subcategorias?

 

Es decir, la misma imagen que en el listado de productos, sea tambien en el listado de subcategorias. yo uso prestahop new.

La imagen que vas a dejar es la de las categoría en si, sea subcategoria o no, lo que quieres cargarte es el bloque de las subcategorías donde aparecen las miniaturas de estas correcto no? Si quieres cargarte ese bloque, coloca el css que te he comentado.

[nacheteno]

Bueno, no es que quiera cargarmelo, sino, que en vez de que aparezcan las miniaturas y el nombre de la categoría, quiero que aparezca el banner que voy a poner de cabecera en cada categoría. Ese banner ya lleva el nombre e imagen puesto.

 

En resumen, el listado quedaría en banners no en miniaturas y nombres

[nadie]

Bueno, no es que quiera cargarmelo, sino, que en vez de que aparezcan las miniaturas y el nombre de la categoría, quiero que aparezca el banner que voy a poner de cabecera en cada categoría. Ese banner ya lleva el nombre e imagen puesto.

 

En resumen, el listado quedaría en banners no en miniaturas y nombres

Prueba la instrucción que te he comentado y dime si te vale o no. (No pierdes nada, por hacerlo)

[nacheteno]

Perdón, pero no encuentro en ese ficher #subcategories { o debo añadir eso yo? si es así donde lo añado?

[nadie]

Perdón, pero no encuentro en ese ficher #subcategories { o debo añadir eso yo? si es así donde lo añado?

En la nueva plantilla lo tienes en /themes/tu-plantilla/css/category.css

[nadie]

Aviso, no se si es eso lo que quieres, si lo pruebas y no es eso lo que quieres, avísame...

[nacheteno]

Pues nada, no hace nada. A lo mejor se podría modificando el tamaño de esas miniaturas y eliminando la descripción y el título no? como se haría eso?

[nadie]

Pues nada, no hace nada. A lo mejor se podría modificando el tamaño de esas miniaturas y eliminando la descripción y el título no? como se haría eso?

Debería ocultarse el bloque de las miniaturas, pero ahora me dices que no quieres eso, a ver explícame paso a paso lo que quieres y si es posible deja la url de tu tienda.

[nadie]

Si quieres que aparezcan todas las imagenes de las subcategorías al tamaño de la imagen de la categoría, busca esto en el category.tpl: (Con la imagen del mismo de tamaño de la categoría, sin titulo y descripción)

 

Busca esto:

 

{if isset($subcategories)}
<!-- Subcategories -->
<div id="subcategories">
<h3>{l s='Subcategories'}</h3>
<ul class="inline_list">
{foreach from=$subcategories item=subcategory}
<li class="clearfix">
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
{if $subcategory.id_image}
<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'medium')}" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{else}
<img src="{$img_cat_dir}default-medium.jpg" alt="" width="{$mediumSize.width}" height="{$mediumSize.height}" />
{/if}
</a>
<a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" class="cat_name">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
{if $subcategory.description}
<p class="cat_desc">{$subcategory.description}</p>
{/if}
</li>
{/foreach}
</ul>
<br class="clear"/>
</div>
{/if}

 

 

Y lo dejas asi:

{if isset($subcategories)}
 <!-- Subcategories -->
 <div id="subcategories">
<h3>{l s='Subcategories'}</h3>
  <ul class="inline_list">
  {foreach from=$subcategories item=subcategory}
<li class="clearfix">
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}" title="{$subcategory.name|escape:'htmlall':'UTF-8'}" class="img">
  {if $subcategory.id_image}
   <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="" width="{$categorySize.width}" height="{$categorySize.height}" />
  {else}
   <img src="{$img_cat_dir}default-category.jpg" alt="" width="{$categorySize.width}" height="{$categorySize.height}" />
  {/if}
 </a>
</li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>
 {/if}

 

Una vez realizado el cambio, debes ir a la pestaña Preferencias/Rendimiento y señalar Forzar Compilación SI.

[nacheteno]

Sí, no me estoy explicando muy bien.

 

1. Yo tengo una lista de categorías. (imagen 1) y si le pinchas a esa lista te salen los productos. (imagen 2)

 

No quiero que aparezcan las fotos de la imagen 1 en el listado de productos sino que aparezca una cabecera de 535x106

 

Lo que pasa es que viendo que cada categoria no se puede modificar con html, pensaba en la idea de usar la misma imagen 525x106 tanto en el listado de subcategorias como en el listado de productos.

 

Pero como esa imagen de 525x106 ya lleva incrustado el nombre de la categoria y una imgagen no quiero que aparezca la descripción ni el título. solo un listado de imagenes 525x106 como si fuera las antiguas miniaturas.

 

(en la categoria mundo sado se ve como queda el banner pero lo hace muy pequeño)

[nadie]

Revisa mi mensaje: http://www.prestashop.com/forums/index.php?/topic/176069-agregar-cabecera-de-imagen-en-cada-categoria/page__view__findpost__p__868222

[nadie]

He actualizado mi mensaje: http://www.prestashop.com/forums/index.php?/topic/176069-agregar-cabecera-de-imagen-en-cada-categoria/page__view__findpost__p__868222 revisalo.

[nadie]

Y lo que pusistes en el css quitalo, no sea que ahora de verdad no sea vean las subcategorías jejej

[nacheteno]

Vale, empos avanzado. ya no se ve el título de cada categoria ni la describpción.

 

Pero si te fijas en la imagen que adjunto la unica imagen que tenia 525x106 es la de mundo sado y esa si quedeberia verse bien, no como ahora y eso que he cambiado el tamaño de las imagenes de categoria.

[nadie]

Vale, empos avanzado. ya no se ve el título de cada categoria ni la describpción.

 

Pero si te fijas en la imagen que adjunto la unica imagen que tenia 525x106 es la de mundo sado y esa si quedeberia verse bien, no como ahora y eso que he cambiado el tamaño de las imagenes de categoria.

Puedes colocar la url de tu tienda?

Has copiado mi código tal como te he dicho?

[nacheteno]

Si, lo he copiado tal cual. mi pagina es 69manzanas.es

[nadie]

Lo has puesto mal..

 

Busca esto:

 

 <img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="" width="{$categorySize.height}" height="{$categorySize.height}" />

 

Y lo dejas así:

 

<img src="{$link->getCatImageLink($subcategory.link_rewrite, $subcategory.id_image, 'category')}" alt="" width="{$categorySize.width}" height="{$categorySize.height}" />

[nacheteno]

Joer, perfecto.... solo dos cositas.

 

1. Hay alguna manera de quitar ese recuadro? me gustyaria que saliera la foto sin el recuadro.

 

2. Hay alguna manera de que salga la foto sin que haya que escribir algo en la descripción? de momento he puesto un punto, pero mejor no poner nada y que no salga la palabra More

[nadie]

Joer, perfecto.... solo dos cositas.

 

1. Hay alguna manera de quitar ese recuadro? me gustyaria que saliera la foto sin el recuadro.

 

Para quitar el recuadro

 

Prueba esto:

 

Fichero:

 

/themes/prestashop_new/css/category.css

 

Busca esto:

 

.inline_list li img {
border: 1px solid #CCC;
}

 

Y lo dejas así:

 

.inline_list li img {
/*border: 1px solid #CCC;*/
}

[nadie]

 

2. Hay alguna manera de que salga la foto sin que haya que escribir algo en la descripción? de momento he puesto un punto, pero mejor no poner nada y que no salga la palabra More

 

Prueba esto:

 

Busca esto en el category.tpl

 

{if $scenes || $category->description}
 <div class="content_scene_cat">
  {if $scenes}
   <!-- Scenes -->
   {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
  {else}
   <!-- Category image -->
   {if $category->id_image}
   <div class="align_center">
 <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
   </div>
   {/if}
  {/if}
  {if $category->description}
   <div class="cat_desc">
 <p>{$category->description}</p>
 <a href="#" class="lnk_more">{l s='More'}</a>
   </div>
  {/if}
 </div>
 {/if}

 

 

Y dejalo asi:

 

 <div class="content_scene_cat">
  {if $scenes}
   <!-- Scenes -->
   {include file="$tpl_dir./scenes.tpl" scenes=$scenes}
  {else}
   <!-- Category image -->
   {if $category->id_image}
   <div class="align_center">
 <img src="{$link->getCatImageLink($category->link_rewrite, $category->id_image, 'category')}" alt="{$category->name|escape:'htmlall':'UTF-8'}" title="{$category->name|escape:'htmlall':'UTF-8'}" id="categoryImage" width="{$categorySize.width}" height="{$categorySize.height}" />
   </div>
   {/if}
  {/if}
  {if $category->description}
   <div class="cat_desc">
 <p>{$category->description}</p>
 <a href="#" class="lnk_more">{l s='More'}</a>
   </div>
  {/if}
 </div>

[nacheteno]

Lo primero ha funcionado correctamente. pero lo segundo no, sale saliendo lo de More y necesita descripción para que salga la imagen

[nacheteno]

Vale, no no. ya está todo correctamente. salen las fotos sin necesidad de descripción y sin recuadros....

 

Muchas gracias a los dos, con gente como vosotros es menos fácil desdesperarse.

 

Saludos

[nadie]

Vale, no no. ya está todo correctamente. salen las fotos sin necesidad de descripción y sin recuadros....

 

Muchas gracias a los dos, con gente como vosotros es menos fácil desdesperarse.

 

Saludos

Un placer ayudarte y servirte!

Un saludo y recuerda que estaremos por el foro, para guiarte por este mundo oscuro y tenebroso.

[nacheteno]

Hola Nadie. no sé si estás ahora por ahí, pero me ha surgido una duda respecto este tema.

 

Las imágenes están saliendo bien, tal como quería, pero lo que veo es que entre imagen e imagen de la lista de subcategorías hay mucho espacio. Como puedo modificar la distancia entre cada imagen para que sea menor?

 

Gracias

[nadie]

Hola Nadie. no sé si estás ahora por ahí, pero me ha surgido una duda respecto este tema.

 

Las imágenes están saliendo bien, tal como quería, pero lo que veo es que entre imagen e imagen de la lista de subcategorías hay mucho espacio. Como puedo modificar la distancia entre cada imagen para que sea menor?

 

Gracias

Fichero:

 

/themes/prestashop_new/css/category.css

 

Busca esto:

 

.inline_list li {
padding: 10px 0;
border-bottom: 1px dotted #CCC;
}

 

 

Y lo dejas así:

 

.inline_list li {
padding: 0px 0;
border-bottom: 1px dotted #CCC;
}

[nacheteno]

perfecto. muchas gracias

[Infograficibi]

Buenas!!

 

Nadie he seguido los pasos tal como has dicho pero algo he debido hacer mal porque se me queda tal como estaba, además con esos pasos tampoco se como agregar luego la imagen de cabecera. Podrías ayudarme?

 

Muchas gracias de antemano.

Mi web es www.tosqueta.com plantilla matrice.