Jump to content

Problème avec images catégories et sous-catégories


Recommended Posts

Bonjour,

 

Je débute avec Prestashop et suis en train de créer ma boutique sur la version 1.6.

 

Je rencontre des difficultés pour intégrer des images dans les catégories. J'ai vu que d'autres personnes avaient le même problème mais à priori il n'y a pas de solutions.

 

Je m'explique : 

 

Lors de la création d'une catégorie ou plutôt d'une sous-catégorie vous ne pouvez qu'enregistrer une seule image. Le problème c'est que la photo est utilisée pour le bandeau (870 x 217) et pour la miniature (125 x 125). On se retrouve ainsi avec des images mal dimensionnées. Soit trop petite, soit trop grande.

 

Aidez-moi si vous plaît ? Si vous-plaît Mosieur ? Ou Mdame d'ailleurs ?

Link to comment
Share on other sites

Bonjour,

 

soyez plus précis sur votre désir car les images sont toujours à la bonne dimension puisque Prestashop remplira automatiquement le vide.

 

Si vous souhaitez utiliser d'autre format d'image vous pouvez modifier les dimensions ou créer de nouvelle et les intégrer dans le tpl d'affichage de cette image.

  • Like 1
Link to comment
Share on other sites

Bonjour,

 

Non il a raison, j'ai déja soulever le point sans reponse

 

Avec default bootstrap v 1 et prestashop 1608

 

Dans catégorie affiché nous avons les images des items pour chaque sous catégorie, elles sont les memes pour utiliser en titre de page dans la sous catégorie.

 

Le probleme en titre de page, elle ce trouve au centre, en plein dans le texte.

 

Par defaut, cela devrait ce retrouvé a droite et le texte, a la gauche.

 

Conclusion, presentement Prestashop 1,6,0,8 et bst v1 ont un défaut de ce coté car impossible de merge une pic de 870 dans un emplacement de 125pcx, et moi css, pas mon fort :)

 

a pluche

 

 

 
Link to comment
Share on other sites

Bonjour,

 

Merci Optimo de confirmer. De plus, Prestashop Fanatic, vous ne vous en souvenez certainement plus mais vous êtes au courant car vous aviez dialogué sur le sujet sur ce topic.

 

Mais c'est vrai que je n'ai peut être pas était assez clair. Vous proposiez d'ailleurs une partie de la solution en utilisant les scènes pour mettre une image bandeau et une autre image pour les catégories et sous-catégories. J'ai essayé mais en vain...

 

Si vous pouviez en dire plus sur cette méthode ce serait sympa.

Link to comment
Share on other sites

 

Merci Optimo de confirmer. De plus, Prestashop Fanatic, vous ne vous en souvenez certainement plus mais vous êtes au courant car vous aviez dialogué sur le sujet sur ce topic.

 

Désolé P, je ne figure pas sur ce topic et je n'ai pas la solution.

 

Et je trouve ca tres laid l'image au centre :(

Link to comment
Share on other sites

Bonsoir,

 

Non je ne parlais pas de vous mais de Mediacom87. Sauf qu'au lieu de citer son nom, j'ai fais un copier-coller de son niveau de statut de membre.

 

Pour en revenir au sujet, c'est vrai que c'est laid et pas ergonomique du tout.

 

J'espère que l'on aura un jour la réponse...

Link to comment
Share on other sites

j'ai beau lire, relire et rerelire je ne comprends toujours pas vraiment le soucis.

 

Il existe une contrainte à savoir que on utilise une seule image originale pour identifier une sous catégorie et présenter celle ci sur sa page.

 

Automatiquement prestashop rempli les espace manquant sur le format des images. C'est à dire que sii vous créez un format 125x125 (carré) et que votre image est en mode paysage alors prestashop remplira de blanc le haut et le bas de l'image pour la rendre compatible avec ce format carré.

 

Si vous désirez utiliser un image paysage en identifiant de sous catégorie et en haut de vos catégorie il suffit de créer des formats adapté au ratio de votre image (largeur/hauteur) et donc elle seront toujours rectangulaire.

 

mais dans tous les cas il faut conserver une cohérence et aussi apprendre à modifier les template afin d’utiliser des formats d'images personnalisés.

 

après je sais que ce n'est pas simple mais il fautr prendre le temps d'y réfléchir afin d'utiliser convenable ces fonctions.

 

On peut très bien avoir des images carrées partout et coller le texte descriptif des catégorie à côté ... tout est presque possible mais il faut donner des exemple claire et aussi essayer de trouver les terme pour expliquer son désir.

Link to comment
Share on other sites

Voila les captures :)

 

 

 

1403640445-test01.jpg

 

 

 

---------------------------------------------------------------------------------------------

 

 

1403640449-test02.jpg

 

 

 

----------------------------------------------------------------------------------------------------------

 

 

