Étiquette : image

[Magento 2] Récupérer la placeholder image de votre store dans un block PHP

24/01/2023 / admin

Objectif:

Dans la fonction suivante, je souhaite rajouter en else la possibilité d’afficher la placeholder image rendue disponible par Magento 2 si l’utilisateur admin backoffice n’a pas uploadé d’image spécifique.

/**
 * Get Page Url
 *
 * @return string
 * @throws \Magento\Framework\Exception\NoSuchEntityException
 */
public function getPageImageUrl()
{
    /** @var \Magento\Framework\DataObject $item */
    $item = $this->getItem();
    if ($item) {
        if (!empty($item->getData('image_url'))) {
            /** @var \Magento\Store\Model\Store $store */
            $store = $this->_storeManager->getStore();
            return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)
                . $item->getData('image_url');
        }
    }

    return '';
}

/**

* Get Page Url

* @return string

* @throws \Magento\Framework\Exception\NoSuchEntityException

public function getPageImageUrl()

{

/** @var \Magento\Framework\DataObject $item */

$item = $this->getItem();

if ($item) {

if (!empty($item->getData('image_url'))) {

/** @var \Magento\Store\Model\Store $store */

$store = $this->_storeManager->getStore();

return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)

. $item->getData('image_url');

}

return '';

}

Solution:

Tout d’abord, juste après la déclaration class myClassName extends…, déclarer le Helper Image et sa variable $imageHelper:

/**
 * Class myClassName
 *
 * @package Blurrrblll\MainSearch\Block\ItemRenderer
 */
class myClassName extends \Magento\Framework\View\Element\Template implements \Blurrrblll\MainSearch\Api\ItemRendererInterface
{
    [...]

    /**
     * @var \Magento\Catalog\Helper\Image
     */
    protected $imageHelper;

/**

* Class myClassName

* @package Blurrrblll\MainSearch\Block\ItemRenderer

class myClassName extends \Magento\Framework\View\Element\Template implements \Blurrrblll\MainSearch\Api\ItemRendererInterface

{

[...]

/**

* @var \Magento\Catalog\Helper\Image

protected $imageHelper;

NOTE: dans mon cas (un peu particulier), une protected function _construct(): void existe déjà dans le block. Il ne faut pas chercher à la modifier!

    /**
     * Initialize block
     * @return void
     */
    protected function _construct(): void
    {
        parent::_construct();
        $this->setTemplate('Blurrrblll_MainSearch::item_renderer/page.phtml');
    }

/**

* Initialize block

* @return void

protected function _construct(): void

{

parent::_construct();

$this->setTemplate('Blurrrblll_MainSearch::item_renderer/page.phtml');

}

Au lieu de ça, dans notre code et juste en-dessous ce premier contructeur, on crée une nouvelle extension de public function __construct sur le modèle de la fonction _construct tout droit issue de vendor/magento/framework/View/Element/Template.php et on y ajoute le image helper:

    /**
     * Constructor
     *
     * @param \Magento\Catalog\Helper\Image $imageHelper
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param array $data
     */
    public function __construct(
        \Magento\Catalog\Helper\Image $imageHelper,
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = []
    )
    {
        $this->imageHelper = $imageHelper;
        parent::__construct($context, $data);
    }

/**

* Constructor

* @param \Magento\Catalog\Helper\Image $imageHelper

* @param \Magento\Framework\View\Element\Template\Context $context

* @param array $data

public function __construct(

\Magento\Catalog\Helper\Image $imageHelper,

\Magento\Framework\View\Element\Template\Context $context,

array $data = []

)

{

$this->imageHelper = $imageHelper;

parent::__construct($context, $data);

}

NOTE: \Template\Context $context devient \Magento\Framework\View\Element\Template\Context $context pour l’occasion.

Puis compléter la fonction de départ avec un else qui retourne l’image placeholder:

/**
 * Get Page Url
 *
 * @return string
 * @throws \Magento\Framework\Exception\NoSuchEntityException
 */
public function getPageImageUrl()
{
    /** @var \Magento\Framework\DataObject $item */
    $item = $this->getItem();
    if ($item) {
        if (!empty($item->getData('image_url'))) {
            /** @var \Magento\Store\Model\Store $store */
            $store = $this->_storeManager->getStore();
            return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)
                . $item->getData('image_url');
        } else {
            // Display default placeholder if no image is defined
            return $this->imageHelper->getDefaultPlaceholderUrl('image');
        }
    }

