Remplacer les images par du css dans certaines catégories

Tchupa · November 3, 2012

Bonjour,

je voudrais remplacer les images de certaines catégories et sous catégories par du CSS, j'aurais aimer savoir si dans un premier c'est possible.

Et si c'est le cas , comment s'y prendre?

En gros c'est pour m'éviter de créer des images spécifiques sur certaine de mes catégories et sous-catégories afin d'obtenir un gain de temps énorme dans le développement du contenu de ma boutique en ligne.

En vous remerciant.

Cordialement Tchupa.

franckm1000 · November 3, 2012

Je comprends pas tout... comment changer une image par du CSS ?? Le CSS (cascading style sheet ou feuille de style en cascade) sert à mettre en page du texte et des images au moyen d'attributs.

Je ne vois pas sous quelle manière il peut se substituer à une image ?

Ou alors tu t'es mal exprimé ?

Edited November 3, 2012 by franckm1000 (see edit history)

Tchupa · November 3, 2012

Bonjour,

quand on crée une catégorie, dans celle-ci tu mets une image ou pas , mais si tu ne mets pas d'image tu te retrouve avec "no image" a la place.

Mon but sur certaine catégorie et sous catégorie et uniquement sur celle-ci, je voudrais qu'a la place du no-image par exemple on voit un cadre avec une couleur de fond et le nom de la catégorie dans celui-ci?

Tu comprends ou non là ou je veux en venir?

franckm1000 · November 3, 2012

Dans le fichier category.tpl on a le code suivant:

<!-- 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}

Ce code veut dire "si catégorie possède une image alors je l'affiche. Par contre, si tu ne mets pas d'image, elle n'affiche en théorie rien du tout ? (pas de "no image").

La solution est de rajouter une condition else qui fera dire: "si image je l'affiche SINON j'affiche autre chose (à savoir un bloc)

Tu peux changer le code de la façon suivante:

<!-- 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>
{else}
<div class="no_category_image"></div>
{/if}

Ensuite il te restera à "remplir" ta boite avec le css et la classe no_category_image. Par exemple, dans le fichier global.css:

.no_category_image{
display:block;
width:90%;
height:100px;
margin: 5px auto;
padding:5px;
background: url(...)
...
}

De cette façon, à chaque fois qu'une catégorie n'aura pas d'image elle affichera ce bloc par défaut.

Edited November 3, 2012 by franckm1000 (see edit history)

Tchupa · November 3, 2012

Bonsoir,

je vais tester tout ça Franck je te remercie. Quand je parle de no image c'est l'image générique que prestashop met quand tu ne mets pas d'image.

Cordialement.

franckm1000 · November 3, 2012

Oui ça j'ai compris mais pour les catégories il n'y a justement pas d'images par défaut. C'est vrai pour les produits mais pas les catégories. D'ailleurs le code:

<!-- 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}

ne contient justement pas de "else" donnant droit à un autre affichage. Il stipule simplement "si image je l'affiche" sinon... rien.

Tchupa · November 4, 2012

Effectivement ce n'est pas réellement une image mais c'est tout comme au niveau de la présentation:

D'ailleur dans mon category.tpl

<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>

Par contre ma condition ne doit pas être correct car ça fonctionne pas

<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}" />

 </a>
 <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
 {else}
   <div class="no_category_image"><a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a></div>
  {/if}

   </li>
  {/foreach}
  </ul>
  <br class="clear"/>
 </div>

Edited November 4, 2012 by Tchupa (see edit history)

franckm1000 · November 4, 2012

Non mais là on ne parle pas de la même chose.

En fait on parle de la même image mais pas au même endroit !

En effet, moi je te parlais de l'image de la catégorie qui est affichée en haut de la catégorie en cours.

Toi tu parles des vignettes pour les sous-catégories suivantes...

Fait plutôt comme ça:

<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}
	   <div class="no_category_image"></div>
   {/if}
   </a>
  <a href="{$link->getCategoryLink($subcategory.id_category, $subcategory.link_rewrite)|escape:'htmlall':'UTF-8'}">{$subcategory.name|escape:'htmlall':'UTF-8'}</a>
</li>

Ensuite, il faut bien créer la classe css no_category_image derrière pour pouvoir afficher le bloc par défaut comme tu veux.

Tchupa · November 6, 2012

Bonjour Franck,

Donc j'ai testé ton dernier bout de code mais ça ne fonctionne toujours pas pour moi, on édite bien le fichier category.tpl ?

{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}
			   <div class="no_category_image"></div>
				{/if}
				</a>
				<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}

Et pour le fichier css: category.css

/* category.tpl */
body#category #subcategories li { height: 136px; width: 108px; margin-right: 3px }
div.cat_desc { margin: 0 1em }
body#category div#subcategories .inline_list a img { display: inline }
#category img#categoryImage { margin-top: 1em }
#subcategories ul li a { display: block }

body #category div#subcategories .no_category_image{
display:block;
width:90%;
height:100px;
margin: 5px auto;
padding:5px;
background:#ffa800;}

J'ai merdé?

Edited November 6, 2012 by Tchupa (see edit history)

franckm1000 · November 6, 2012

Si à la place de:

<div class="no_category_image"></div>

tu mets simplement "test". Lorsque tu affiches des catégories sans images uploadées, il affiche test ou pas ?

Pour le css utilises peut être plutôt:

#category div#subcategories ul li .no_category_image

Edited November 6, 2012 by franckm1000 (see edit history)

Tchupa · November 8, 2012

Quand je mets "test" dans la condition else bah ça change rien test ne s'affiche pas j'ai toujours le fameux "aucune image disponible".

Tchupa · December 10, 2012

Bonjour,

un petit up, car je n'ai toujours pas trouvé de solution efficace, j'ai l'impression qu'il crée une image lors de la création de la sous-catégorie.

Vous en pensez quoi?

Cordialement.

misterpink · December 11, 2012

Question idiote peut etre mais si tu vois pas tes changements, ne serais ce pas parceque le cache et la complilation ne sont pas desactivés? et aussi vide le cache de ton navigateur

Tchupa · January 8, 2013

Bonsoir,

bien sur que la compilation est activée et le cache désactivé c'est sur une version de développement.

Je n'ai toujours pas trouvé de solution, quelqu'un aurait une piste a me soumettre?

En vous remerciant.

Cordialement.

Remplacer les images par du css dans certaines catégories

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

Create an account or sign in to comment

Create an account

Sign in