1403640452-test03.jpg

Edited by Optimo (see edit history)
Link to comment
Share on other sites

Donc c'est exactement ce que j'explique depuis le début.

 

votre image est carré et vous cherchez à la faire rentrer dans un espace rectangulaire (paysage) donc automatiquement Prestashop rajoute du blanc des 2 côté ce qui vous donne l'impression que votre carré noir est centré, mais en fin de compte pas du tout c'est juste que vous affichez une image carré dans un espace rectangulaire.

 

Dans un premier temps, modifiez la configuration de ce format d'image pour le mettre carré et regardez ce que cela fera.

Link to comment
Share on other sites

 

Dans un premier temps, modifiez la configuration de ce format d'image pour le mettre carré et regardez ce que cela fera.

 

??

 

Mais je comprend le reste, reste que mes images sont pas en 870 paysage, et si cela serait le cas, alors cela serait parfait pour cette zone, mais dans la catégorie (photos d'items), mon image serait rectangulaire, donc tres mini en hauteur car serait dans une espace carré.

Link to comment
Share on other sites

?????

 

punaise je ne dois pas parler français.

 

vous voulez mettre des images rectangulaire ou carré ??????

 

si c’est carré alors modifiez la configuration du format d'image qui est rectangulaire pour le transformer en carré et si c'est carrée transformé le format rectangulaire pour le mettre en carré.

 

dans le menu images vous pouvez configurer les format de ces images donc à vous de l'adapter à vos besoins et après de modifier le design CSS pour le placer comme vous le désirez sur votre template.

 

cela ne fait que 18 fois que j'explique exactement la même chose et de 187 manières différentes.

 

si vous ne comprenez toujours pas il vous suffit de lire la documentation officielle de prestashop sur la configuration des images.

Link to comment
Share on other sites

Votre image est un gros carré noir.

 

votre format configuré dans prestashop est un rectangle donc prestashop rajoute AUTOMATIQUEMENT du blanc autour du gros carré noir pour atteindre la dimension du rectangle CONFIGURE dans votre prestashop.

 

Donc, si vous voulez que le gros carré noir reste un gros carré noir il suffit de le configurer comme vous le voulez et non prestashop ne pourra pas deviner tout seul ce que vous vous voulez.

 

Donc rendez vous dans la configuration des images dans un joli menu nommé PREFERENCES > IMAGES (ils auraient pu compliquer mais non) puis cherchez le format d'image à modifier du genre category_default qui doit être du style

dTwvlnw.jpg

 

Puis vous faites un conf du genre

YkyKWNl.jpg

et vous n'oubliez pas, après avoir enregistré cette nouvelle configuration de générer les miniatures à cette nouvelle dimension

It9GP0O.jpg

à ce moment là, et seulement à ce moment là, vous devriez avoir une image carré noir placé quelque part dans l'espace dédié à cette image sur votre site. Il faudra alors modifier les CSS pour placer cette image au bon endroit.

Link to comment
Share on other sites

Bonjour,

 

J'ai bien compris. La même image est utilisée dans deux formats différents. Et c'est justement le problème car comme je le dis dans le 2ème post je souhaiterais intégrer deux images différentes => Voir photos en PJ

 

2-thickbox_default.jpg?live_configurator3-thickbox_default.jpg?live_configurator

Link to comment
Share on other sites

Donc le principe de scène pourrait permettre cela.

 

Pour les utilisateurs de 1.6 appliquez la procédure décrite ici http://doc.prestashop.com/pages/viewpage.action?pageId=20840720 pour activer cette fonctionnalité.

 

 

Si vous avez installé PrestaShop 1.6 et que vous souhaitez malgré tout utiliser les scènes, voici comment faire :

  1. Ouvrez la page Administration > Menus.
  2. Cliquez sur "Ajouter un menu".
  3. Dans le formulaire, donnez un nom à la page (a priori, "Scènes"), et saisissez "AdminScenes" dans le champ "Classe". Laissez le champ "Module" vide, et choisissez "Catalogue" comme page parente.
  4. Validez. La page des scènes apparaîtra dans la page choisie.

 

après il faut modifier son template pour ne pas afficher l'image de la catégorie :

#category .content_scene_cat_bg{display:none}
Link to comment
Share on other sites

Je crois que j'avance a grand pas.

 

Me reste a modifier le template

 

Ou je peut modifier? Son nom de fichier et la ligne a modifier.

 

Merci, pas facile mais avec de l'aide et de la patience, ont avance :)

Link to comment
Share on other sites

aiieeee ooooo ne parté pas tous, je suis a 2 doigts de la réussite.

 

cela fonctionne pour la catégorie mais pas la sous catégorie, p-e a cause que mon fichier template est pas modifier.

mais le probleme, il en a des centaine de fichier . tpl et j'ignore lequel modifier :(

Link to comment
Share on other sites

  • 3 months later...

Bonjour,

Etonnant dialogue de sourd :)