    return '';
}

/**

* Get Page Url

* @return string

* @throws \Magento\Framework\Exception\NoSuchEntityException

public function getPageImageUrl()

{

/** @var \Magento\Framework\DataObject $item */

$item = $this->getItem();

if ($item) {

if (!empty($item->getData('image_url'))) {

/** @var \Magento\Store\Model\Store $store */

$store = $this->_storeManager->getStore();

return $store->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA)

. $item->getData('image_url');

} else {

// Display default placeholder if no image is defined

return $this->imageHelper->getDefaultPlaceholderUrl('image');

}

return '';

}

Cette manip’ donnera le même résultat que si on mettait en place le code suivant la le fichier template PHTML chargé d’afficher les images ou, à défaut, le placeholder. On est cependant plus efficace en renvoyant directement l’image adéquate via le block PHP. Donc, le code ci-dessous est présent juste à titre informatif mais éviter de l’utiliser dans la mesure du possible (on voit qu’on utilise, comme argument de la condition, la même méthode empty() que dans le block PHP):

<?php
/** @var \Magento\Framework\DataObject $item */
$item = $block->getItem();

/** @var \Magento\Catalog\Helper\Image $imageHelper */
$imageHelper = $this->helper(\Magento\Catalog\Helper\Image::class);

$imageUrl = $block->escapeUrl($block->getPageImageUrl());
$placeholderImageUrl = $imageHelper->getDefaultPlaceholderUrl('image');
?>

<?php if ($item) : ?>
    <li class="search-item search-item-page follow-url"<?= (string) $item->getData('localization'); ?>>
        <div class="search-item-image">
            <picture>
                <?php if (!empty($imageUrl)) : ?>
                    <img src="<?= (string) $imageUrl ?>"
                         alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/>
                <?php else : ?>
                    <img src="<?= (string) $placeholderImageUrl ?>"
                         alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/>
                <?php endif; ?>
            </picture>
        </div>

<?php

/** @var \Magento\Framework\DataObject $item */

$item = $block->getItem();

/** @var \Magento\Catalog\Helper\Image $imageHelper */

$imageHelper = $this->helper(\Magento\Catalog\Helper\Image::class);

$imageUrl = $block->escapeUrl($block->getPageImageUrl());

$placeholderImageUrl = $imageHelper->getDefaultPlaceholderUrl('image');

<?php if ($item) : ?>

<li class="search-item search-item-page follow-url"<?= (string) $item->getData('localization'); ?>>

<?php if (!empty($imageUrl)) : ?>

<img src="<?= (string) $imageUrl ?>"

alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/>

<?php else : ?>

<img src="<?= (string) $placeholderImageUrl ?>"

alt="<?= $block->escapeHtmlAttr(__('Article') . ' - ' . $block->stripTags($item->getData('name'))) ?>"/>

<?php endif; ?>

</picture>

</div>

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

05/01/2021 / admin

Testé fonctionnel Magento 2.4. La markup HTML de la fiche produit a cependant été surchargé par rapport au standard. On retrouve la première rangée d’informations sur deux colonnes (gauche: visuel principal et carousel Fotorama; droite: libellé produit, prix, formulaire d’ajout au panier).

<div class="column main">
    <section class="product-top row">
        <div class="product-top-left"></div>
        <div class="product-top-right"></div>
    </section>
</div>

</section>

</div>

Surcharger la largeur et la hauteur max du visuel principal dans le fichier etc/view.xml de votre thème:

<?xml version="1.0"?>
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="product_page_image_large" type="image"/>
            <image id="product_page_image_medium" type="image">
                <width>968</width>
                <height>968</height>
            </image>
        </images>
    </media>

<?xml version="1.0"?>

<media>

</image>

</images>

</media>

