Share
Lorsque vous démarrez avec une nouvelle plate-forme, telle que Shopify, il y a beaucoup à apprendre. Bien que Liquid, le modèle de langage utilisé dans les thèmes Shopify, soit très lisible et facile à utiliser, le développement de Shopify est un domaine du développement de Shopify susceptible de semer la confusion images. Je pense que la raison principale en est la compréhension du «type» d’image que vous rencontrez dans un thème Shopify. Au cours de cet article, nous examinerons chaque type d'image et comment les utiliser dans un thème Shopify..
Si vous débutez dans Liquid, ma série en trois parties vous donnera une base solide et vous aidera à suivre. Si vous êtes nouveau sur Shopify, vous pouvez expérimenter ces techniques en utilisant un magasin de développement gratuit. Pour créer un magasin de développement, inscrivez-vous au programme gratuit Shopify Partner.
Cinq étapes simples utilisent des images de thème pour fournir à leur page d'accueil une image de hérosIl existe quatre types d'images dans un thème Shopify. Vous travaillerez avec chacun d'eux sur un thème. Il est donc important de comprendre les différences qui les séparent. Examinons chacun à son tour:
Accentsconagua
les atouts dossier et sont spécifiques à ce thème. Ceux-ci sont généralement ajoutés au thème par un développeur de thème..Il est important de noter que les images de produits, de collections et d'articles sont directement liées au magasin. Si vous changez le thème du magasin, ces images resteront en place et fonctionneront avec tous les thèmes qui y font référence..
Commençons par regarder des images de thème. Lorsque vous créez un thème Shopify, vous pouvez ajouter un nombre illimité d’images, dans n’importe quel format et quelle que soit leur taille. les atouts dossier dans votre répertoire de thème. En règle générale, ces images peuvent être utilisées pour les arrière-plans, les images-objets et les éléments de personnalisation..
Référencer ces images dans un thème est très simple. Supposons que nous avons un logo.png dans notre les atouts dossier; nous pouvons le sortir dans n'importe quel modèle en utilisant la syntaxe Liquid suivante:
'logo.png' | asset_url | img_tag: 'Logo'
Cette approche utilise deux filtres Liquid pour créer un fichier HTML entièrement formé. img élément. La première, asset_url, ajoute le chemin d'accès complet au dossier des actifs pour le thème du magasin actuel. La deuxième, img_tag, prend cela et crée un HTML img élément complet avec alt attribut. Si omis, l'attribut alt sera vide. Voici le résultat final:
Les grands représentent intelligemment leurs chaussures en utilisant des images de produits sur la page d'accueil de leurs magasins. Vous remarquerez que le src L'attribut fait référence au CDN (réseau de distribution de contenu) Shopify. Chaque image que vous ajoutez, quel que soit son type, sera distribuée sur le CDN. Cela permet d'assurer une livraison rapide des images de votre magasin au client..
Contrairement aux fichiers image auto-hébergés, vous n’avez aucun moyen de connaître l’emplacement exact du serveur pour vos fichiers image. Heureusement, vous n'avez pas à vous inquiéter à ce sujet, car Shopify est spécifique asset_url Le filtre liquide vous fournira le chemin lorsque votre page sera rendue.
Résumer le chemin d'accès complet du serveur à un filtre signifie également que vos thèmes sont entièrement transférables d'un magasin à un autre. L'URL correcte est incluse en fonction du thème et du magasin en cours de visualisation.
img ÉlémentDans l'exemple ci-dessus, nous avons ajouté le alt attribut via le img_tag filtre. Il est également possible d’ajouter un paramètre supplémentaire qui vous permet d’ajouter des classes au img élément. Voici notre code refactored:
'logo.png' | asset_url | img_tag: 'Logo', 'cssclass1 cssclass2'
Cela donnerait la sortie suivante:
Il y aura bien sûr des occasions où vous aurez besoin d’un peu plus de contrôle sur votre code HTML. En omettant le img_tag filtrer nous pouvons construire notre balisage comme nous le souhaitons.
Voici une approche qui vous permettrait d’ajouter vos propres attributs tels que identifiant:
Il est également très facile d'utiliser ces ressources dans les fichiers CSS et JavaScript. Pour ce faire, ajoutez .liquide (par exemple. styles.css.liquid) vers un fichier CSS ou JavaScript dans votre les atouts dossier et référence l'image, dans votre fichier CSS, en utilisant le même code que nous avons utilisé ci-dessus:
body background: url ('logo.png' | asset_url) repeat-x en haut à gauche; Les images de thème sont relativement simples. Tant que vous comprenez comment utiliser asset_url vous pouvez choisir d'ajouter ou non le supplément img_tag filtrer ou construire le img élément toi.
Bien que nous ayons un contrôle total sur nos images de thème, nous sommes à la merci des propriétaires de magasin en ce qui concerne les images de produits. Heureusement, Shopify nous aide beaucoup à reprendre ce contrôle. Commençons par regarder ce qui se passe lorsqu'un commerçant télécharge une image dans l'administrateur Shopify..
Image du produit Studio Neat sur la page produit de leur kit Neat Ice Chaque fois qu'une image de produit, de collection ou d'article est téléchargée, Shopify prend cette image et la redimensionne automatiquement en plusieurs tailles prédéfinies. Ces images sont "namespaced" afin que nous puissions facilement les référencer dans nos thèmes.
Voici la liste des tailles avec leurs noms d'image correspondants:
| 16 × 16 | pico |
| 32 × 32 | icône |
| 50 × 50 | pouce |
| 100 × 100 | petit |
| 160 × 160 | compact |
| 240 × 240 | moyen |
| 480 × 480 | grand |
| 600 × 600 | grande |
| 1024 × 1024 | 1024x1024 |
| 2048 × 2048 | 2048x2048 |
| Plus grande image | maîtriser |
Les valeurs ci-dessus spécifient les limites «maximales» d'une taille d'image. Toutes les images redimensionnées garderont leur format et seront redimensionnées en conséquence.
Cela pourrait signifier qu'une image «moyenne» a une largeur de 240 pixels mais une hauteur de seulement 190 pixels et une hauteur de 240 pixels, mais une largeur de 80 pixels. C'est pour cette raison que la plupart des développeurs de thèmes demandent à leurs clients de télécharger des images carrées, car elles seront plus prévisibles..
La taille de l'image «principale» suivra toujours la plus grande taille disponible sur le serveur. Actuellement, il s'agit de 2048px × 2048px. Si vous téléchargez une image plus large que 2048px large, vous n'aurez pas accès à sa forme originale.
Il est également intéressant de noter que l'image du produit téléchargé à l'origine ne sera jamais agrandie. Si vous téléchargez une image minuscule, elle restera minuscule. Vous pouvez bien sûr référencer l'image en utilisant l'un des noms d'image ci-dessus. Cependant, notez que si vous demandez une taille impossible à créer, la taille disponible la plus proche vous sera alors proposée..
N'oubliez pas non plus que si manipulé avec CSS (par exemple. largeur: 100%) l’image peut être agrandie et devenir pixélisée (selon son format). Lorsque vous travaillez avec des clients, encouragez-les à télécharger des images carrées haute résolution dans la mesure du possible..
Enfin, rappelons que nous n’avons pas accès aux images de produits dans le dossier de notre thème. Ils sont stockés sur le CDN Shopify et restent attachés à la boutique quel que soit le thème appliqué..
Contrairement aux images de thème, les images de produit ne font pas usage de asset_url. Pour produire une image de produit, nous pouvons utiliser le img_url Filtre liquide à la place. Cela est dû au fait que les images de produits sont liées au magasin et ne font pas partie des actifs du thème..
img_url renvoie l'URL d'une image et accepte une taille d'image en tant que paramètre. Il peut être utilisé sur les objets Liquid suivants:
En utilisant le img_url le filtre est le suivant:
produit | img_url: 'petit' variante | img_url: 'petit' line_item | img_url: 'petit' collection | img_url: 'petit'
Chacun de ceux-ci renverra l'URL complète à l'image stockée sur le CDN Shopify..
Pour illustrer, jetons un coup d’œil à un exemple de code Liquid à partir d’un produit.liquide modèle. Comme ce modèle particulier a accès à la produit variable tous ces exemples fonctionneront. Cependant, veuillez noter qu'ils ne fonctionneront pas comme prévu dans d'autres modèles.
Dans ce premier exemple, la valeur de image représentera chaque image de la collection et aura une valeur différente à chaque itération de notre boucle Liquid. Cette variable peut être nommée comme bon vous semble; j'utilise image comme cela a du sens.
% pour l'image dans product.images%% endfor%
Une fois que vous avez travaillé avec des thèmes pendant un certain temps, vous remarquerez peut-être que d’autres filtres sont utilisés pour les images de produits. Voici quelques alternatives qui pourraient être utilisées dans notre exemple ci-dessus, chacune d'elles produisant le même résultat:
C'est à vous de choisir ce que vous choisissez d'utiliser. Si vous préférez une méthode à une autre, vous pouvez toujours laisser un commentaire en utilisant % comment%… % endcomment% expliquer votre décision. Ceci est particulièrement utile lors de la collaboration sur des thèmes.
En plus des images de produits, il est également possible d'afficher des images relatives aux variantes de produits. Une variante peut être expliquée comme une variante du produit. Disons que nous avons un t-shirt avec une impression particulière dessus. Ce t-shirt peut venir en vert, bleu et rouge. Bien que l’impression reste la même, la couleur du t-shirt est différente. C'est toujours le même produit, mais nous avons choisi de permettre au client de choisir parmi certaines options. Souvent, ce sera la taille et la couleur.
Les variantes peuvent également avoir leur propre prix et niveau de stock. Il est possible d'associer une image particulière à chaque variante, en plus des images principales du produit. Si votre thème utilise des images variantes, vous pouvez les afficher de la manière suivante dans produit.liquide modèle:
% pour la variante dans product.variants% % si variant.image%% endif% % endfor%
% endfor%
% endif% % endfor%alt AttributSi vous souhaitez ajouter le alt attribuer à votre sortie, vous pouvez le faire comme suit:
% pour l'image dans product.images%
Cela produira le alt texte saisi dans l'administrateur Shopify ou vide si rien n'a été entré. Vous pouvez également procéder comme suit si vous choisissez d’utiliser le img_tag filtre:
image | img_url: 'grande' | img_tag: image.alt
Dans notre exemple ci-dessus, nous avons utilisé une boucle Liquid pour accéder à chacune des images associées à un produit. Si le produit avait une image, nous produisions une image. S'il en avait dix, la boucle produirait dix images..
Dans Shopify, la première image répertoriée dans l’administrateur est également appelée “image sélectionnée”. Heureusement, la sortie de «l'image en vedette» est simple et agréable et ne nécessite pas de boucle. Voici un exemple qui fonctionnerait dans le produit.liquide modèle:
Comme toujours, vous pouvez y parvenir de différentes manières, notamment:
Vous pouvez également étendre la syntaxe pour inclure le alt attribuer dans les deuxième et troisième exemples:
Je décris souvent une collection dans Shopify comme un regroupement logique de produits. Par exemple, il peut s'agir de t-shirts, de jeans et de robes pour un magasin de vêtements. Un produit peut faire partie de zéro, une ou plusieurs collections, ce qui facilite la catégorisation et la découverte..
Helm Boots utilise des images de collection pour guider les clients dans les différentes zones de leur magasin.Souvent, les commerçants souhaiteront inclure une page dans leur magasin détaillant toutes leurs collections disponibles. Le modèle qui rend cela possible dans Shopify est list-collections.liquid. Voici un exemple de la façon dont vous pouvez parcourir chaque collection et générer l'image associée à partir de ce modèle:
% pour la collection dans les collections% collection.image | img_url: 'compact' | img_tag: alt: collection.title % endfor%
Vous pouvez développer davantage cet exemple pour vous assurer de prendre en compte le cas où une image de collection n'a pas été ajoutée:
% pour la collection dans les collections% % si collection.image% collection.image.src | img_url: 'moyen' | img_tag: collection.title % else% 'collection-image-default.png' | asset_url | img_tag % endif% % endfor%
Dans ce cas, nous utilisons une image de thème à la place de l'image de collection. Cela ne sera rendu que s'il n'y a pas d'image de collection associée. Pour que cela fonctionne comme prévu, vous devez vous assurer qu'il existe une image intitulée collection-image-default.png dans votre thème les atouts dossier.
Les images d'article fonctionnent de la même manière que les images de produit et de collection. Voici un exemple:
% if article.image% article | img_url: 'moyen' | img_tag: article.title % endif%
Le blog partenaire Shopify utilise des images d'articles pour fournir des images de héros pour chaque message.Si l’article est associé à une image, celle-ci sera alors affichée et alt attribut du titre de l'article. Les images de collection et d'article peuvent être utiles de différentes manières:
La dernière pièce du puzzle consiste en des images téléchargées via l'option «Personnaliser le thème»..
Chaque thème a un config dossier. Vous y trouverez un fichier appelé settings_schema.json. Ce fichier nous aide à générer une interface d'administration permettant aux marchands d'ajouter des données telles que du texte, des valeurs booléennes (true / false), de sélectionner des polices, de télécharger des images, etc. Nous sommes en mesure de définir ces éléments d'interface en utilisant JSON.
Pour activer un téléchargement d’image, vous devez ajouter un nouvel élément à la settings_schema.json fichier au format suivant:
"type": "image", "id": "logo.png", "label": "Texte", "largeur maximale": 480, "hauteur maximale": 200, "info": "Texte"
Voici un exemple basé sur l'ajout d'un logo pour le magasin:
"type": "image", "id": "shop_logo.png", "label": "logo du magasin", "largeur maximale": 480, "hauteur maximale": 200,
Les images téléchargées via la page "Personnaliser le thème" sont ajoutées à la les atouts dossier. En tant que tel, je ne les ai pas inclus en tant que type d'image distinct au début de l'article.
Le fichier image est enregistré avec un nom et un format qui correspond à identifiant attribut indépendamment du nom ou du format d'origine du fichier. Par exemple image.jpg le fichier serait sauvegardé sous shop_logo.png. Shopify tentera de convertir le fichier téléchargé au format approprié (.png) avant de l'enregistrer. Si Shopify ne parvient pas à convertir le fichier en fichier .png fichier, l'utilisateur recevra un message d'erreur dans l'admin.
Vous remarquerez que le type d'entrée est image il en résulte un bouton de téléchargement apparaissant dans le navigateur. Vous pouvez également spécifier une hauteur et une largeur maximales pour une image téléchargée à l'aide d'attributs de données. Shopify conservera alors les proportions de l’image téléchargée tout en la contraignant à ces dimensions maximales..
Le référencement des images ajoutées via «Personnaliser le thème» s'effectue de la même manière que toutes les autres images de thème:
'logo.png' | asset_url | img_tag: 'Logo'
Vous voudrez peut-être envisager d’utiliser le identifiant attribuer à "namespace" vos téléchargements de paramètres de thème. De cette façon, ils sont faciles à repérer dans le les atouts dossier car ils seront regroupés. Cela aide également à écraser accidentellement les fichiers que vous ajoutez dans votre thème..
J'utilise souvent le ct- préfixe comme suit:
"type": "image", "id": "ct-shop_logo.png", "label": "logo du magasin", "largeur maximale": 480, "hauteur maximale": 200,
À la mi-2015, Jason Bowman a remarqué que la caisse Shopify affichait des images carrées recadrées. Vous pouvez lire sur sa découverte sur son blog Freak Design.
Les enquêtes de Jason l'ont amené à découvrir que toutes les images de caisse étaient accompagnées de _tondu. Voici un exemple:
product-cropping-test-001_1024x1024.png
quand rogné devient:
product-cropping-test-001_1024x1024_cropped.png
Le recadrage fonctionne pour toutes les tailles sauf Maîtriser. Pour utiliser des images recadrées, nous ajoutons _tondu à notre img_tag filtre. Voici un exemple pour une image de produit en vedette:
product.featured_image | product_img_url: "medium_cropped"
Au moment de la rédaction de cet article, il n’est pas documenté, il est donc toujours possible que cela change, mais je voulais l’inclure..
Nous avons couvert beaucoup de sujets dans cet article, mais nous espérons que cela montre à quel point Shopify est flexible lorsqu'il s'agit de travailler avec des images dans un thème..
Les images font partie intégrante de tout magasin de commerce électronique. Comprendre comment les images sont gérées et manipulées dans un thème Shopify est une partie importante de l'apprentissage de Liquid et de la plate-forme Shopify..
J'espère que vous conviendrez avec moi que les outils de la plate-forme Shopify et de Liquid vous offrent une grande flexibilité pour le traitement des images dans vos thèmes..
