Utilisation de l'image de catalogue en tant qu'image de fond complète dans Magento

Question

Je traite ici d'un délai court, donc je vais poser cette question sans avoir encore approfondi cette question. Bien que je blesse c'est une bonne question qui peut intéresser beaucoup de gens qui traitent avec Magento.

On m'a demandé de faire quelques modifications sur un eshop Magento. Entre autres choses, j'ai besoin d'utiliser l'image catégorie de chaque catégorie comme une image de fond entièrement redimensionnable, en utilisant ce (ou un similaire) plugin - http://johnpatrickgiven.com/jquery/background-resize/

Toute aide serait grandement appréciée.

Answer 1

Pour la mise en page de votre thème ajouter ce qui suit comme local.xml

<layout> 
    <catalog_category_default> 
     <reference name="before_body_end"> 
      <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" /> 
     </reference> 
    </catalog_category_default> 
    <catalog_category_layered> 
     <reference name="before_body_end"> 
      <block type="catalog/category_view" name="back.image" template="page/html/back.image.phtml" /> 
     </reference> 
    </catalog_category_layered> 
<layout> 

Ensuite, dans le modèle du thème créer un fichier page/html/back.image.phtml

<?php if ($this->getCurrentCategory()->getImage()): ?> 
<div id="back_frame"> 
    <img class="back_image" src="<?php echo $this->getCurrentCategory()->getImageUrl() ?>" alt="<?php echo $this->getCurrentCategory()->getName() ?>" /> 
</div> 
<?php endif ?> 

ajouter enfin quelque chose comme ceci au CSS de votre thème.

.page { 
    position: relative; 
} 
#back_frame { 
    position: fixed; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
    z-index: -1; 
} 
#back_image { 
    width: 100%; 
} 

Je n'ai pas réellement testé tout cela, mais il semble assez simple à travailler. Certes, c'est trop simple d'avoir besoin de javascript!