Le code LESS (qui fait appel à un mixin spécifique permettant d’écrire des boucles FOR qui exploitent des données consignées dans un ARRAY. Il ne faudra donc pas oublier de l’inclure dans votre projet! (Documentation).
Lisez les commentaires dans mon code pour plus de documentation:

.product-top {
    .product-top-left {
        /*
         * @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.
         * C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.
         * Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):
         * https://gs.statcounter.com/screen-resolution-stats/all/europe
         */
        @screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;
        /*
         * @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.
         * @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.
         */
        @global-gutter-width: 3.75rem;
        @thumbs-col-width: 80px;

        // Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;
        .for(@screen-resolutions); .-each(@value) {
            /*
             * @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".
             */
            @parent-row-width: @value - (@global-gutter-width * 2);
            @media (min-width: @value) {
                min-height: (@parent-row-width/2) !important;
                flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;
            }
        }
    }
}

/*
 * Résolution minimum consignée dans le tableau @screen-resolutions
 */
@media (min-width: 1280px) {
    .product-top .product-top-left {
        max-width: 100% !important;
        .fotorama__stage__frame {
            display: flex;
            background: rgba(231, 231, 231, 0.5);
        }
        .product.media .fotorama__stage img {
            top: unset !important;
            align-self: center;
        }
    }
}

.product-top {

.product-top-left {

* @screen-resolutions: un tableau des résolutions d'écran (largeurs) ciblées par le redimensionnement du visuel principal de la fiche produit.

* C'est LA SEULE VALEUR A MODIFIER! Ajouter ou retirer des résolutions d'écran selon vos besoins de support.

* Résolutions les plus répandues en Europe (en décembre 2020 pour ce qui est renseigné dans le tableau):

* https://gs.statcounter.com/screen-resolution-stats/all/europe

@screen-resolutions: 1280px, 1366px, 1440px, 1536px, 1640px, 1920px;

* @global-gutter-width: la largeur des gouttières telle que définie dans :root{ var(--gutter) }.

* @thumbs-col-width: la largeur (marge à droite comprise) de la colonne des miniatures.

@global-gutter-width: 3.75rem;

@thumbs-col-width: 80px;

// Dépendant de "global/lib/for.less" pour exploiter les données issues d'un tableau dans une boucle FOR avec LESS;

.for(@screen-resolutions); .-each(@value) {

* @parent-row-width: la largeur de l'élément du DOM qui a la classe ".product-top".

@parent-row-width: @value - (@global-gutter-width * 2);

@media (min-width: @value) {

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + @thumbs-col-width !important;

}

* Résolution minimum consignée dans le tableau @screen-resolutions

@media (min-width: 1280px) {

.product-top .product-top-left {

max-width: 100% !important;

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

Version non factorisée (ça fait la même chose en moins bien conceptualisé et en beaucoup plus chiant à maintenir):

.product-top {
    .product_page_image_large(@parent-row-width) {
        /*
         * @parent-row-width: la largeur de l'élément qui a la classe .product-top
         * 80px: la largeur (marge à droite comprise) de la colonne des miniatures
         */
        max-width: 100% !important;
        min-height: (@parent-row-width/2) !important;
        flex: 0 0 (@parent-row-width/2) + 80px !important;
    }
    // Résolutions les plus répandues en Europe en décembre 2020:
    // https://gs.statcounter.com/screen-resolution-stats/all/europe
    @media (min-width: 1280px) {
        // @parent-row-width: 1160px;
        .product-top-left {
            .product_page_image_large(1160px);

            .fotorama__stage__frame {
                display: flex;
                background: rgba(231, 231, 231, 0.5);
            }
            .product.media .fotorama__stage img {
                top: unset !important;
                align-self: center;
            }
        }
    }
    @media (min-width: 1366px) {
        // @parent-row-width: 1246px;
        .product-top-left {
            .product_page_image_large(1246px);
        }
    }
    @media (min-width: 1440px) {
        // @parent-row-width: 1320px;
        .product-top-left {
            .product_page_image_large(1320px);
        }
    }
    @media (min-width: 1536px) {
        // @parent-row-width: 1416px;
        .product-top-left {
            .product_page_image_large(1416px);
        }
    }
    @media (min-width: 1640px) {
        // @parent-row-width: 1775px;
        .product-top-left {
            .product_page_image_large(1775px);
        }
    }
    @media (min-width: 1920px) {
        // @parent-row-width: 1800px;
        .product-top-left {
            .product_page_image_large(1800px);
        }
    }
}

.product-top {

.product_page_image_large(@parent-row-width) {

* @parent-row-width: la largeur de l'élément qui a la classe .product-top

* 80px: la largeur (marge à droite comprise) de la colonne des miniatures

max-width: 100% !important;

min-height: (@parent-row-width/2) !important;

flex: 0 0 (@parent-row-width/2) + 80px !important;

}

// Résolutions les plus répandues en Europe en décembre 2020:

// https://gs.statcounter.com/screen-resolution-stats/all/europe

@media (min-width: 1280px) {

// @parent-row-width: 1160px;

.product-top-left {

.product_page_image_large(1160px);

.fotorama__stage__frame {

display: flex;

background: rgba(231, 231, 231, 0.5);

}

.product.media .fotorama__stage img {

top: unset !important;

align-self: center;

}

@media (min-width: 1366px) {

// @parent-row-width: 1246px;

.product-top-left {

.product_page_image_large(1246px);

}

@media (min-width: 1440px) {

// @parent-row-width: 1320px;

.product-top-left {

.product_page_image_large(1320px);

}

@media (min-width: 1536px) {

// @parent-row-width: 1416px;

.product-top-left {

.product_page_image_large(1416px);

}

@media (min-width: 1640px) {

// @parent-row-width: 1775px;

.product-top-left {

.product_page_image_large(1775px);

}

@media (min-width: 1920px) {

// @parent-row-width: 1800px;

.product-top-left {

.product_page_image_large(1800px);

}

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

15/07/2020 / admin

Sources: Stop and remove all docker containers and images et I have a helper function to nuke everything so that our Continuous blah, cycle can be tested, erm… continuously.

To clear containers:

docker rm -f $(docker ps -a -q)

To clear images:

docker rmi -f $(docker images -a -q)

To clear volumes:

docker volume rm $(docker volume ls -q)

To clear networks:

docker network rm $(docker network ls | tail -n+2 | awk '{if($2 !~ /bridge|none|host/){ print $1 }}')

List all containers (only IDs)

docker ps -aq

1	docker ps -aq

Stop all running containers

docker stop $(docker ps -aq)

1	docker stop $(docker ps -aq)

Remove all containers

docker rm $(docker ps -aq)

1	docker rm $(docker ps -aq)

Remove all images

docker rmi $(docker images -q)

1	docker rmi $(docker images -q)

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

25/05/2020 / admin

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 :

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

1

UPDATE catalog_eav_attribute SET used_in_product_listing = ‘1’ WHERE attribute_id = 99;

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

<?xml version="1.0"?>  <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd"> <media> <images module="Magento_Catalog"> <image id="category_page_grid_hover" type="hover_image"> <width>261</width> <height>206</height> </image> <image id="category_page_list_hover" type="hover_image"> <width>261</width> <height>206</height> </image> </images> </media> </view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<?xml version="1.0"?>

<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
    <media>
        <images module="Magento_Catalog">
            <image id="category_page_grid_hover" type="hover_image">
                <width>261</width>
                <height>206</height>
            </image>
            <image id="category_page_list_hover" type="hover_image">
                <width>261</width>
                <height>206</height>
            </image>
        </images>
    </media>
</view>

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

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image'); $hoverimg = 'category_page_grid_hover'; $hoverimg = 'category_page_list_hover';

1
2
3

$_imageHelper = $this->helper('Magento\Catalog\Helper\Image');
$hoverimg = 'category_page_grid_hover';
$hoverimg = 'category_page_list_hover';

<?php // Product Image ?> <?php // Product Image Hovered $productHoverImage = $_imageHelper->init($_product, $hoverimg); $productHoverImageUrl = $productHoverImage->getUrl(); $placeholder = "placeholder"; ?> <a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>" class="product photo product-item-photo" tabindex="-1" <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> data-has-hovered-state="false" <?php else : ?> data-has-hovered-state="true" <?php endif; ?> > <?= $productImage->toHtml() ?> <?php // Product Image Hovered ?> <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?> <?php // "Placeholder" word Found in URL! -> no Image Hovered was set ?> <?php else : ?> <?php // "Placeholder" word Not Found in URL! -> show existing Image Hovered ?> <img class="product-image-photo" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>" max-width="<?php echo $productImage->getWidth(); ?>" /> <?php endif; ?> </a>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<?php // Product Image ?>
<?php
    // Product Image Hovered
    $productHoverImage = $_imageHelper->init($_product, $hoverimg);
    $productHoverImageUrl = $productHoverImage->getUrl();
    $placeholder = "placeholder";
?>
<a href="<?= $block->escapeUrl($_product->getProductUrl()) ?>"
   class="product photo product-item-photo"
   tabindex="-1"
    <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?>
        data-has-hovered-state="false"
    <?php else : ?>
        data-has-hovered-state="true"
    <?php endif; ?>
>
    <?= $productImage->toHtml() ?>

    <?php // Product Image Hovered ?>
    <?php if(strpos($productHoverImageUrl, $placeholder) !== false) : ?>
        <?php // "Placeholder" word Found in URL! -> no Image Hovered was set ?>
    <?php else : ?>
        <?php // "Placeholder" word Not Found in URL! -> show existing Image Hovered ?>
        <img class="product-image-photo" src="<?php echo $productHoverImageUrl; ?>" alt="<?php echo $productHoverImage->getLabel(); ?>" max-width="<?php echo $productImage->getWidth(); ?>" />
    <?php endif; ?>
</a>

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

// // Common // _____________________________________________ & when (@media-common = true) { // // Product images general container // --------------------------------------------- .product-image-photo { display: block; height: auto; margin: auto; max-width: 100%; + .product-image-photo { display: none !important; } } .product-item { &:hover { .product-item-photo[data-has-hovered-state="true"] { .product-image-photo { display: none !important; + .product-image-photo { display: block !important; } } } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

//
//  Common
//  _____________________________________________

& when (@media-common = true) {

    //
    //  Product images general container
    //  ---------------------------------------------

    .product-image-photo {
        display: block;
        height: auto;
        margin: auto;
        max-width: 100%;
        + .product-image-photo {
            display: none !important;
        }
    }

    .product-item {
        &:hover {
            .product-item-photo[data-has-hovered-state="true"] {
                .product-image-photo {
                    display: none !important;
                    + .product-image-photo {
                        display: block !important;
                    }
                }
            }
        }
    }
}

En bash:

$ cache:clean

1

$ cache:clean

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

28/08/2017 / admin

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

<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

1

<img src="<?php print base_path() . drupal_get_path('theme', 'roederer_main_theme'); ?>/images/bloc-homepage-entreprises-parapluie.png" alt="" />

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

24/03/2017 / admin

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 :

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

1

.votre-faux-tableau .votre-fausse-cellule img { width: 99.99%; }

Source: Responsive Images in display: table-cell – A PEN BY Matt Stow.

Voir également: Why do Firefox and Opera ignore max-width inside of display: table-cell?.

<p>Normal "responsive" image</p> <img src="http://placehold.it/650x150" /> <p>Image in a display: table-cell</p> <div class="cell"><img src="http://placehold.it/650x150" /></div> <p>Image in a display: table-cell with width: 100%</p> <div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

1
2
3
4
5
6
7
8

<p>Normal "responsive" image</p>
<img src="http://placehold.it/650x150" />

<p>Image in a display: table-cell</p>
<div class="cell"><img src="http://placehold.it/650x150" /></div>

<p>Image in a display: table-cell with width: 100%</p>
<div class="cell"><img src="http://placehold.it/650x150" class="cell-fluid" /></div>

img { height: auto; max-width: 100%; } .cell { display: table-cell; } .cell-fluid { width: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12

img {
  height: auto;
  max-width: 100%;
}

.cell {
  display: table-cell;
}

.cell-fluid {
  width: 100%;
}

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

21/09/2016 / admin

$(document).ready(function(){ // On récupère la largeur de chaque image. // Si l'image a une largeur inférieure ou égale à 1224px // on ajoute une classe ".container" à l'élément ".cRow". function setClassForImageContainer(htmlElement){ $(htmlElement).each(function(){ var img = $(this)[0]; $('<img/>') .attr('src', $(img).attr('src')) .on('load', function(){ if(this.width <= 1224){ $(img).closest('.cRow').addClass('container'); } }); }); } function setClassForOtherContainer(){ $('div.cRow').each(function(){ // Tous les blocs ".cRow" qui ne font pas l'objet d'un // traitement spécifique via une autre fonction. // Si l'élément ".cRow" contient une image // c'est la fonction "setClassForImageContainer" // qui s'occupe d'attribuer ou non la classe ".container". if($(this).find('div.image-container').length != 0){ // do nuffin' } // Sinon : else{ $(this).addClass('container'); } }); } // si gabarit 2 colonnes if($('body#tplSidebar').length != 0){ // console.log('gabarit 2 colonnes'); $('section#heading').addClass('container-xl'); // Pour les blocs ".cRow" qui contiennent des images, mais uniquement dans "#heading" : setClassForImageContainer('#heading div.image-container img'); } // si gabarit 1 colonne else if($('body#tplNosidebar').length != 0){ // console.log('gabarit 1 colonne'); $('section#content').addClass('container-xl'); // Pour tous blocs ".cRow" de la page qui contiennent des images : setClassForImageContainer('div.image-container img'); // Pour les blocs ".cRow" qui ne font pas l'objet d'un traitement spécifique via une autre fonction : setClassForOtherContainer(); } });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

$(document).ready(function(){
    // On récupère la largeur de chaque image.
    // Si l'image a une largeur inférieure ou égale à 1224px
    // on ajoute une classe ".container" à l'élément ".cRow".
    function setClassForImageContainer(htmlElement){
        $(htmlElement).each(function(){
            var img = $(this)[0];

            $('<img/>')
                .attr('src', $(img).attr('src'))
                .on('load', function(){
                    if(this.width <= 1224){
                        $(img).closest('.cRow').addClass('container');
                    }
                });
        });
    }

    function setClassForOtherContainer(){
        $('div.cRow').each(function(){
            // Tous les blocs ".cRow" qui ne font pas l'objet d'un
            // traitement spécifique via une autre fonction.

            // Si l'élément ".cRow" contient une image
            // c'est la fonction "setClassForImageContainer"
            // qui s'occupe d'attribuer ou non la classe ".container".
            if($(this).find('div.image-container').length != 0){
                // do nuffin'
            }

            // Sinon :
            else{
                $(this).addClass('container');
            }
        });
    }

    // si gabarit 2 colonnes
    if($('body#tplSidebar').length != 0){
        // console.log('gabarit 2 colonnes');
        $('section#heading').addClass('container-xl');

        // Pour les blocs ".cRow" qui contiennent des images, mais uniquement dans "#heading" :
        setClassForImageContainer('#heading div.image-container img');
    }
    // si gabarit 1 colonne
    else if($('body#tplNosidebar').length != 0){
        // console.log('gabarit 1 colonne');
        $('section#content').addClass('container-xl');

        // Pour tous blocs ".cRow" de la page qui contiennent des images :
        setClassForImageContainer('div.image-container img');
        // Pour les blocs ".cRow" qui ne font pas l'objet d'un traitement spécifique via une autre fonction :
        setClassForOtherContainer();
    }
});

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

26/03/2015 / admin

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).

{ "Change":{ "Storage":{ }, "Events":{ } }, "Rbs":{ "Media":{ "namedImageFormats":{ "listItem":"192x200", [...] } } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

{
"Change":{
"Storage":{
},
"Events":{
}
},
"Rbs":{
"Media":{
"namedImageFormats":{
"listItem":"192x200",
                                [...]
}
}
}
}

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

/* Values from configuration entry: Rbs/Media/namedImageFormats/listItem */ @image-format-listItem-width: 192px; @image-format-listItem-height: 200px;

1
2
3

/* Values from configuration entry: Rbs/Media/namedImageFormats/listItem */
@image-format-listItem-width: 192px;
@image-format-listItem-height: 200px;

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

13/10/2014 / admin

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

<img src="{{skin url='images/_libellé_du_fichier_image_.png'}}" alt="" />

1

<img src="{{skin url='images/_libellé_du_fichier_image_.png'}}" alt="" />

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

<img src="<?php echo $this->getSkinUrl('images/_libellé_du_fichier_image_.png'); ?>" alt="" />

1

<img src="<?php echo $this->getSkinUrl('images/_libellé_du_fichier_image_.png'); ?>" alt="" />

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

25/04/2014 / admin

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…

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; }

Articles récents

Catégories

Archives

Méta

Étiquette : image

[Magento 2] Récupérer la placeholder image de votre store dans un block PHP

Objectif:

Solution:

[Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama

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

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

En backoffice:

Créer un attribut custom `hover_image`

ATTENTION

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

Affectons une image hover à l’un de nos produits

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:

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

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

table

display: table-cell;

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

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

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

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

Objectif:

Solution:

List all containers (only IDs)

Stop all running containers

Remove all containers

Remove all images

En backoffice:

Créer un attribut custom hover_image

ATTENTION

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

Affectons une image hover à l’un de nos produits

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:

table

display: table-cell;

Créer un attribut custom `hover_image`

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