Je pense qu'effectivement il y a un problème de conception car la même image doit servir à un affichage carré et rectangulaire ...

Je commence prestashop, je n'ai pas bcp d'ambitions .. mais ce genre d'incohérences en rendent très difficule l'utilisation dans le "monde réél" ...

Cependant pas de panique, car il semble facilement possible d'utiliser des images différentes pour la sous catégorie quand elle apparait dans la page de la catégorie parente .. et pour la catégorie lorsque la sous catégorie est du coup sélectionnée ...

Je pars du principe que tout le monde sais modifier les tpl et les css (j'ai commencé la semaine dernière et j'y arrive ...) .... mais vous pouvez :

- Utiliser en standard l'image de la catégorie en mode carré dans le champs image d'une catégorie

- Utiliser le module de stockage et d'insertion d'image de la zone de texte riche "description" de la catégorie (dernière petite icone) pour stocker + sélectionner l'image directement dans la zone html (mettez votre image rectangulaire) ..

- Bidouiller le tpl pour ne plus afficher l'image de la catégorie dans la page catégorie (ou le faire en css)

- Bidouiller le css pour remettre l'image e la zone html au bon endroit si vous voulez la mettre sous le texte ou à droite etc etc

Ca me parait une bonne solution de contournement ? ... car de toute facon il faut refaire la moitié des tpl et des css

AB

  • Like 1
Link to comment
Share on other sites

  • 1 month later...

Bonjour,

Etonnant dialogue de sourd :)

Je pense qu'effectivement il y a un problème de conception car la même image doit servir à un affichage carré et rectangulaire ...

Je commence prestashop, je n'ai pas bcp d'ambitions .. mais ce genre d'incohérences en rendent très difficule l'utilisation dans le "monde réél" ...

Cependant pas de panique, car il semble facilement possible d'utiliser des images différentes pour la sous catégorie quand elle apparait dans la page de la catégorie parente .. et pour la catégorie lorsque la sous catégorie est du coup sélectionnée ...

Je pars du principe que tout le monde sais modifier les tpl et les css (j'ai commencé la semaine dernière et j'y arrive ...) .... mais vous pouvez :

- Utiliser en standard l'image de la catégorie en mode carré dans le champs image d'une catégorie

- Utiliser le module de stockage et d'insertion d'image de la zone de texte riche "description" de la catégorie (dernière petite icone) pour stocker + sélectionner l'image directement dans la zone html (mettez votre image rectangulaire) ..

- Bidouiller le tpl pour ne plus afficher l'image de la catégorie dans la page catégorie (ou le faire en css)

- Bidouiller le css pour remettre l'image e la zone html au bon endroit si vous voulez la mettre sous le texte ou à droite etc etc

Ca me parait une bonne solution de contournement ? ... car de toute facon il faut refaire la moitié des tpl et des css

AB

Quelqu'un pourrait t'il détailler les actions à réaliser pour ceux qui ne maitrisent pas les .css et .tpl sur le bout des doigts?

Link to comment
Share on other sites

  • 1 year later...

Je suis bien d'accord avec le souci rencontré par Optimo, c'est un vrai souci de devoir utiliser la même image de catégorie pour la miniature carrée et pour l'image de catégorie rectangulaire (avec le thème bootstrap par défaut, en tout cas).

Il faudrait soit les dissocier, soit leur donner le moyen d'être du même format carré ou rectangulaire que ce soit en miniature ou en page de catégorie.

Link to comment
Share on other sites

Salut,

