Ttdfjt

Word for an event that will likely never happen again

Is there a standardised way to check fake news?

A torrent of foreign terms

If clocks themselves are based on light signals, wouldn't we expect the measured speed of light to always be the same constant?

How to disable "Completion time:..." in SQL Server Messages window

Is There a Tool to Select Files to Download From an Org in VSCode?

How does proof assistant organize knowledge?

Simplification of numbers

Super Duper Vdd stiffening required on 555 timer, what is the best way?

Are differences between uniformly distributed numbers uniformly distributed?

Why is the result of ('b'+'a'+ + 'a' + 'a').toLowerCase() 'banana'?

How to assign many blockers at the same time?

If "more guns less crime", how do gun advocates explain that the EU has less crime than the US?

Took GRE two times, same scores with minor differences - worth sending both?

Is there a command to install basic applications on Ubuntu 16.04?

Why did I get only 5 points even though I won?

The cat exchanges places with a drawing of the cat

Do beef farmed pastures net remove carbon emissions?

PhD advisor lost funding, need advice

Understanding the point of a kölsche Witz

Can the ground attached to neutral fool a receptacle tester?

Why is there a large performance impact when looping over an array over 240 elements?

Why did Gandalf use a sword against the Balrog?

Is it okay for a ticket seller in the USA to refuse to give you your change, keep it for themselves and claim it's a tip?

Fotorama Gallery - How to minimize the frame size for product base image

Magento 2 Fotorama - Customise product gallery thumbnail scrollFotorama zoom functionality add for child product images of group product : M2Magento 2 : How reduce size of fotoroma gallery icons on product detail pageMagento 2: Problems Extending Product Image GalleryEdit Gallery Images Json (Fotorama on Product Pages)Set the default image zoom for full screen in magento 2.x

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

1

I'm struggling to minimize the frame width and height for the product base image gallery (Fotorama).

I have inspected the browser code and noticed that if I change the following width and height the related Fotorama Frame size change however, did not found the actual location to customized the white border size (width and height):

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

Basically when I change the above width: 707px; height: 707px; through browser inspect I can see the changes but no where found the actual file or location to change the value.

fotorama

share|improve this question

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

add a comment | 

1

I'm struggling to minimize the frame width and height for the product base image gallery (Fotorama).

I have inspected the browser code and noticed that if I change the following width and height the related Fotorama Frame size change however, did not found the actual location to customized the white border size (width and height):

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

Basically when I change the above width: 707px; height: 707px; through browser inspect I can see the changes but no where found the actual file or location to change the value.

fotorama

share|improve this question

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

add a comment | 

I'm struggling to minimize the frame width and height for the product base image gallery (Fotorama).

I have inspected the browser code and noticed that if I change the following width and height the related Fotorama Frame size change however, did not found the actual location to customized the white border size (width and height):

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

Basically when I change the above width: 707px; height: 707px; through browser inspect I can see the changes but no where found the actual file or location to change the value.

fotorama

share|improve this question

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

<div class="fotorama__stage" data-fotorama-stage="fotorama_stage" style="**width: 707px; height: 707px;**">

<div class="fotorama__stage__shaft fotorama__grab" tabindex="0" data-gallery-role="stage-shaft" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px); margin-left: 0px; width: 707px;">

share|improve this question

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

share|improve this question

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

edited Nov 1 '17 at 6:26

Teja Bhagavan Kollepara

3,05044 gold badges2121 silver badges5151 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

asked Oct 31 '17 at 17:52

AlamAlam

622 bronze badges

2 Answers
2

active

oldest

votes

2

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
 <image id="product_page_image_medium" type="image">
 <width>300</width>
 <height>300</height>
 </image>
</images>

Please Change Option Value in

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

<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": 
 "maxheight": "700", // Add your value here
 
 
 

Thanks

share|improve this answer

