Configuration

Thème

Cette section permet de choisir le thème graphique utilisé par PrestaBlog.

Lors d'une nouvelle installation, aucun réglage particulier n'est nécessaire. Le thème par défaut Grid & Slide est celui recommandé. Il s'agit du template le plus récent, intégrant les dernières évolutions de design avec nottament l'utilisation de slide pour de nombreux éléments du blog (block, accueil, etc.).

Le thème Grid for 1.7 correspond à un ancien design. Il reste cependant totalement compatible avec PrestaShop 8 et PrestaShop 9 et les nouvelles options proposés sur Prestablog.

La partie droite de l'écran permet de sélectionner le layout du thème. Il suffit de cliquer sur le layout souhaité pour l'appliquer. Les options proposées agissent uniquement sur la mise en page visuelle de l'ensemble du blog et peuvent être modifiées à tout moment sans impact sur les données ou sur le reste du shop.

Accueil du blog

Cette section regroupe les réglages liés à la page d'accueil du blog PrestaBlog.

La première partie concerne la configuration générale de l'accueil. Il est possible de définir la meta title, la meta description et le titre H1. L'ensemble de ces champs est configurable pour chaque langue, ce qui permet d'adapter correctement le contenu et le référencement selon la langue du site. Il est également possible d'activer ou non l'affichage du slideshow.

URL de l'accueil du blog

Une seconde partie permet de configurer l'URL de l'accueil du blog. Cette URL peut être personnalisée librement. Vous devez utiliser uniquement des caractères simples, sans accents, sans espaces, sans guillemets ni caractères spéciaux.

Pop-up PrestaBlog

L'activation du système de pop-up PrestaBlog se fait depuis cette page ou sur la page de configuration globale. Vous pourrez ainsi, activer ou désactiver le système de pop-up. Lorsque la pop-up n'est pas utilisée, il est conseillé de la désactiver afin d'éviter le chargement de scripts inutiles sur les pages du blog. Cela permet d'alléger le chargement et d'optimiser les performances.

Si la pop-up est activée, il est possible de choisir si elle s'affiche sur l'accueil du blog et de sélectionner la pop-up à afficher. Il faudra au préalable avoir créé une pop-up via la page de gestion des popups.

Articles en home page

Cette section est un raccourci vers la liste personnalisée. Vous pouvez ainsi ajouter une section sur la home page qui affiche les articles d'accueil. Vous la retrouverez directement dans l'onglet configuration > accueil du blog

• Ajoutez un titre (par exemple : "Nos dernières actualités"). Il s'affichera au-dessus de la liste.
• Pour garder l'homogénéité, évitez des titres ou descriptions trop grands, afin de limiter les duplications de contenu.
• Choisissez les catégories à afficher, avec une option d'affichage aléatoire.

Si vous souhaitez changer la disposition de ce bloc par rapport à un autre, rendez-vous dans la gestion des positions de PrestaShop dans Apparence > Positions. Recherchez le hook displayHome, repérez PrestaBlog, et déplacez-le en glissant-déposant le bloc dans la position souhaitée.

Configuration globale

Configuration des URLs (rewrite)

Cette partie permet de gérer la structure des URLs du blog.

Il est possible d'activer ou non les URLs simplifiées. Dans la majorité des cas, cette option est activée, à condition que le serveur autorise la réécriture d'URLs.

Une fois les URLs simplifiées activées, une option supplémentaire apparaît permettant de supprimer les IDs numériques dans les URLs des articles. Cette option n'est disponible que si le rewrite est actif.

Après suppression des IDs et validation de la configuration, une autre option devient disponible pour ajouter le suffixe .html aux URLs. Il n'est pas possible d'activer le .html si les IDs numériques sont encore présents dans les URLs.

Configuration du front office

Cette partie concerne l'affichage du blog côté visiteurs. Les options disponibles sont les suivantes :

