Jump to content

Remplacer les images par du css dans certaines catégories


Tchupa
 Share

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by franckm1000 (see edit history)

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by franckm1000 (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

 

post-125302-0-93308300-1352049414_thumb.jpg

 

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 by Tchupa (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by Tchupa (see edit history)

Share this post


Link to post
Share on other sites

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 by franckm1000 (see edit history)

Share this post


Link to post
Share on other sites

  • 1 month later...
  • 4 weeks later...

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More