edited Nov 1 '17 at 9:32

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Moin Malek, it's only change the base image size not the frame or white border width & height. My only concern is to minimised the white extra space not the image size...
  
  – Alam
  Nov 1 '17 at 8:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hello @Alam Please Find edited answer
  
  – Moin Malek
  Nov 1 '17 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much for your suggested code it is working for the height but not width. I wanted H: 515 and W: 515. Very appreciated.
  
  – Alam
  Sep 5 '18 at 10:27
  

  
  
  
  

add a comment | 

0

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": 
 "something": "value",
 "maxheight": "700" // Add your value here
 

share|improve this answer

answered Aug 1 at 15:37

FrancisBFrancisB

1

add a comment | 

Your Answer

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "479"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: false,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fmagento.stackexchange.com%2fquestions%2f199494%2ffotorama-gallery-how-to-minimize-the-frame-size-for-product-base-image%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
 <image id="product_page_image_medium" type="image">
 <width>300</width>
 <height>300</height>
 </image>
</images>

Please Change Option Value in

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

<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": 
 "maxheight": "700", // Add your value here
 
 
 

Thanks

share|improve this answer

edited Nov 1 '17 at 9:32

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Moin Malek, it's only change the base image size not the frame or white border width & height. My only concern is to minimised the white extra space not the image size...
  
  – Alam
  Nov 1 '17 at 8:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hello @Alam Please Find edited answer
  
  – Moin Malek
  Nov 1 '17 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much for your suggested code it is working for the height but not width. I wanted H: 515 and W: 515. Very appreciated.
  
  – Alam
  Sep 5 '18 at 10:27
  

  
  
  
  

add a comment | 

2

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
 <image id="product_page_image_medium" type="image">
 <width>300</width>
 <height>300</height>
 </image>
</images>

Please Change Option Value in

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

<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": 
 "maxheight": "700", // Add your value here
 
 
 

Thanks

share|improve this answer

edited Nov 1 '17 at 9:32

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thanks Moin Malek, it's only change the base image size not the frame or white border width & height. My only concern is to minimised the white extra space not the image size...
  
  – Alam
  Nov 1 '17 at 8:15
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Hello @Alam Please Find edited answer
  
  – Moin Malek
  Nov 1 '17 at 8:51
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank you so much for your suggested code it is working for the height but not width. I wanted H: 515 and W: 515. Very appreciated.
  
  – Alam
  Sep 5 '18 at 10:27
  

  
  
  
  

add a comment | 

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes:

<images module="Magento_Catalog">
 <image id="product_page_image_medium" type="image">
 <width>300</width>
 <height>300</height>
 </image>
</images>

Please Change Option Value in

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

<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": 
 "maxheight": "700", // Add your value here
 
 
 

Thanks

share|improve this answer

edited Nov 1 '17 at 9:32

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

<images module="Magento_Catalog">
 <image id="product_page_image_medium" type="image">
 <width>300</width>
 <height>300</height>
 </image>
</images>

app/design/frontend/Magento/Luma/Magento_Catalog/templates/product/view/gallery.phtml

<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": 
 "maxheight": "700", // Add your value here
 
 
 

share|improve this answer

edited Nov 1 '17 at 9:32

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

answered Oct 31 '17 at 18:10

Moin MalekMoin Malek

52366 silver badges2121 bronze badges

0

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": 
 "something": "value",
 "maxheight": "700" // Add your value here
 

share|improve this answer

answered Aug 1 at 15:37

FrancisBFrancisB

1

add a comment | 

0

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": 
 "something": "value",
 "maxheight": "700" // Add your value here
 

share|improve this answer

answered Aug 1 at 15:37

FrancisBFrancisB

1

add a comment | 

Watch out for the , after your value. Its not needed if you add it as the last option.

"options": 
 "something": "value",
 "maxheight": "700" // Add your value here
 

share|improve this answer

answered Aug 1 at 15:37

FrancisBFrancisB

1

"options": 
 "something": "value",
 "maxheight": "700" // Add your value here
 

share|improve this answer

answered Aug 1 at 15:37

FrancisBFrancisB

1

answered Aug 1 at 15:37

FrancisBFrancisB

1

answered Aug 1 at 15:37

FrancisBFrancisB

1