Tagimage

[Docker] Stopper et supprimer tous les containers et images Docker

Source: Stop and remove all docker containers and images.

List all containers (only IDs)

Stop all running containers

Remove all containers

Remove all images

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

Testé fonctionnel Magento 2.3, 2.4!

Attention: j’ai trouvé plusieurs tutos sur le net qui m’ont mis sur la bonne voie, mais seul celui-ci comporte l’ensemble des éléments qui permettra de mettre en place la fonctionnalité voulue: How to change product image on hover?.

En backoffice:

Créer un attribut custom hover_image

  • boutiques > attributs > produit
  • ajouter un attribut
  • propriétés de l’attribut:
    • libellé par défaut: « hover_image »
    • type d’entrée…: « image »
  • Propriétés avancée des attributs:
    • code: « hover_image »
    • ajouter aux option de colonne: « non »
    • utiliser dans les options de filtrage: « non »
  • Propriétés du front office: (se référer au paragraphe ATTENTION juste en-dessous)
    • Visible sur les pages du catalogue de la boutique: oui
    • Utiliser dans les listes de produits: oui
  • bouton enregistrer l’attribut

ATTENTION

Là, vous vous dites probablement: « Mais où qu’il est ce menu Propriétés du front office??? ». Il y a un bug dans le BO de Magento 2 qui applique un display: none; sur cette entrée de menu, mais elle est bien présente!!! Supprimer le display: none; avec l’inspecteur d’éléments pour pouvoir accéder à ce menu.

Sinon, vous pouvez également suivre la méthode suivante et appliquer directement la modification en base de données:

Now we have to use this attribute in the listing page. So we have to make used_in_product_listing to 1. We can do that by using MySQL.

You need to take hover_image Attribute_ID from admin. You can go to your hover_image attribute page in admin and get its ID from URL.

Suppose that Attribute_ID is 99 in our case. Now, go to the database and select the catalog_eav_attribute table. Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.

Or use below MySQL query :

Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)

  • boutiques > attributs > jeu d’attributs
  • choisir le jeu d’attributs (« default » si il n’y a que celui là)
  • dans la colonne « groupes » glisser le nouvel attribut hover_image dans le dossier « images » (normalement, vous le trouverez tout en bas de l’arbre)
  • bouton enregistrer

Affectons une image hover à l’un de nos produits

  • catalogue > produits
  • éditer un produit
  • boutons ajouter un attribut
  • cocher hover_image
  • bouton ajouter la sélection
  • section Images et vidéos
  • accéder à la configuration de l’image que vous souhaitez voir apparaître au hover en cliquant sur la petite icône en forme de damier située en haut à gauche du visuel
  • Dans Role, sélectionner hover_image
  • cliquez sur la croix pour fermer
  • bouton enregistrer

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash:


Une autre source (incomplète) m’ayant mis sur la voie: How to make a Product Listing with Hover images on Magento 2 et version PDF de l’article, pour la postérité.

[Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème

Source. Ceci sous-entend de récupérer l’URL vers l’image stockée dans un thème.

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

[jQuery] Récupérer la largeur d’une image

[Change cross commerce] Formats prédéfinis des visuels

Les formats des visuels sont prédéfinis dans les fichiers suivants :

  • ../App/Config/project.autogen.json pour les chemins d’accès sur le serveur
  • ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less pour les formats d’image

A savoir : il faut obligatoirement modifier les deux fichiers pour que les redimensionnements prennent effet !

Exemple : dans ../App/Config/project.autogen.json, la valeur 192x200 de "listItem" correspond à une partie de l’url qui pointe vers le média redimensionné côté serveur (http://kidiliz.c4.fr/Imagestorage/images/192/200/54feacac3e147_hph3c.jpg).

Dans ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less :

[Magento] Récupérer l’URL du skin dans un bloc statique

Pour charger une image consignée dans /skin/frontend/default/_nom_de_mon_skin_/images/ dans un bloc statique :

Même chose depuis un fichier template (phtml) :

[jQuery][CSS][Fancybox] Le wrapper de Fancybox ne s’adapte pas correctement aux dimensions d’une image

Nature du bug : Les dimensions du wrapper d’une pop-in Fancybox sont supposées s’adapter automatiquement aux dimensions de l’image que cette pop-in contient. Cependant, l’image est plus grande que la pop-in…

fancybox-bug_image

Résolution du bug : Le problème peut venir d’une déclaration CSS Reset qui entrerait en conflit avec les styles propres au plug-in Fancybox. Cette déclaration fixerait la propriété box-sizing des DIVs à border-box.

La solution consiste à surcharger les styles de Fancybox en fixant la propriété box-sizing des DIVs wrap, outer et inner à content-box.


/*----------*/
/* fancybox */
/*----------*/
#fancybox-wrap,
#fancybox-outer,
#fancybox-inner {
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  -safari-box-sizing: content-box;
  box-sizing: content-box;
}

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