• Montrer le fil d'Ariane sur les pages du blog : affiche ou masque le fil d'Ariane (breadcrumb) sur les pages du blog.
• Afficher le lien blog en haut du site : affiche le lien du blog dans la barre de navigation supérieure (voir le détail ci-dessous).
• Voir la miniature dans l'article : affiche ou masque l'image miniature à l'intérieur de l'article.
• Afficher la navigation précédent / suivant sur les pages d'article : ajoute des liens vers l'article précédent ou suivant en bas des pages d'article.
• Afficher les dates avec le nom du mois : affiche les dates au format « 20 mars 2020 » plutôt que « 20/03/2020 ».
• Notes des articles : affiche ou masque les notes des articles.
• Activation globale du système de popup : active ou désactive le système de pop-up sur le blog. S'il n'est pas utilisé, il est recommandé de le désactiver afin d'éviter le chargement de scripts inutiles.
• Flux RSS pour les catégories : affiche le lien vers le flux RSS des catégories en haut de la page d'articles.
• Ajouter Material Icons dans le header : utile pour certains thèmes qui n'intègrent pas correctement la librairie Material Icons. Sans cette option, les icônes n'apparaissent pas sur le blog et laissent apparaître leur nom sous forme de texte à la place (voir l'exemple ci-dessous).

Suppression du lien Blog dans le menu du haut

Une option permet d'afficher ou non le lien « Blog » dans la barre de navigation supérieure du site. Par défaut, si cette option n'a jamais été enregistrée (par exemple après une mise à jour), le lien est affiché.

Associations produits et articles

Cette partie regroupe les options d'affichage croisé entre les articles du blog et les produits de la boutique. Elle permet de relier votre contenu éditorial et votre catalogue afin de renforcer le maillage interne et le SEO.

Mode card slider

Un mode d'affichage « card slider » premium (style SaaS / magazine) peut être activé pour présenter les articles associés sous forme de carrousel de cartes, sur les pages produits comme sur les pages articles. Un délai de défilement automatique du slider peut être défini en millisecondes (0 = désactivé, par exemple 5000 = 5 secondes).

Sur la page produit

• ajouter un onglet listant les articles de blog associés sur la page produit
• définir le nombre maximal d'articles associés affichés sur cette page

Cela permet notamment de mettre en place des stratégies SEO où le blog fait des liens vers les produits, sans afficher systématiquement de liens retour depuis les pages produits vers le blog.

Sur la page catégorie produit

• afficher ou non les articles du blog sur les pages catégories produits

Cette option constitue l'interrupteur global. Elle fonctionne conjointement avec l'association définie côté article : lors de l'édition d'un article, vous pouvez associer une catégorie de produits entière (voir Association de produits et d'articles). Tous les produits de cette catégorie, y compris ceux ajoutés par la suite, sont alors reliés automatiquement à l'article, sans avoir à les associer un par un. Une case permet en outre d'afficher le lien vers l'article directement sur la page catégorie. Ainsi, chaque nouvel article correctement catégorisé apparaît automatiquement au bon endroit.

Sur la page de l'article

• le nombre maximal d'articles associés affichés
• l'ordre d'affichage des articles associés (par exemple, les plus récents d'abord)
• le nombre maximal de produits associés affichés
• le délai de défilement automatique du slider de produits (en millisecondes, 0 = désactivé)
• l'ordre d'affichage des produits associés
• la largeur de la miniature dans la liste des produits (en pixels)

Il est recommandé de limiter le nombre d'articles et de produits associés afin d'éviter des problèmes de performance.

Boutons de partage

Cette section permet d'activer ou non l'affichage des boutons de partage sur les articles du blog.

Il est possible de choisir précisément quels réseaux sociaux doivent être affichés.
Si vous souhaitez modifier leur couleur, rendez-vous dans configuration > design > boutons de partage. (voir la section design)

Configuration globale de l'administration

Cette dernière partie concerne uniquement le back-office.

Elle permet de définir :

• le nombre de caractères requis pour les champs de recherche lors de l'association de produits ou d'articles
• le nombre de résultats affichés par page pour ces recherches
• le nombre d'éléments affichés par page dans les listes d'articles et de commentaires
• l'affichage automatique ou non des commentaires dans l'édition d'un article

Ces réglages sont destinés à affiner le confort d'utilisation de l'administration. Ils n'ont pas d'impact sur le front office et ne nécessitent généralement pas de modification particulière.

Configuration des Blocks

Les blocs PrestaBlog s'affichent dans les colonnes gauche ou droite du thème, lorsque celles-ci sont présentes. Leur position dépend directement de la structure du thème utilisé.

Le placement des blocs se fait par glisser-déposer. Cette action n'est possible que si le thème dispose réellement de colonnes. Si le thème ne prévoit pas de colonne, les blocs ne pourront pas s'y afficher, même s'ils sont activés.
Ce comportement dépend uniquement du thème et non du module.

Bloc de recherche d'articles

Ce bloc permet d'activer ou de désactiver la recherche d'articles du blog.
Il est possible de choisir entre une recherche simple affichant directement les articles, ou une recherche avancée avec filtres.

Une option permet également d'afficher ou non l'icône de recherche dans le menu.

Bloc des derniers articles

Ce bloc affiche les derniers articles du blog.
Plusieurs options de présentation sont disponibles, notamment l'affichage de l'introduction ou des miniatures. Le rendu dépend du design choisi.

Il est conseillé de tester visuellement les différentes options afin d'adapter l'affichage au thème utilisé.

Articles par date

Ce bloc permet d'afficher les articles par date, sous forme d'archives.
Il est peu utilisé dans la majorité des configurations, mais reste disponible pour les sites souhaitant proposer une navigation chronologique.

Dernières actualités en pied de page

Ce bloc permet d'afficher des articles récents dans le footer du site.
Il est possible d'afficher uniquement les titres ou d'y ajouter des miniatures et du texte.

Pour des raisons de lisibilité et de SEO, il est généralement recommandé de se limiter à l'affichage des titres.

Bloc RSS

Ce bloc permet d'afficher un lien vers le flux RSS du blog.
Il est destiné aux utilisateurs souhaitant proposer un accès direct au flux, sans configuration particulière.

Masquer les blocs sur certaines pages

Par défaut, les blocs PrestaBlog (colonne gauche, colonne droite) s'affichent sur toutes les pages de votre boutique. Si vous souhaitez les afficher uniquement sur les pages du blog, vous pouvez ajouter des exceptions de position pour exclure les pages où le bloc ne doit pas apparaître.

Marche à suivre :

1. Depuis l'administration de PrestaBlog, cliquez sur le bouton "Points d'accroche" situé en haut à droite de l'écran. Cela vous redirige vers la page de gestion des positions de PrestaShop.

2. Recherchez la position "displayLeftColumn" (colonne gauche) ou "displayRightColumn" (colonne droite), puis cliquez sur l'icône Modifier (crayon) à côté du module PrestaBlog.

3. Dans la section Exceptions, sélectionnez dans la liste les pages sur lesquelles le bloc ne doit pas s'afficher. Vous pouvez sélectionner plusieurs pages d'un coup en maintenant la touche Ctrl enfoncée tout en cliquant, ou sélectionner une plage de pages consécutives avec Shift + clic.

4. Enregistrez pour appliquer les modifications.

Déplacer vos blocks par rapport aux autres blocks PrestaShop

Chaque block PrestaBlog est associé à un hook PrestaShop qui détermine son emplacement sur la page : la liste personnalisée de la page d'accueil utilise le hook displayHome, tandis que les blocks de colonne utilisent displayLeftColumn ou displayRightColumn selon leur position.

Si vous souhaitez modifier l'ordre d'affichage d'un block PrestaBlog par rapport aux autres blocks PrestaShop (par exemple, placer les actualités au-dessus d'un carrousel sur la page d'accueil), vous pouvez le faire via l'outil de gestion des points d'accroche :

1. Depuis l'administration de PrestaBlog, cliquez sur le bouton "Points d'accroche" en haut à droite de l'écran, ou rendez-vous directement dans Apparence > Positions depuis le menu PrestaShop.
2. Recherchez le hook concerné (displayHome, displayLeftColumn, displayRightColumn…).
3. Repérez le module PrestaBlog dans la liste, puis glissez-déposez le block à la position souhaitée.

Catégories

La configuration des catégories est vraiment le cœur du design du blog. C'est à cet endroit que l'on génère le design que l'on souhaite représenter.

Design carte ou listing classique

Tout en haut des réglages, l'option Design carte détermine la manière dont les articles sont présentés dans la liste d'une catégorie. Elle est activée par défaut sur PrestaBlog car elle correspond au rendu le plus moderne et le plus attractif pour la majorité des blogs.

Avec le design carte (option activée), chaque article prend la forme d'une carte où l'image occupe l'essentiel de l'espace, le titre venant se superposer par-dessus. L'extrait de description n'est pas affiché. Ce rendu épuré et visuel présente plusieurs avantages :

• un affichage plus compact et homogène, où toutes les cartes ont la même hauteur, quel que soit le contenu ;
• une mise en avant de l'image, idéale pour les blogs où le visuel porte le message (photographie, lifestyle, produits, voyages, inspiration, galerie…) ;
• un rendu moderne, de type magazine, qui incite au clic et laisse respirer la page ;
• davantage d'articles visibles d'un seul coup d'œil, sans blocs de texte qui alourdissent la lecture.

Avec le listing classique (option désactivée), l'article affiche l'image, le titre, puis un extrait de sa description sous celui-ci, accompagné de ses informations (date, auteur, catégories…). Ce format reste pertinent dans plusieurs cas :

• pour un blog éditorial ou informatif (tutoriels, actualités, articles de fond) où le texte compte autant que l'image ;
• pour donner du contexte avant le clic et aider le lecteur à choisir l'article qui l'intéresse ;
• pour renforcer le référencement, l'extrait ajoutant du contenu textuel et des mots-clés sur la page de catégorie.

En résumé, le design carte privilégie l'impact visuel et un rendu moderne, tandis que le listing classique privilégie le texte et le contexte. Le choix dépend avant tout de la nature de votre blog. Vous pouvez retrouver ces deux rendus, ainsi que leurs déclinaisons en 1, 2 ou 3 colonnes, sur notre page de démonstration.

Cette option se définit globalement, mais peut ensuite être ajustée à plusieurs niveaux :

• pour une catégorie spécifique, en remplaçant les paramètres globaux (voir Personnaliser une catégorie) ;
• pour les listes personnalisées ;
• dans les options de produits associés et d'articles associés.

Au-delà du choix carte / listing classique, vous pouvez affiner précisément les éléments affichés dans chaque rendu (date, auteur, notes, catégories, nombre de commentaires ou de vues…) grâce aux réglages détaillés plus bas dans la section Paramètres d'affichage des listes d'articles.

Réglages principaux dans la liste des catégories

On choisit le nombre d'articles par page. Si l'affichage est en 2 ou 4 colonnes, un nombre pair est conseillé. Avec 3 colonnes, un nombre impair est préférable.

La largeur et la hauteur de la miniature d'article sont configurées par défaut en 800x600, mais il est possible de modifier ces dimensions selon les proportions souhaitées.

La longueur du titre et la taille de la description permettent de définir combien de caractères sont affichés. Si une valeur est mise à 0, l'élément concerné n'est plus affiché.

L'affichage des articles peut être réglé en 1, 2, 3 ou 4 colonnes, ou en mode full picture pour mettre en avant de grandes images.

Il est aussi possible d'afficher ou non le nombre d'articles de chaque catégorie.

Paramètres d'affichage des listes d'articles

Ces options permettent de choisir quels éléments sont affichés dans les listes d'articles : date de publication, noms des catégories, notes, auteur, lien lire l'article, nombre de commentaires, nombre de vues.

Une option permet de propager ce design aux listes personnalisées et aux articles associés. Si elle est activée, les paramètres d'affichage sélectionnés seront appliqués aux articles associés et aux listes d'articles personnalisées.

Personnaliser une catégorie

Il est possible de définir un affichage différent pour une catégorie spécifique, en remplaçant les paramètres d'affichage globaux.

Pour cela, il suffit d'activer l'option Remplacer les paramètres d'affichage globaux de la catégorie dans la catégorie concernée. Les options désactivées continueront d'utiliser la configuration globale.

Cela permet d'afficher certaines catégories différemment. Par exemple, il est possible de mettre une catégorie en mode galerie en ne gardant que l'image, ou de créer des pages avec une présentation spécifique selon le type de contenu (témoignages, auteurs, etc.).

Bloc des catégories

Cette section permet de configurer l'affichage du bloc des catégories du blog.

Il est possible d'activer ou de désactiver complètement le bloc. Lorsqu'il est actif, plusieurs options permettent d'ajuster précisément son comportement et son affichage.

On peut choisir d'afficher ou non les catégories vides. Lorsque cette option est désactivée, le nombre d'éléments affichés prend en compte les catégories enfants de manière récursive.

L'arborescence des catégories peut être affichée ou masquée. Il est également possible d'afficher les miniatures des catégories et, si nécessaire, une partie de leur description.

La longueur du titre et la taille de la description permettent de limiter le nombre de caractères affichés. Comme pour les autres réglages du module, une valeur trop élevée peut alourdir l'affichage, tandis qu'une valeur réduite permet un rendu plus compact.

Une option permet d'afficher un lien vers l'ensemble des articles de la catégorie. Le flux RSS peut également être activé. Cette option ne concerne que la catégorie sélectionnée.

Menu catégories dans les pages du blog

Cette section permet de gérer l'affichage du menu des catégories sur l'ensemble des pages du blog.

Vous pouvez activer ou désactiver le menu selon le contexte :

• page d'accueil du blog
• listes d'articles
• pages d'articles

Il est également possible :

• d'afficher un lien direct vers la page principale du blog
• d'afficher ce lien sous forme d'image
• de masquer les catégories vides
• d'afficher ou non le nombre d'articles par catégorie

Les catégories enfants sont affichées sous forme de menu déroulant, pour une navigation claire et structurée.

Haut de la première page d'une catégorie

Cette section permet de définir l'affichage du contenu en haut de la première page d'une catégorie, avant la liste des articles.

Il est possible d'afficher ou non la description de la catégorie. Cette option permet de mettre en avant un texte introductif, utile notamment pour le référencement et la contextualisation du contenu.

L'affichage de la miniature de la catégorie peut être activé ou désactivé. Cette miniature correspond à une image de taille réduite, généralement utilisée lorsque l'on souhaite un affichage discret.

Une autre option permet d'afficher une image large en haut de la page de catégorie. Cette image est destinée à un rendu plus visuel et plus impactant, par exemple pour mettre en avant une catégorie principale ou un univers spécifique.

Les dimensions des images sont entièrement paramétrables. Il est possible de définir séparément la largeur et la hauteur de la miniature de la catégorie, ainsi que la largeur et la hauteur de la grande image de la catégorie.

Ces réglages permettent d'adapter précisément l'affichage au design du thème utilisé et d'assurer une cohérence visuelle entre les différentes pages de catégories.

Commentaires

PrestaBlog propose deux systèmes de commentaires, mais ils ne sont pas équivalents.

Le système de commentaires classiques PrestaBlog est le plus adapté à une utilisation durable :

• les commentaires sont stockés dans la base de données du site
• ils sont conservés lors des migrations
• ils sont gérables directement depuis l'administration PrestaBlog
• l'administrateur peut répondre aux commentaires depuis le back-office

Un second système, basé sur les commentaires Facebook, est également disponible. Il repose sur un service externe et ne permet aucune gestion directe des commentaires depuis PrestaBlog.

Commentaires classiques

Les commentaires classiques sont le système natif de PrestaBlog. Ils sont entièrement gérables depuis le back-office et permettent à l'auteur de répondre aux commentaires en tant qu'auteur.

Validation des commentaires : L'option « Approuver automatiquement les commentaires » est fortement déconseillée.

• les commentaires sont publiés immédiatement sans contrôle
• le risque de spam ou de contenu indésirable est plus élevé

Il est recommandé de conserver une validation manuelle des commentaires.

Protection antispam et captcha

PrestaBlog propose deux mécanismes de protection contre le spam.

Google reCAPTCHA v2

PrestaBlog est compatible avec Google reCAPTCHA v2. Si vous disposez déjà d'une clé reCAPTCHA v2 existante, vous pouvez l'utiliser.

• renseigner la clé publique captcha Google
• renseigner la clé privée captcha Google

Antispam PrestaBlog (recommandé)

Un système antispam natif est disponible via Outils > Antispam.

• le système repose sur des questions simples
• la question affichée est choisie de manière aléatoire
• aucune dépendance à un service externe
• aucune clé à configurer

Commentaires Facebook

PrestaBlog permet d'utiliser les commentaires Facebook à la place des commentaires classiques. Nous déconseillons cependant son utilisation qui reste propriétaire et n'apparaît que pour les utilisateurs connectés de Facebook (en raison de la loi RGPD).

Les commentaires ne sont ni stockés ni gérés dans PrestaBlog, vous n'avez pas non plus la possibilité de répondre depuis le blog. Ce système ne sera plus mis à jour par notre équipe.

Mise en place :

• activer les commentaires Facebook dans la configuration
• créer une application Facebook dédiée aux commentaires
• renseigner l'API Facebook ID dans le champ prévu
• ajouter éventuellement des modérateurs Facebook

Design

Dans PrestaBlog, la personnalisation du design est pensée pour être durable et compatible avec les mises à jour du module.

Il est fortement recommandé d'utiliser les options de configuration prévues à cet effet plutôt que de modifier ou surcharger directement les templates ou les fichiers CSS. Les overrides de templates compliquent les mises à jour futures, obligent à comparer les fichiers après chaque évolution du module et sont une source fréquente de dysfonctionnements.

La section Configuration > Design permet d'ajuster l'apparence du blog tout en conservant une structure propre et évolutive.

Elle repose principalement sur deux éléments :

• les réglages de couleurs des différents éléments du blog
• les règles CSS personnalisées (CSS custom), qui permettent d'ajouter des styles sans impacter les fichiers du module

Les réglages de couleurs permettent d'affiner visuellement :

• le menu du blog
• la pagination
• les listings de catégories
• les contenus des articles
• les contenus des blocs

Ces réglages concernent uniquement l'aspect visuel (couleurs, arrière-plans, survols) et s'appliquent de manière globale.

Repères visuels

Pour certains éléments plus complexes, PrestaBlog affiche une image explicative à côté des champs de configuration. Ces images servent de repères visuels afin de comprendre rapidement à quelle partie de l'affichage correspond chaque champ de couleur.

• chaque champ de configuration est associé à un numéro
• ce numéro est affiché à côté du champ
• le même numéro apparaît sur l'image de prévisualisation
• le repère visuel permet d'identifier précisément l'élément graphique concerné

Ce système permet d'ajuster le design de manière claire et intuitive, sans modifier le code ni risquer de conflits lors des mises à jour.

CSS custom

PrestaBlog met à disposition un champ CSS custom permettant d'ajouter des règles CSS personnalisées sans modifier les fichiers du module ou du thème.

Les règles ajoutées via ce champ sont conservées lors des mises à jour de PrestaBlog. C'est la méthode recommandée pour effectuer des ajustements CSS spécifiques au blog.

Personnaliser l'affichage des catégories

L'apparence de vos catégories peut être ajustée à deux niveaux distincts, ce qui offre une grande souplesse selon que vous souhaitez une cohérence globale ou une mise en scène spécifique pour chaque catégorie.

Options globales dans la configuration

La section Paramètres d'affichage des listes d'articles regroupe l'ensemble des réglages qui s'appliquent à toutes vos catégories par défaut : nombre d'articles par page, affichage de l'image de couverture, du résumé, de la date, de l'auteur, etc. C'est le point de départ logique pour définir une charte d'affichage cohérente sur l'ensemble de votre blog.

Personnalisation par catégorie

Pour aller plus loin, chaque catégorie dispose de ses propres options d'affichage, accessibles directement depuis la création ou l'édition d'une catégorie. Vous pouvez ainsi, catégorie par catégorie, surcharger les paramètres globaux : choisir une mise en page différente, afficher ou masquer certains éléments, ou encore définir une image de couverture spécifique.

Ce fonctionnement en deux niveaux, global puis local, vous permet de gérer efficacement un blog avec de nombreuses catégories aux identités visuelles distinctes.

Et pour le thème ?

L'affichage du blog est également conditionné par la disposition choisie dans les paramètres du thème : nombre de colonnes, largeur du contenu, présence d'une sidebar… Ces réglages interagissent directement avec l'apparence de vos catégories. Pensez à les consulter si vous cherchez à ajuster la structure générale de votre blog.

Taille des images

Cette section regroupe l'ensemble des paramètres liés aux images utilisées par PrestaBlog.

Vous y trouverez les réglages concernant :

• les images des articles
• les images des catégories
• les images du diaporama
• les images des produits associés
• les images des auteurs

Ces paramètres définissent les dimensions et les formats utilisés lors de l'envoi de nouvelles images.

Pour mettre à jour les images déjà publiées en fonction de nouveaux réglages, un outil complémentaire est disponible dans Outils > Régénérer les images.

La configuration des tailles d'images et l'outil de régénération fonctionnent ensemble : il est recommandé de définir ces réglages dès l'installation du blog, ou de régénérer les images si des ajustements sont effectués sur un blog existant.

Comment repérer la largeur d'une image

Lors de la configuration des tailles d'images, il est important de connaître la largeur réellement utilisée par votre thème dans le listing du blog.

La manipulation suivante permet d'obtenir cette information facilement, directement depuis le front-office :

1. Allez sur la page d'accueil de votre blog, là où s'affiche le listing des articles
2. Prenez le premier article affiché
3. Faites un clic droit sur le titre de cet article
4. Cliquez sur « Inspecter »

L'outil de développement s'ouvre et sélectionne généralement le titre de l'article. Dans le code, repérez le bloc situé juste au-dessus du titre, qui englobe l'image. Ce bloc est identifié par class="block_top".

Survolez ce bloc dans l'outil de développement. Le navigateur affiche alors directement les dimensions du bloc en pixels à l'écran. La largeur affichée correspond à la largeur de base utilisée pour l'image dans le listing.

Prendre en compte le zoom au survol

Certains thèmes appliquent un effet de zoom au survol des images dans les listings.

La dimension mesurée correspond à la taille d'affichage initiale. Lors du survol, l'image est agrandie. Pour conserver une image nette et éviter toute pixellisation, il est recommandé d'utiliser une image plus grande en respectant les proportions.

Par exemple, si la largeur mesurée est de 400 pixels :

• multiplier par 1.5 donne 600 pixels
• multiplier par 2 donne 800 pixels

Cette méthode permet de conserver les proportions de l'image tout en garantissant une bonne qualité, y compris lors du survol.

Retrouver l'URL d'une image

Les images sont stockées dans un sous-dossier du thème PrestaBlog actif. Le chemin dépend du thème utilisé et du type d'image :

Images des articles :

• modules/prestablog/views/img/grid-and-slides/up-img/
• modules/prestablog/views/img/grid-for-1-7/up-img/

Images du diaporama :

• modules/prestablog/views/img/grid-and-slides/slider/
• modules/prestablog/views/img/grid-for-1-7/slider/

Images des auteurs :

• modules/prestablog/views/img/grid-and-slides/author_th/
• modules/prestablog/views/img/grid-for-1-7/author_th/

Exemples d'URLs complètes :

https://votre-boutique.com/modules/prestablog/views/img/grid-and-slides/up-img/thumb_12.webp
https://votre-boutique.com/modules/prestablog/views/img/grid-and-slides/slider/1.jpg
https://votre-boutique.com/modules/prestablog/views/img/grid-and-slides/author_th/1.jpg

Ce chemin est utile à connaître en cas de migration ou de sauvegarde, pour localiser et transférer l'ensemble des images du blog.