Sinon ce qu'on peut faire c'est un override de la classe ImageManager.php afin que prestashop nous "crop" les images au lieu de les redimensionner en gardant le ratio... il suffit de créer un nouveau preset (ou modifier l'ncien) avec un _btt

 

exemple: home_default_btt

ensuite dans le tpl, la ou est appellée l'image on fait le remplacement.

 

Voici l'override de la fonction:

<?php
  
// Usage:
// Replace the contents of: 
// /overrides/classes/ImageManager.php
// With this document. Then just add a new image size in the Backoffice :
// Preferences -> Images -> Add New
// AND name it whatever_btt (attach '_btt' at the end of the name string)
// THEN just use this image size where you want 
  
// CAUTION! Check if you're using the same version of Prestashop as we do: 1.5.2
// (should work in all 1.5.xs though but we never checked 
  
// Good luck - Bazinga Designs
// http://www.bazingadesigns.com/en
  
class ImageManager extends ImageManagerCore
{
  
    /**
     * Resize, cut and optimize image
     *
     * Zoom & Croop when the destination file name
     * contains the '_timthumb' phrase
     * - Modified by www.bazingadesigns.com/en
     * (TimThumb ZoomCrop port)
     *
     * @param string $src_file Image object from $_FILE
     * @param string $dst_file Destination filename
     * @param integer $dst_width Desired width (optional)
     * @param integer $dst_height Desired height (optional)
     * @param string $file_type
     * @return boolean Operation result
     */
    public static function resize($src_file, $dst_file, $dst_width = null, $dst_height = null, $file_type = 'jpg', $force_type = false)
    {
        if (!file_exists($src_file))
            return false;
        list($src_width, $src_height, $type) = getimagesize($src_file);
  
        // If PS_IMAGE_QUALITY is activated, the generated image will be a PNG with .jpg as a file extension.
        // This allow for higher quality and for transparency. JPG source files will also benefit from a higher quality
        // because JPG reencoding by GD, even with max quality setting, degrades the image.
        if (Configuration::get('PS_IMAGE_QUALITY') == 'png_all'
            || (Configuration::get('PS_IMAGE_QUALITY') == 'png' && $type == IMAGETYPE_PNG) && !$force_type)
            $file_type = 'png';
          
        if (strpos($dst_file, '_btt')!==FALSE)

            $zoomCrop = true;

        else

            $zoomCrop = false;
  
        if (!$src_width)
            return false;
  
        if ($zoomCrop == true) {
  
            if (!$dst_width) $dst_width = 0;
            if (!$dst_height) $dst_height = 0;
  
        } else {
  
            if (!$dst_width)
                $dst_width = $src_width;
            if (!$dst_height)
                $dst_height = $src_height;
        }   
  
  
        $src_image = ImageManager::create($type, $src_file);
  
        $width_diff = $dst_width / $src_width;
        $height_diff = $dst_height / $src_height;
  
        if ($zoomCrop==true) {
           
            if ($dst_width>0 && $dst_height<1) {
                $dst_height = floor ($src_height * ($dst_width / $src_width));
            } else if ($dst_height>0 && $dst_width<1) {
                $dst_width = floor ($src_width * ($dst_height / $src_height));
            }
                   
            $src_x = $src_y = 0;
            $src_w = $src_width;
            $src_h = $src_height;
              
            $cmp_x = $src_width / $dst_width;
            $cmp_y = $src_height / $dst_height;
              
            if ($cmp_x > $cmp_y) {
              
                $src_w = round (($src_width / $cmp_x * $cmp_y));
                $src_x = round (($src_width - ($src_width / $cmp_x * $cmp_y)) / 2);
              
            } else if ($cmp_y > $cmp_x) {
              
                $src_h = round (($src_height / $cmp_y * $cmp_x));
                $src_y = round (($src_height - ($src_height / $cmp_y * $cmp_x)) / 2);
              
            }
                          
        }
  
        else if ($width_diff > 1 && $height_diff > 1)
        {
            $next_width = $src_width;
            $next_height = $src_height;
        }
        else
        {
            if (Configuration::get('PS_IMAGE_GENERATION_METHOD') == 2 || (!Configuration::get('PS_IMAGE_GENERATION_METHOD') && $width_diff > $height_diff))
            {
                $next_height = $dst_height;
                $next_width = round(($src_width * $next_height) / $src_height);
                $dst_width = (int)(!Configuration::get('PS_IMAGE_GENERATION_METHOD') ? $dst_width : $next_width);
            }
            else
            {
                $next_width = $dst_width;
                $next_height = round($src_height * $dst_width / $src_width);
                $dst_height = (int)(!Configuration::get('PS_IMAGE_GENERATION_METHOD') ? $dst_height : $next_height);
            }
        }
  
        $dest_image = imagecreatetruecolor($dst_width, $dst_height);
  
        // If image is a PNG and the output is PNG, fill with transparency. Else fill with white background.
        if ($file_type == 'png' && $type == IMAGETYPE_PNG)
        {
            imagealphablending($dest_image, false);
            imagesavealpha($dest_image, true);
            $transparent = imagecolorallocatealpha($dest_image, 255, 255, 255, 127);
            imagefilledrectangle($dest_image, 0, 0, $dst_width, $dst_height, $transparent);
        }
        else
        {
            $white = imagecolorallocate($dest_image, 255, 255, 255);
            imagefilledrectangle ($dest_image, 0, 0, $dst_width, $dst_height, $white);
        }
  
        if ($zoomCrop==true)            
            imagecopyresampled($dest_image, $src_image, 0, 0, $src_x, $src_y, $dst_width, $dst_height, $src_w, $src_h);
        else
            imagecopyresampled($dest_image, $src_image, (int)(($dst_width - $next_width) / 2), (int)(($dst_height - $next_height) / 2), 0, 0, $next_width, $next_height, $src_width, $src_height);
          
        return (ImageManager::write($file_type, $dest_image, $dst_file));
    }
  
}

Link to comment
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
×
×
  • Create New...