Magento 2 - Fotorama
У меня проблема с ProductSlider на странице Productdetail. Я не знаю, как установить ширину контейнера & высоты.
Я нашел некоторую конфигурацию для плагина Fotorama, но там нет ничего о ширине и высоте.
Мои Productimages имеют другие измерения.
<div class="fotorama__stage" style="width: 581px; height: 581px; line-height: 581px;">
это размеры из плагина.
Размеры моего изображения 530px x 350px
, поэтому слишком много пустого пространства (сверху/снизу).
Есть идеи?
Ответы
Ответ 1
Вам необходимо отредактировать следующий файл: app/design/vendor/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
}
}
}
}
Ответ 2
Перезаписать vendor\magento\theme-frontend-luma\etc\view.xml
У меня есть следующее, например: app\design\frontend\[CustomTheme]\default\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="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>700</width>
<height>420</height>
</image>
<image id="product_page_main_image" type="image">
<width>700</width>
<height>420</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>700</width>
<height>420</height>
</image>
</images>
</media>
</view>
Это приведет к тому, что размер fotorama__stage
будет меньше - он будет регулироваться в зависимости от размера изображения.
Ответ 3
Решение от Florin Marin работало для меня, но без изменения ширины fotorama, поэтому я копал больше и для меня - лучший результат заключался в добавлении этого в мой менее тематический файл _theme.less
.page-layout-2columns-right .product.media {
width: 20%
}
.page-layout-2columns-right .product-info-main {
width: 78%;
}
Я также изменяю размер изображений в приложении/дизайне/интерфейсе/[Custom_Vendor]/[CustomTheme]\etc\view.xml, как и в adpro в его ответе.
<images module="Magento_Catalog">
<image id="product_page_image_large" type="image"/>
<image id="product_page_image_medium" type="image">
<width>150</width>
<height>150</height>
</image>
<image id="product_page_main_image" type="image">
<width>150</width>
<height>150</height>
</image>
<image id="product_page_main_image_default" type="image">
<width>150</width>
<height>150</height>
</image>
</images>
в режиме разработчика delete pub/static/frontend/* и после изменений в файле xml resize images: php bin/magento catalog: images: resize
Ответ 4
Решение adpro отлично работает на magento 2.3. большое спасибо!
Ответ 5
Добавьте это в свой файл LESS/CSS и очистите кеш.
.product .fotorama__stage__frame .fotorama__img {
top: 0 !important;
transform: none !important;
-webkit-transform: none !important;
position: static;
margin-top: auto !important;
}