Question

192

Remove default product gallery in Magento 2

rated 0 times [ 195] [ 3] / answers: 1 / hits: 15839 / 8 Years ago, thu, march 24, 2016, 12:00:00

As you know there is fotorama JavaScript gallery and magnifier in the product page of Magento 2. I need to know how I should remove it from my product page. I just need the product image only.

In my appdesignfrontendMypackagemythemeMagento_Catalogtemplatesproductviewgallery.phtml file I removed:

<script type=text/x-magento-init>

{

    [data-gallery-role=gallery-placeholder]: {

        mage/gallery/gallery: {

            mixins:[magnifier/magnify],

            magnifierOpts: <?php /* @escapeNotVerified */

echo $block->getMagnifier(); ?>,

            data: <?php /* @escapeNotVerified */

echo $block->getGalleryImagesJson(); ?>,

            options: {

                nav: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/nav); ?>,

                loop: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/loop); ?>,

                keyboard: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/keyboard); ?>,

                arrows: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/arrows); ?>,

                allowfullscreen: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/allowfullscreen); ?>,

                showCaption: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/caption); ?>,

                width: <?php /* @escapeNotVerified */

echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,

                thumbwidth: <?php /* @escapeNotVerified */

echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,

                thumbheight: <?php /* @escapeNotVerified */

echo $block->getImageAttribute('product_page_image_small', 'height')

    ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,

                height: <?php /* @escapeNotVerified */

echo $block->getImageAttribute('product_page_image_medium', 'height')

    ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,

                transitionduration: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/transition/duration); ?>,

                transition: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/transition/effect); ?>,

                navarrows: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/navarrows); ?>,

                navtype: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/navtype); ?>,

                navdir: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/navdir); ?>

            },

            fullscreen: {

                nav: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/nav); ?>,

                loop: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/loop); ?>,

                navdir: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/navdir); ?>,

                arrows: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/arrows); ?>,

                showCaption: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/caption); ?>,

                transitionduration: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/transition/duration); ?>,

                transition: <?php /* @escapeNotVerified */

echo $block->getVar(gallery/fullscreen/transition/effect); ?>

            },

            breakpoints: <?php /* @escapeNotVerified */

echo $block->getBreakpoints(); ?>

        }

    }

}

And in my appdesignfrontendMypackagemythemeetcview.xml file I removed:

  <!-- Gallery and magnifier theme settings. Start -->

    <var name=gallery>

        <var name=nav>thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->

        <var name=loop>true</var> <!-- Gallery navigation loop (true/false) -->

        <var name=keyboard>true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->

        <var name=arrows>true</var> <!-- Turn on/off arrows on the sides preview (true/false) -->

        <var name=caption>false</var> <!-- Display alt text as image title (true/false) -->

        <var name=allowfullscreen>true</var> <!-- Turn on/off fullscreen (true/false) -->

        <var name=navdir>horizontal</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->

        <var name=navarrows>true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->

        <var name=navtype>slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->

        <var name=transition>

            <var name=effect>slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->

            <var name=duration>500</var> <!-- Sets transition duration in ms -->

        </var>

        <var name=fullscreen>

            <var name=nav>thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->

            <var name=loop>true</var> <!-- Fullscreen navigation loop (true/false/null) -->

            <var name=keyboard>true</var> <!-- Turn on/off keyboard arrows navigation (true/false/null) -->

            <var name=arrows>false</var> <!-- Turn on/off arrows on the sides preview (true/false/null) -->

            <var name=caption>false</var> <!-- Display alt text as image title (true/false) -->

            <var name=navdir>horizontal</var> <!--Sliding direction of thumbnails in full screen(horizontal/vertical)  -->

            <var name=thumbwidth>150</var> <!-- Width of thumbnails in fullscreen -->

            <var name=thumbheight>150</var> <!-- Height of thumbnails in fullscreen -->

            <var name=navigation_carousel>true</var> <!-- Display navigation thumbs as carousel (true/false) -->

            <var name=transition>

                <var name=effect>dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->

                <var name=duration>500</var> <!-- Sets transition duration in ms -->

                <var name=carousel>true</var> <!-- Display navigation thumbs as carousel (true/false) -->

            </var>

        </var>

    </var>



    <var name=magnifier>

        <var name=fullscreenzoom>5</var>  <!-- Zoom for fullscreen (integer)-->

        <var name=top></var> <!-- Top position of magnifier -->

        <var name=left></var> <!-- Left position of magnifier -->

        <var name=width></var> <!-- Width of magnifier block -->

        <var name=height></var> <!-- Height of magnifier block -->

        <var name=eventType>hover</var> <!-- Action that atcivates zoom (hover/click) -->

        <var name=enabled>false</var> <!-- Turn on/off magnifier (true/false) -->

    </var>



    <var name=breakpoints>

        <var name=mobile>

            <var name=conditions>

                <var name=max-width>767px</var>

            </var>

            <var name=options>

                <var name=options>

                    <var name=navigation>dots</var>

                </var>

            </var>

        </var>

    </var>

    <!-- end. Gallery and magnifier theme settings -->

