Logotipo distinto para home y para articulos

telamarinera · November 3, 2015

Buenas

El título lo dice bastante claro pero voy a extenderme xD

Uso el tema Theme01 grid ( http://www.tela-marinera.com ), Prestashop actualizado a 1.6.1.2.

Quisiera que en la pagina inicio (columna izquierda) que se carga el logotipo de la página fuera uno, el que está pero en su posición original (eso no es problema) y en cualquier artículo fuera otro, hecho aposta, que no tapase las imágenes.

Obviamente cuando cambio algo afecta a todo porque son el mismo.

¿Sería posible?

¿Como?

Gracias de antemano.

Eusebio100 · November 3, 2015

Yo antes lo tenía como dices, un logo para inicio y otro distinto para el resto. En mi caso era el tema por defecto pero no creo que el tuyo sea muy diferente, lo hice de la siguiente manera:

1) Quitar del archivo header el div contenedor del logo.

2) Crear y bajar dos modulos contentbox que puedes nombrar por ejemplo logo1 y logo2.

3) Subir los módulos y anclarlos al hook displayTop y con las excepciones especificas en que archivos quieres que se muestre cada uno.

4) Poner en el contenido de cada módulo el logo que corresponda.

.................

Mientras escribo esto estoy pensando que quizás pueda valer algo más sencillo, como esto por ejemplo:

<div id="header_logo">
         {if $page_name == "index"}
	    <a href="..........logo1"></a>
         {else}
            <a href=".........logo2"></a>
         {/if} 
</div>

ventura · November 3, 2015

Si lo que quieres es solo modificar el tamaño o la posicion del logo dependiendo de la pagina puedes hacerlo con css, añadiendo en este archivo las clases a modificar

themes/tu_tema/css/global.css

asi por ejemplo se reduciria el tamaño del logo en la pagina del producto

#product #header_logo img {
width: 100px;
}

telamarinera · November 4, 2015

Yo antes lo tenía como dices, un logo para inicio y otro distinto para el resto. En mi caso era el tema por defecto pero no creo que el tuyo sea muy diferente, lo hice de la siguiente manera:

1) Quitar del archivo header el div contenedor del logo.

2) Crear y bajar dos modulos contentbox que puedes nombrar por ejemplo logo1 y logo2.

3) Subir los módulos y anclarlos al hook displayTop y con las excepciones especificas en que archivos quieres que se muestre cada uno.

4) Poner en el contenido de cada módulo el logo que corresponda.

.................

Mientras escribo esto estoy pensando que quizás pueda valer algo más sencillo, como esto por ejemplo:
<div id="header_logo">
         {if $page_name == "index"}
	    <a href="..........logo1"></a>
         {else}
            <a href=".........logo2"></a>
         {/if} 
</div>

Gracias Eusebio100

1) El div del header en el tpl? vengo de html css y wordpress y el php y java se me escapan un poco (bastante)

2,3 y4) Voy a ir probando que para algo lo tengo en local también aunque agradecería una explicación más detallada

Edited November 4, 2015 by telamarinera (see edit history)

telamarinera · November 4, 2015

Si lo que quieres es solo modificar el tamaño o la posicion del logo dependiendo de la pagina puedes hacerlo con css, añadiendo en este archivo las clases a modificar
themes/tu_tema/css/global.css
asi por ejemplo se reduciria el tamaño del logo en la pagina del producto
#product #header_logo img {
width: 100px;
}

Gracias Ventura,

funciona a la perfección, igualmente voy a indagar en la forma de hacerlo de Eusebio100 que es lo que realmente busco.

Saludos.

ventura · November 4, 2015

Para condicionar el logo en el archivo

themes\tu_tema\header.tpl

busca esta parte o algo parecido, depende de la plantilla que estés utilizando

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

en esa parte esta el enlace al logo, mediante la variable global logo_url y las variables asociadas de width y height. Si lo que quieres es que dependiendo de la pagina aparezca un logo u otro con su respectivo tamaño

 
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{* Imagen logo para las paginas (categorias o producto por ejemplo) *}

{if in_array($page_name, array(product,category))}

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$page_name}.jpg" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

{* Imagen logo para el resto de las paginas *}
 
{else} 

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

 {/if}

</a>
</div>

La imagenes del logo para las paginas seleccionadas ( en el ejemplo que te he puesto product y category), las subes a la ruta /img y los archivos los nombras con el nombre de la pagina, ejemplo

