Помощь на сайте с CSS с галереей и превью?

Question

[prokesha]

Добрый день! Подскажите как сделать и в каком фаиле добавить код CSS ?

Суть проблемы в том, что разъезжаются картинки, а надо что бы были все в одном размере, если картинки режешь в один размер то все хорошо, но это не очень удобно!

Ссылка на сайт фаворит керамики

Пример с косяком:


Пример без косяка, но надо резать картинки



В шаблоне вот такой кусок кода

<div class="col-12 col-md-6">[[menutitle]]
			<div class="collection-media-gallery">
				<div class="carousel owl-carousel">
 [[migx.parse?
	&input=`[[*images]]`
	&tpl=`@INLINE <a class="zoom-link" href="[[+image]]" data-fancybox="collection-media-gallery"><img src="[[+image]]" alt=""></a>`]]
	</div>
 </div>
</div>

А модуль использую bThumb для резки изображения

Да сайт рабочий,

Вот я и хотел спросить помощи, что надо добавить CSS в Owl Carousel галерея

Comments

[Ankhena]

Чтобы картинки были в одном размере:
- нарезать их в одном размере
- сделать блоки одинаковых размеров и использовать object-fit для вложенных картинок

Но помнить, что геометрию и пропорции никто не отменял.

[Антон Тарасов]

1. просто нарезать квадратами, однако, кое-что будет утрачено:

@INLINE <a class="zoom-link" href="[[+image]]" data-fancybox="collection-media-gallery">
    <img src="[[+image:pthumb=`w=100&h=100&zc=1`]]" alt="">
</a>

2.CSS плавающая ширина:

<link rel="stylesheet" href="/path/owl.carousel.min.css">
<div class="owl-thumbs owl-carousel">
  <div class="thumb"><img src="/img/1h.jpg" alt=""></div>
  <div class="thumb"><img src="/img/2v.jpg" alt=""></div>
  <div class="thumb"><img src="/img/3h.jpg" alt=""></div>
</div>
<script src="/path/jquery.min.js"></script>
<script src="/path/owl.carousel.min.js"></script>
<script>
$('.owl-thumbs').owlCarousel({
  items: 6,
  margin: 8,
  nav: true,
  dots: false,
  lazyLoad: true,
  responsive:{0:{items:4},768:{items:6}}
});
</script>
<style>
.owl-thumbs .thumb{
  height: 100px;               
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: #f6f6f6;
  border-radius: 8px;
}
.owl-thumbs .thumb img{
  height: 100%;
  width: auto;               
  display: block;
}
</style>

3. даже лучше так:

.collection-media-gallery .owl-carousel a {
  display: block;
  aspect-ratio: 1 / 1;       
  overflow: hidden;
  border-radius: 8px;        
  background: #f5f5f5;       
}

.collection-media-gallery .owl-carousel a img {
  width: 100%;
  height: 100%;
  object-fit: cover;        
  object-position: center;
  display: block;
}

[Антон Тарасов]

1. Если вы отметили тег MODX тогда интересно, прежде всего - чем и как режете превью? как их выводите, какой сниппет используете? какой используется для вывода миниатюр? Покидайте все сюда пожалуйста прежде, чтобы можно было дать более обстоятельный ответ.
2. Код CSS(он уже есть у вас?) добавьте в стилевой файл(на сайте это style.css)
3. У вас Owl Carousel галерея, под нее можно настроить

[prokesha]

В шаблоне вот такой кусок кода

<div class="col-12 col-md-6">[[menutitle]]
			<div class="collection-media-gallery">
				<div class="carousel owl-carousel">
 [[migx.parse?
	&input=`[[*images]]`
	&tpl=`@INLINE <a class="zoom-link" href="[[+image]]" data-fancybox="collection-media-gallery"><img src="[[+image]]" alt=""></a>`]]
	</div>
 </div>
</div>

А модуль использую bThumb

[prokesha]

@an-tar

@INLINE <a class="zoom-link" href="[[+image]]" data-fancybox="collection-media-gallery">
    <img src="[[+image:pthumb=`w=100&h=100&zc=1`]]" alt="">
</a>

это почему, то не работает .. пропадает куда картинка, сейчас попробую ваш CSS поменять .. может получится .. там только CSS мне кажется поможет )

[prokesha]

Ankhena, А можете подсказать какой именно код CSS написать ?

Я честно, не сиен в нем!

Как я понял у меня CSS Owl Carousel какой и куда код вложить?

[Антон Тарасов]

prokesha, куда пропадает? если компонент pThumb установлен, все должно быть. Ну, попробуйте другие варианты, так например:)
[[!+image:pThumb=`w=100&h=100&zc=1`]]

Answer 1

[Александр Васильев]

тут modx не причем.
1. найди эти стили https://favoritceramica.ru/tmpl/css/style.css
2. напиши там в конце

.owl-carousel .owl-item img{
    aspect-ratio: 4 / 3;
    height: 100%;
    object-fit: cover;
}

Comments

[prokesha]

Спасибо, помогло! Только главный баннер увеличило в 2 раза !

[Александр Васильев]

prokesha, далее по обстановке, найди специфичность и работай с ней