diff --git a/app/code/Magento/Catalog/Block/Product/View/Gallery.php b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
index 17828b9d375d3..682250d42f81e 100644
--- a/app/code/Magento/Catalog/Block/Product/View/Gallery.php
+++ b/app/code/Magento/Catalog/Block/Product/View/Gallery.php
@@ -138,6 +138,145 @@ public function getGalleryImagesJson()
         return json_encode($imagesItems);
     }
 
+    /**
+     * Retrieve gallery options in JSON format
+     *
+     * @return string
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
+     */
+    public function getGalleryOptionsJson()
+    {
+        $optionItems = null;
+
+        if ($this->getVar("gallery/nav")) {
+            $optionItems['nav'] = $this->escapeHtml($this->getVar("gallery/nav"));
+        }
+        if ($this->getVar("gallery/loop")) {
+            $optionItems['loop'] = filter_var($this->getVar("gallery/loop"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/keyboard")) {
+            $optionItems['keyboard'] = filter_var($this->getVar("gallery/keyboard"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/arrows")) {
+            $optionItems['arrows'] = filter_var($this->getVar("gallery/arrows"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/caption")) {
+            $optionItems['showCaption'] = filter_var($this->getVar("gallery/caption"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/allowfullscreen")) {
+            $optionItems['allowfullscreen'] = filter_var(
+                $this->getVar("gallery/allowfullscreen"),
+                FILTER_VALIDATE_BOOLEAN
+            );
+        }
+        if ($this->getVar("gallery/navdir")) {
+            $optionItems['navdir'] = $this->escapeHtml($this->getVar("gallery/navdir"));
+        }
+        if ($this->getVar("gallery/navarrows")) {
+            $optionItems['navarrows'] = filter_var($this->getVar("gallery/navarrows"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/navtype")) {
+            $optionItems['navtype'] = $this->escapeHtml($this->getVar("gallery/navtype"));
+        }
+        if ($this->getVar("gallery/thumbmargin")) {
+            $optionItems['thumbmargin'] = filter_var($this->getVar("gallery/thumbmargin"), FILTER_VALIDATE_INT);
+        }
+        if ($this->getVar("gallery/transition/effect")) {
+            $optionItems['transition'] = $this->escapeHtml($this->getVar("gallery/transition/effect"));
+        }
+        if ($this->getVar("gallery/transition/duration")) {
+            $optionItems['transitionduration'] = filter_var(
+                $this->getVar("gallery/transition/duration"),
+                FILTER_VALIDATE_INT
+            );
+        }
+
+        $optionItems['width'] = filter_var(
+            $this->getImageAttribute('product_page_image_medium', 'width'),
+            FILTER_VALIDATE_INT
+        );
+        $optionItems['thumbwidth'] = filter_var(
+            $this->getImageAttribute('product_page_image_small', 'width'),
+            FILTER_VALIDATE_INT
+        );
+        $imgHeight = $this->getImageAttribute('product_page_image_medium', 'height')
+            ?: $this->getImageAttribute('product_page_image_medium', 'width');
+        if ($imgHeight) {
+            $optionItems['height'] = filter_var($imgHeight, FILTER_VALIDATE_INT);
+        }
+        $thumbHeight = $this->getImageAttribute('product_page_image_small', 'height')
+            ?: $this->getImageAttribute('product_page_image_small', 'width');
+        if ($thumbHeight) {
+            $optionItems['thumbheight'] = filter_var($thumbHeight, FILTER_VALIDATE_INT);
+        }
+
+        return json_encode($optionItems);
+    }
+
+    /**
+     * Retrieve gallery fullscreen options in JSON format
+     *
+     * @return string
+     * @SuppressWarnings(PHPMD.CyclomaticComplexity)
+     * @SuppressWarnings(PHPMD.NPathComplexity)
+     */
+    public function getGalleryFSOptionsJson()
+    {
+        $fsOptionItems = null;
+
+        if ($this->getVar("gallery/fullscreen/nav")) {
+            $fsOptionItems['nav'] = $this->escapeHtml($this->getVar("gallery/fullscreen/nav"));
+        }
+        if ($this->getVar("gallery/fullscreen/loop")) {
+            $fsOptionItems['loop'] = filter_var($this->getVar("gallery/fullscreen/loop"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/fullscreen/keyboard")) {
+            $fsOptionItems['keyboard'] = filter_var(
+                $this->getVar("gallery/fullscreen/keyboard"),
+                FILTER_VALIDATE_BOOLEAN
+            );
+        }
+        if ($this->getVar("gallery/fullscreen/arrows")) {
+            $fsOptionItems['arrows'] = filter_var($this->getVar("gallery/fullscreen/arrows"), FILTER_VALIDATE_BOOLEAN);
+        }
+        if ($this->getVar("gallery/fullscreen/caption")) {
+            $fsOptionItems['showCaption'] = filter_var(
+                $this->getVar("gallery/fullscreen/caption"),
+                FILTER_VALIDATE_BOOLEAN
+            );
+        }
+        if ($this->getVar("gallery/fullscreen/navdir")) {
+            $fsOptionItems['navdir'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navdir"));
+        }
+        if ($this->getVar("gallery/fullscreen/navarrows")) {
+            $fsOptionItems['navarrows'] = filter_var(
+                $this->getVar("gallery/fullscreen/navarrows"),
+                FILTER_VALIDATE_BOOLEAN
+            );
+        }
+        if ($this->getVar("gallery/fullscreen/navtype")) {
+            $fsOptionItems['navtype'] = $this->escapeHtml($this->getVar("gallery/fullscreen/navtype"));
+        }
+        if ($this->getVar("gallery/fullscreen/thumbmargin")) {
+            $fsOptionItems['thumbmargin'] = filter_var(
+                $this->getVar("gallery/fullscreen/thumbmargin"),
+                FILTER_VALIDATE_INT
+            );
+        }
+        if ($this->getVar("gallery/fullscreen/transition/effect")) {
+            $fsOptionItems['transition'] = $this->escapeHtml($this->getVar("gallery/fullscreen/transition/effect"));
+        }
+        if ($this->getVar("gallery/fullscreen/transition/duration")) {
+            $fsOptionItems['transitionduration'] = filter_var(
+                $this->getVar("gallery/fullscreen/transition/duration"),
+                FILTER_VALIDATE_INT
+            );
+        }
+
+        return json_encode($fsOptionItems);
+    }
+
     /**
      * Retrieve gallery url
      *
diff --git a/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php b/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
index ae5176e78df7b..138b435216dc8 100644
--- a/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
+++ b/app/code/Magento/Catalog/Test/Unit/Block/Product/View/GalleryTest.php
@@ -5,6 +5,9 @@
  */
 namespace Magento\Catalog\Test\Unit\Block\Product\View;
 
+/**
+ * @SuppressWarnings(PHPMD.CouplingBetweenObjects)
+ */
 class GalleryTest extends \PHPUnit\Framework\TestCase
 {
     /**
@@ -37,6 +40,26 @@ class GalleryTest extends \PHPUnit\Framework\TestCase
      */
     protected $jsonEncoderMock;
 
+    /**
+     * @var \Magento\Framework\TestFramework\Unit\Helper\ObjectManager
+     */
+    protected $objectManager;
+
+    /**
+     * @var \Magento\Framework\Config\View
+     */
+    protected $configView;
+
+    /**
+     * @var \Magento\Framework\View\Config
+     */
+    protected $viewConfig;
+
+    /**
+     * @var \Magento\Framework\Escaper
+     */
+    protected $escaper;
+
     protected function setUp()
     {
         $this->mockContext();
@@ -75,6 +98,26 @@ protected function mockContext()
         $this->context->expects($this->any())
             ->method('getRegistry')
             ->willReturn($this->registry);
+
+        $this->objectManager = new \Magento\Framework\TestFramework\Unit\Helper\ObjectManager($this);
+
+        $this->escaper = $this->objectManager->getObject(\Magento\Framework\Escaper::class);
+        $this->context->expects($this->any())
+            ->method('getEscaper')
+            ->willReturn($this->escaper);
+        $this->viewConfig = $this->getMockBuilder(\Magento\Framework\View\Config::class)
+            ->disableOriginalConstructor()
+            ->getMock();
+        $this->configView = $this->getMockBuilder(\Magento\Framework\Config\View::class)
+            ->disableOriginalConstructor()
+            ->getMock();
+
+        $this->viewConfig->expects($this->any())
+            ->method('getViewConfig')
+            ->willReturn($this->configView);
+        $this->context->expects($this->any())
+            ->method('getViewConfig')
+            ->willReturn($this->viewConfig);
     }
 
     public function testGetGalleryImagesJsonWithLabel()
@@ -262,4 +305,109 @@ private function getImagesCollectionWithPopulatedDataObject($hasLabel)
 
         return $collectionMock;
     }
+
+    public function testGalleryOptions()
+    {
+        $configMap = [
+            ['Magento_Catalog', 'gallery/nav', 'thumbs'],
+            ['Magento_Catalog', 'gallery/loop', 'false'],
+            ['Magento_Catalog', 'gallery/keyboard', 'true'],
+            ['Magento_Catalog', 'gallery/arrows', 'true'],
+            ['Magento_Catalog', 'gallery/caption', 'false'],
+            ['Magento_Catalog', 'gallery/allowfullscreen', 'true'],
+            ['Magento_Catalog', 'gallery/navdir', 'horizontal'],
+            ['Magento_Catalog', 'gallery/navarrows', 'true'],
+            ['Magento_Catalog', 'gallery/navtype', 'slides'],
+            ['Magento_Catalog', 'gallery/thumbmargin', '5'],
+            ['Magento_Catalog', 'gallery/transition/effect', 'slide'],
+            ['Magento_Catalog', 'gallery/transition/duration', '500'],
+        ];
+
+        $mediaAttributesMap = [
+            [
+                'Magento_Catalog',
+                \Magento\Catalog\Helper\Image::MEDIA_TYPE_CONFIG_NODE,
+                'product_page_image_medium',
+                [
+                    'height' => 100,
+                    'width' => 200
+                ]
+            ],
+            [
+                'Magento_Catalog',
+                \Magento\Catalog\Helper\Image::MEDIA_TYPE_CONFIG_NODE,
+                'product_page_image_small',
+                [
+                    'height' => 300,
+                    'width' => 400
+                ]
+            ],
+        ];
+
+        $this->configView->expects($this->any())
+            ->method('getVarValue')
+            ->will($this->returnValueMap($configMap));
+        $this->configView->expects($this->any())
+            ->method('getMediaAttributes')
+            ->will($this->returnValueMap($mediaAttributesMap));
+
+        $json = $this->model->getGalleryOptionsJson();
+        $decodedJson = json_decode($json, true);
+
+        $this->assertEquals('thumbs', $decodedJson['nav']);
+        $this->assertEquals(false, $decodedJson['loop']);
+        $this->assertEquals(true, $decodedJson['keyboard']);
+        $this->assertEquals(true, $decodedJson['arrows']);
+        $this->assertEquals(false, $decodedJson['showCaption']);
+        $this->assertEquals(true, $decodedJson['allowfullscreen']);
+        $this->assertEquals('horizontal', $decodedJson['navdir']);
+        $this->assertEquals(true, $decodedJson['navarrows']);
+        $this->assertEquals('slides', $decodedJson['navtype']);
+        $this->assertEquals(5, $decodedJson['thumbmargin']);
+        $this->assertEquals('slide', $decodedJson['transition']);
+        $this->assertEquals(500, $decodedJson['transitionduration']);
+        $this->assertEquals(100, $decodedJson['height']);
+        $this->assertEquals(200, $decodedJson['width']);
+        $this->assertEquals(300, $decodedJson['thumbheight']);
+        $this->assertEquals(400, $decodedJson['thumbwidth']);
+    }
+
+    public function testGalleryFSOptions()
+    {
+        $configMap = [
+            ['Magento_Catalog', 'gallery/fullscreen/nav', 'false'],
+            ['Magento_Catalog', 'gallery/fullscreen/loop', 'true'],
+            ['Magento_Catalog', 'gallery/fullscreen/keyboard', 'false'],
+            ['Magento_Catalog', 'gallery/fullscreen/arrows', 'false'],
+            ['Magento_Catalog', 'gallery/fullscreen/caption', 'true'],
+            ['Magento_Catalog', 'gallery/fullscreen/navdir', 'vertical'],
+            ['Magento_Catalog', 'gallery/fullscreen/navarrows', 'false'],
+            ['Magento_Catalog', 'gallery/fullscreen/navtype', 'thumbs'],
+            ['Magento_Catalog', 'gallery/fullscreen/thumbmargin', '10'],
+            ['Magento_Catalog', 'gallery/fullscreen/transition/effect', 'dissolve'],
+            ['Magento_Catalog', 'gallery/fullscreen/transition/duration', '300']
+        ];
+
+        $this->configView->expects($this->any())
+            ->method('getVarValue')
+            ->will($this->returnValueMap($configMap));
+
+        $json = $this->model->getGalleryFSOptionsJson();
+        $decodedJson = json_decode($json, true);
+
+        //Note, this tests the special case for nav variable set to false. It
+        //Should not be converted to boolean.
+        $this->assertEquals('false', $decodedJson['nav']);
+
+        $this->assertEquals(true, $decodedJson['loop']);
+        $this->assertEquals(false, $decodedJson['arrows']);
+        $this->assertEquals(false, $decodedJson['keyboard']);
+        $this->assertEquals(true, $decodedJson['showCaption']);
+        $this->assertEquals('vertical', $decodedJson['navdir']);
+        $this->assertEquals(false, $decodedJson['navarrows']);
+        $this->assertEquals(10, $decodedJson['thumbmargin']);
+        $this->assertEquals('thumbs', $decodedJson['navtype']);
+        $this->assertEquals('dissolve', $decodedJson['transition']);
+        $this->assertEquals(300, $decodedJson['transitionduration']);
+    }
 }
diff --git a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
index b2fa8e9aaf80f..8b178d9981d97 100644
--- a/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
+++ b/app/code/Magento/Catalog/view/frontend/templates/product/view/gallery.phtml
@@ -43,79 +43,8 @@
                 "mixins":["magnifier/magnify"],
                 "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
                 "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
-                "options": {
-                    "nav": "<?= $block->escapeHtml($block->getVar("gallery/nav")) ?>",
-                    <?php if (($block->getVar("gallery/loop"))) : ?>
-                        "loop": <?= $block->escapeHtml($block->getVar("gallery/loop")) ?>,
-                    <?php endif; ?>
-                    <?php if (($block->getVar("gallery/keyboard"))) : ?>
-                        "keyboard": <?= $block->escapeHtml($block->getVar("gallery/keyboard")) ?>,
-                    <?php endif; ?>
-                    <?php if (($block->getVar("gallery/arrows"))) : ?>
-                        "arrows": <?= $block->escapeHtml($block->getVar("gallery/arrows")) ?>,
-                    <?php endif; ?>
-                    <?php if (($block->getVar("gallery/allowfullscreen"))) : ?>
-                        "allowfullscreen": <?= $block->escapeHtml($block->getVar("gallery/allowfullscreen")) ?>,
-                    <?php endif; ?>
-                    <?php if (is_bool($block->getVar("gallery/caption"))) : ?>
-                        "showCaption": <?= /* @noEscape */ $block->getVar("gallery/caption") ? 'true' : 'false'; ?>,
-                    <?php endif; ?>
-                    <?php
-                        $imgWidth = $block->getImageAttribute('product_page_image_medium', 'width');
-                        $thumbWidth = $block->getImageAttribute('product_page_image_small', 'width');
-                    ?>
-                        "width": "<?= $block->escapeHtml($imgWidth) ?>",
-                        "thumbwidth": "<?= $block->escapeHtml($thumbWidth) ?>",
-                    <?php
-                        $thumbHeight = $block->getImageAttribute('product_page_image_small', 'height')
-                            ?: $block->getImageAttribute('product_page_image_small', 'width');
-                    ?>
-                    <?php if ($thumbHeight) : ?>
-                        "thumbheight": <?= $block->escapeHtml($thumbHeight); ?>,
-                    <?php endif; ?>
-                    <?php if (($block->getVar("gallery/thumbmargin"))) : ?>
-                        "thumbmargin": <?= (int)$block->getVar("gallery/thumbmargin"); ?>,
-                    <?php endif; ?>
-                    <?php
-                        $imgHeight = $block->getImageAttribute('product_page_image_medium', 'height')
-                            ?: $block->getImageAttribute('product_page_image_medium', 'width')
-                    ?>
-                    <?php if ($imgHeight) : ?>
-                        "height": <?= $block->escapeHtml($imgHeight); ?>,
-                    <?php endif; ?>
-                    <?php if ($block->getVar("gallery/transition/duration")) : ?>
-                        "transitionduration": <?= $block->escapeHtml($block->getVar("gallery/transition/duration")) ?>,
-                    <?php endif; ?>
-                    "transition": "<?= $block->escapeHtml($block->getVar("gallery/transition/effect")) ?>",
-                    <?php if (($block->getVar("gallery/navarrows"))) : ?>
-                        "navarrows": <?= $block->escapeHtml($block->getVar("gallery/navarrows")) ?>,
-                    <?php endif; ?>
-                    "navtype": "<?= $block->escapeHtml($block->getVar("gallery/navtype")) ?>",
-                    "navdir": "<?= $block->escapeHtml($block->getVar("gallery/navdir")) ?>"
-                },
-                "fullscreen": {
-                    "nav": "<?= $block->escapeHtml($block->getVar("gallery/fullscreen/nav")) ?>",
-                    <?php if ($block->getVar("gallery/fullscreen/loop")) : ?>
-                        "loop": <?= $block->escapeHtml($block->getVar("gallery/fullscreen/loop")) ?>,
-                    <?php endif; ?>
-                    "navdir": "<?= $block->escapeHtml($block->getVar("gallery/fullscreen/navdir")) ?>",
-                    <?php if ($block->getVar("gallery/transition/navarrows")) : ?>
-                        "navarrows": <?= $block->escapeHtml($block->getVar("gallery/fullscreen/navarrows")) ?>,
-                    <?php endif; ?>
-                    "navtype": "<?= $block->escapeHtml($block->getVar("gallery/fullscreen/navtype")) ?>",
-                    <?php if ($block->getVar("gallery/fullscreen/arrows")) : ?>
-                        "arrows": <?= $block->escapeHtml($block->getVar("gallery/fullscreen/arrows")) ?>,
-                    <?php endif; ?>
-                    <?php if (is_bool($block->getVar("gallery/fullscreen/caption"))) : ?>
-                        <?php $showCaption = $block->getVar("gallery/fullscreen/caption") ? 'true' : 'false'; ?>
-                        "showCaption": <?= /* @noEscape */ $showCaption ?>,
-                    <?php endif; ?>
-                    <?php if ($block->getVar("gallery/fullscreen/transition/duration")) : ?>
-                        "transitionduration": <?=
-                        $block->escapeHtml($block->getVar("gallery/fullscreen/transition/duration")) ?>,
-                    <?php endif; ?>
-                    "transition": "<?= $block->escapeHtml($block->getVar("gallery/fullscreen/transition/effect")) ?>"
-                },
+                "options": <?= /* @noEscape */ $block->getGalleryOptionsJson() ?>,
+                "fullscreen": <?= /* @noEscape */ $block->getGalleryFSOptionsJson() ?>,
                 "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
             }
         }
diff --git a/dev/tests/integration/testsuite/Magento/Catalog/Block/Product/View/GalleryTest.php b/dev/tests/integration/testsuite/Magento/Catalog/Block/Product/View/GalleryTest.php
deleted file mode 100644
index c97dc821913f9..0000000000000
--- a/dev/tests/integration/testsuite/Magento/Catalog/Block/Product/View/GalleryTest.php
+++ /dev/null
@@ -1,50 +0,0 @@
-<?php
-/**
- * Copyright © Magento, Inc. All rights reserved.
- * See COPYING.txt for license details.
- */
-declare(strict_types=1);
-
-namespace Magento\Catalog\Block\Product\View;
-
-use Magento\Catalog\Api\Data\ProductInterface;
-use Magento\Catalog\Api\ProductRepositoryInterface;
-use Magento\Framework\ObjectManagerInterface;
-use Magento\Framework\View\LayoutInterface;
-use Magento\TestFramework\Helper\Bootstrap;
-
-class GalleryTest extends \PHPUnit\Framework\TestCase
-{
-    /**
-     * @var ObjectManagerInterface
-     */
-    private $objectManager;
-
-    protected function setUp()
-    {
-        $this->objectManager = Bootstrap::getObjectManager();
-    }
-    /**
-     * Tests rendered gallery block.
-     *
-     * @magentoDataFixture Magento/Catalog/_files/product_with_image.php
-     * @magentoAppArea frontend
-     */
-    public function testHtml()
-    {
-        /** @var ProductRepositoryInterface $productRepository */
-        $productRepository = $this->objectManager->create(ProductRepositoryInterface::class);
-        /** @var ProductInterface $product */
-        $product = $productRepository->get('simple');
-        /** @var LayoutInterface $layout */
-        $layout = $this->objectManager->get(LayoutInterface::class);
-        /** @var Gallery $block */
-        $block = $layout->createBlock(Gallery::class);
-        $block->setData('product', $product);
-        $block->setTemplate("Magento_Catalog::product/view/gallery.phtml");
-
-        $showCaption = $block->getVar('gallery/caption');
-
-        self::assertContains('"showCaption": ' . $showCaption, $block->toHtml());
-    }
-}