logo_product.jpg con el formato de imagen que tengan. El resto de las paginas no incluidas en el array mostraran el logo por defecto con sus medidas por defecto.

Edited November 4, 2015 by ventura (see edit history)

telamarinera · November 4, 2015

Para condicionar el logo en el archivo
themes\tu_tema\header.tpl
busca esta parte o algo parecido, depende de la plantilla que estés utilizando
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>
en esa parte esta el enlace al logo, mediante la variable global logo_url y las variables asociadas de width y height. Si lo que quieres es que dependiendo de la pagina aparezca un logo u otro con su respectivo tamaño
 
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{* Imagen logo para las paginas (categorias o producto por ejemplo) *}

{if in_array($page_name, array(product,category))}

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$page_name}.jpg" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

{* Imagen logo para el resto de las paginas *}
 
{else} 

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

 {/if}

</a>
</div>
La imagenes del logo para las paginas seleccionadas ( en el ejemplo que te he puesto product y category), las subes a la ruta /img y los archivos los nombras con el nombre de la pagina, ejemplo

logo_product.jpg con el formato de imagen que tengan. El resto de las paginas no incluidas en el array mostraran el logo por defecto con sus medidas por defecto.

Buenas de nuevo Ventura y mil gracias más.

Entiendo esto:

Mi código es este

</a>

</div>

Lo he comentado para no perderlo y he usado el tuyo

<!-- div id="header_logo">

</a>

</div> -->

{* Imagen logo para las paginas (categorias o producto por ejemplo) *}

{if in_array($page_name, array(product,category))}<--- Aqui entiendo que si carga página de producto o categoría salta la imagen nueva

{* Imagen logo para el resto de las paginas *}<---la url iria aqui?

{else} <---- sino carga la normal

{/if}

</a>

</div>

Estoy en lo cierto? y si estoy en lo cierto, la url como la introduzco? como html normal? ../img/nombre.jpg por ejemplo?

Perdón por ser tan pez y gracias por ayudar.

ventura · November 4, 2015

Lo has entendido perfectamente y la explicacion no era demasiado completa.

La url en el ejemplo que te he puesto seria la misma en todos los casos( solo esta condicionada la imagen), apuntando al dominio principal con o sin certificado ssl, al dominio principal en cualquier caso vaya ( midominio.com), es la que esta por defecto

<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

en caso de que quieras condicional tambien para cada logo puedes añadirla la url directamente entre la comillas

<a href="http://www.midominio.com/subdominio">

Y se tiene que incluir todo el enlace, url e imagen en el condicional

telamarinera · November 5, 2015

Lo has entendido perfectamente y la explicacion no era demasiado completa.

La url en el ejemplo que te he puesto seria la misma en todos los casos( solo esta condicionada la imagen), apuntando al dominio principal con o sin certificado ssl, al dominio principal en cualquier caso vaya ( midominio.com), es la que esta por defecto
<a href="{if $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
en caso de que quieras condicional tambien para cada logo puedes añadirla la url directamente entre la comillas
<a href="http://www.midominio.com/subdominio">
Y se tiene que incluir todo el enlace, url e imagen en el condicional

Buenas de nuevo,

Añadí el código tal que así:

<div id="header_logo">

<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{<a href="http://localhost:8080/prestashop/themes/01grid/img/logo_productos.png">}

{if in_array($page_name, array(product,category))}

<img class="logo" src="{$img_ps_dir}logo_{$page_name}.jpg" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

{<a href="http://localhost:8080/prestashop/img/tela-marinera-logo-1444831700.jpg">}

{else}

<img class="logo"{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

{/if}

</a>

</div>

No funciona pero creo saber una parte, que es que alguna llave no está cerrada, por los colores que lanza el sublime text. No sé si habrá algo más mal puesto por mi parte, que no me extrañaría.

Gracias de antebrazo Ventura

ventura · November 5, 2015

-Como ya te comente mas arriba el enlace por defecto del logo dirige al home de la tienda, al dominio principal,

Si quieres condicionar ademas del logo el enlace de destino incluyelo en el condicional tambien pero no tiene mucho sentido que cada logo dirija a un sitio distinto dentro de la misma pagina

Edited November 5, 2015 by ventura (see edit history)

telamarinera · November 5, 2015

-Como ya te comente mas arriba el enlace por defecto del logo dirige al home de la tienda, al dominio principal,

Si quieres condicionar ademas del logo el enlace de destino incluyelo en el condicional tambien pero no tiene mucho sentido que cada logo dirija a un sitio distinto dentro de la misma pagina

Lo único que quiero es que cambie la imagen pero a mi me suena bastante a chino intento comprenderlo...gracias.

ventura · November 5, 2015

Entonces seria como te puse mas arriban no hay que añadir nada mas, los comentarios que aparecen en el codigo son a titulo informativo nada mas

<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{* Imagen logo para las paginas (categorias o producto por ejemplo) *}

{if in_array($page_name, array(product,category))}

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$page_name}.jpg" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