but no luck. Removing above code resulted in removing the product image and swatch functionalities. Can anyone help me with this? Is there any method that will allow me to remove the product gallery and zoom while keep the swatch function? Any help is appreciated. Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jackie

Add To Favorites

Follow

Total Points: 442

Total Questions: 107

Total Answers: 94

Location: Honduras

Member since Sun, Dec 26, 2021

2 Years ago

jackie questions

1 Is it possible to get the selector from a locator object in playwright?

Thu, Apr 28, 22, 00:00, 2 Years ago

1 Upload and preview Video in React

Sat, Sep 18, 21, 00:00, 3 Years ago

1 React countdown timer using new Date()

Wed, Jul 14, 21, 00:00, 3 Years ago

1 How to style the button in bootstrap vue dropdown like a circle

Thu, Oct 22, 20, 00:00, 4 Years ago

1 Vue reactivity, prevent re-rendering component on prop update with input v-model

Wed, Sep 2, 20, 00:00, 4 Years ago

View All

answered 8 Years ago kristiano · Accepted Answer

If you only want to display the main image of products, it is not necessary to remove the gallery.

You can disable magnifier and fullscreen features in your view.xml file.

...

<var name=gallery>

    ...

    <var name=allowfullscreen>false</var> <!-- Turn on/off fullscreen (true/false) -->

    ...

</var>

...

<var name=magnifier>

    ...

    <var name=enabled>false</var> <!-- Turn on/off magnifier (true/false) -->

    ...

</var>

...

And use this simple module that allows you to display in the gallery only the main image.

Base folder: appcode

File: Example/OneImage/composer.json

{

    name: example/oneimage,

    description: OneImage module for Magento 2,

    type: magento2-module,

    version: 1.0.0,

    license: [

        OSL-3.0,

        AFL-3.0

    ],

    require: {

        php: ~5.5.0|~5.6.0|~7.0.0,

        magento/module-catalog: ~100.0

    },

    autoload: {

        files: [

            registration.php

        ],

        psr-4: {

            Example\OneImage\: 

        }

    }

}

File: Example/OneImage/registration.php

<?php



use MagentoFrameworkComponentComponentRegistrar;



ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Example_OneImage', __DIR__);

File: Example/OneImage/etc/module.xml

<?xml version=1.0?>

<config xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:noNamespaceSchemaLocation=urn:magento:framework:Module/etc/module.xsd>

    <module name=Example_OneImage setup_version=1.0.0>

        <sequence>

            <module name=Magento_Catalog/>

        </sequence>

    </module>

</config>

File: Example/OneImage/etc/frontend/di.xml

<?xml version=1.0?>

<config xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance xsi:noNamespaceSchemaLocation=urn:magento:framework:ObjectManager/etc/config.xsd>

    <type name=MagentoCatalogModelProduct>

        <plugin name=ExampleOneImagePlugin type=ExampleOneImagePluginModelProduct sortOrder=1 />

    </type>

</config>

File: Example/OneImage/Plugin/Model/Product.php

<?php



namespace ExampleOneImagePluginModel;



/**

 * Plugin for MagentoCatalogModelProduct

 */

class Product

{

    /**

     * Retrieve media gallery images

     *

     * @return MagentoFrameworkDataCollection

     */

    public function afterGetMediaGalleryImages(MagentoCatalogModelProduct $product, $images)

    {

        $mainImage = null;

        foreach ($images  as $key => $image) {

            if ($product->getImage() == $image->getFile()) {

                $mainImage = $image;

                break;

            }

        }

        $images->clear();

        if ($mainImage) {

            $images->addItem($mainImage);

        }

        return $images;

    }

}