{* Imagen logo para el resto de las paginas *}
 
{else} 

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

 {/if}

</a>
</div>

incluyendo las imagenes nuevas del logo en la ruta /img, nombradas con el name de la pagina en que apareceran, product, category, ejemplo

logo_product.jpg

telamarinera · November 5, 2015

Ok el código queda pues como me dijiste en un principio

<div id="header_logo">

<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{* Imagen logo para las paginas (categorias o producto por ejemplo) *}

{if in_array($page_name, array(product,category))}

<img class="logo" src="{$img_ps_dir}logo_{$page_name}.jpg" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

{* Imagen logo para el resto de las paginas *}

{else}

<img class="logo"{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

{/if}

</a>

</div>

Y añadí la nueva imagen logo_product.png (no creo que la extensión influya) en la misma carpeta del logo original pero no funciona.

Quiero remarcar que la captura anterior que puse era para que vieras el código como parecía ser que faltaba algo por cerrar, por los colores vamos jaja y si lo anterior está todo bien quizás falle por eso.

Gracias!!

ventura · November 5, 2015

Si que influye, forma parte del enlace, cambialo en el codigo y ya esta

Eusebio100 · November 5, 2015

Tal y como lo yha puesto ventura si que influye la extensión, date cuenta que en el código refiere la imagen con extensión jpg.

logo_{$page_name}.jpg

Prueba a cambiar la extensión en el code o en el archivo.

telamarinera · November 5, 2015

Gracias por estar tan atentos!

Me pongo a hablar de extensiones y no veo delante una del tamaño de la catedral de Burgos jaja

Pero bueno, ni por código ni cambiando la imagen, sigue sin surtir efecto.

ventura · November 5, 2015

Desde

Parámetros Avanzados /  Rendimiento

vacia la cache y selecciona que recompile la plantilla cuando se realiza algun cambio por si depende de eso que no se te apliquen los cambios

telamarinera · November 5, 2015

Eh Ventura, eres el amo jajaja

Ya sale la segunda imagen en los productos, ahora ha desaparecido el logo original del index. Sólo sale texto y lo marca como vinculo eso si.

telamarinera · November 5, 2015

Pondría la url de nuevo para que vierais el live pero estoy haciendolo en local para antes de hacer cambios a lo loco asegurarme que va bien todo así que os paso unas capturas de lo que os digo en el anterior mensaje.

Gracias!

Eusebio100 · November 5, 2015

No se si será eso, pero te recuerdo que uno es el logo por defecto y como tal deberás subir la imagen en el admin, el otro es el logo condicionado y deberás subirlo a la carpeta img, tal y como te ha indicado ventura.

telamarinera · November 6, 2015

Gracias Eusebio por contestar

Ya he probado poniendo el logo en cualquier carpeta susceptible a que lo leyera pero de momento no hay suerte.

Eusebio100 · November 6, 2015

Pero cual es el que te falla, el original o el condicionado?

telamarinera · November 6, 2015

El original jaja

El condicionado sale perfectamente.

Eusebio100 · November 6, 2015

Como dije antes el original no tienes que ponerlo directamente en ninguna carpeta, lo que tienes que hacer es subirlo desde el admin/preferencias/temas....

telamarinera · November 6, 2015

Perdón por entender mal pero no veía necesario volver a subir algo ya subido. Aún así lo resubí y el efecto es el mismo, ningún logo en el index (solo las palabras y actuando de enlace al propio index) y el condicionado perfectamente puesto.

Eusebio100 · November 6, 2015

Lo único que sde me ocurre es que sea la clase logo. En el código que te ha dado ventura prueba a sustituir esto:

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

Por esto:

<img class="logo" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

Como puedes ver lo único que hago es dejar el enlace a la imagen tal y como tu lo tenías por defecto. Esto es lo único que se me ocurre, para más necesitaría una url para comprobar.

Tal vez ventura pueda dar alguna otra pista.

ventura · November 6, 2015

Tiene pinta de que te has cargado el enlace del logo default, posiblemente por algún cierre de un condicional. Pero con paciencia se consigue todo.

Sustituye esto

<div class="container">
<div class="row">
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">
<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/></a></div>

Por esto

<div class="row">
<div id="header_logo">
<a href="{if isset($force_ssl) && $force_ssl}{$base_dir_ssl}{else}{$base_dir}{/if}" title="{$shop_name|escape:'html':'UTF-8'}">

{if in_array($page_name, array(product,category))}

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$page_name}.png" alt="{$shop_name|escape:'html':'UTF-8'}" width="200" height="200"/>

{else} 

<img class="logo img-responsive" src="{$logo_url}" alt="{$shop_name|escape:'html':'UTF-8'}"{if isset($logo_image_width) && $logo_image_width} width="{$logo_image_width}"{/if}{if isset($logo_image_height) && $logo_image_height} height="{$logo_image_height}"{/if}/>

{/if}

</a>
</div>

Sube los archivos logo por ejemplo en formato .png nombrados de esta manera a la ruta /img

logo_product.png
logo_category.png

y ya estara

telamarinera · November 6, 2015

Gracias a ambos de nuevo, no me cansaré de decirlo

Voy a probarlo pero antes quiero volver a dejar una captura del sublime text con los colores para que veais las diferencias (class container y row no están ahí, supongo que es de cualquier otra que coges para ejemplificar y img class="logo img-responsive" es solo img class="logo" )

telamarinera · November 6, 2015

Funciona a la perfección.

Muchisimas gracias Ventura y Eusebio100!!! Unos maestros!

telamarinera · November 6, 2015

En el live no funciona eso sí jajaja lo repasaré todo para ver que lo hice bien y sino seguiré dando la brasa. Lo siento

Eusebio100 · November 6, 2015

Funciona a la perfección.

Muchisimas gracias Ventura y Eusebio100!!! Unos maestros!

Gracias, pero yo siempre un aprendiz. Me gusta aprender y de ventura aprendo mucho; él sí que es un maestro.

Per_PR · May 24, 2016

Buenas tardes,

Siguiendo todas las instrucciones que se detallan en el post (geniales, muchas gracias) he conseguido poner que el logo sea distinto para las categorias y productos pero me gustaria que fuera distinto en función de la categoria.

Yo he mirado de sustituir

{if in_array($page_name, array(product,category))}

(*Por*)

{if in_array($page_name, array(category-id))}

Seria posible? alguien podria ayudarme?

ventura · May 24, 2016

Buenas tardes,

Siguiendo todas las instrucciones que se detallan en el post (geniales, muchas gracias) he conseguido poner que el logo sea distinto para las categorias y productos pero me gustaria que fuera distinto en función de la categoria.

Yo he mirado de sustituir
{if in_array($page_name, array(product,category))}

(*Por*)

{if in_array($page_name, array(category-id))}
Seria posible? alguien podria ayudarme?

Es posible, puedes hacerlo desde el .tpl sin editar el FrontController.php, asi utilizando el id de la categoria

{if in_array($smarty.get.id_category, array(2,3,4))}

Per_PR · May 25, 2016

Muchas gracias Ventura,

Entiendo que la línea

{if in_array($page_name, array(product,category))}

la sustituyo por la que me indicas

{if in_array($smarty.get.id_category, array(2,3,4))}

Y la numeración pongo los números de las categorias que me interesa cambiar el logo.

Y subo el nombre del archivo de cada logo con el category-numero de categoria?

Per_PR · May 25, 2016

Publico la solución a mi duda anterior:

{if in_array($smarty.get.id_category, array(12,13,14))}

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$smarty.get.id_category}_category.png" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

En la linea del array pongo las categorias que quiero cambie el logo

en mi caso 12, 13 y 14 y en la imagen sustituyo

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$page_name}.png" alt="{$shop_name|escape:'html':'UTF-8'}" width="200" height="200"/>

Por

<img class="logo img-responsive" src="{$img_ps_dir}logo_{$smarty.get.id_category}_category.png" alt="{$shop_name|escape:'html':'UTF-8'}" width="250" height="120"/>

lo que hago es sustituir el $page_name por

{$smarty.get.id_category}

a la url de la imagen.

Después subes la imagen a la ftp de la siguiente manera logo_X_category.png siendo X el número de tu categoria.

Ahora sólo me queda cambiar de color el menu en función de la categoria pero supongo que esto estará en algun lugar del foro

Muchas gracias a todos por la ayuda

Edited May 25, 2016 by Per_PR (see edit history)

Logotipo distinto para home y para articulos

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in