Высота у блоков миниатюр изображений.

#1 22 октября 2021 в 22:04

Приветствую! Настраиваю я поля, как вдруг вижу так баг (не думаю что так и задумано) — миниатюры изображения не имеют высоты, из-за чего блоки встают в строчку. Скриншот прилагаю:
Изображение

покопавшись в dev tools понял что блок содержащий превьюшки не имеет ни ширины, ни высоты. Имеет 4 класса:

  • field
  • ft_images
  • f_photo
  • none_field 

При таких настройках поля:
Изображение

В том же dev tools дописываю блоку высоту (a именно 74px, в настройках похоже рамка не учитывается :/ ) — всё решается. 
В какой файл и в какой конкретный класс мне нужно дописать эту высоту? 

#2 23 октября 2021 в 00:04

В списке авто 256? В записи можно 900 на 1200 если важен текст и тд. В компоненты — загрузка можно уменьшить качество и не сохранять оригиналы — будут меньше весить .

#3 23 октября 2021 в 09:22

В списке авто 256

noname

В списке отображение не нужно, забыл уточнить, прошу прощения :)

В записи можно 900 на 1200

noname

Пробовал, но вот беда — высоты родительскому блоку это не даёт и остальные поля (в записи) остаются справа, хотя должны быть снизу.

#4 23 октября 2021 в 10:10

По началу тоже мучался с Набором изображений, потом пришел к выводу, что нужно использовать слайдеры. Есть addons.instantcms.ru/addons/goodmade-slider-thumbs.html, но выше 2.13.1 может не работать, был когда-то «OWL-слайдер набора изображений отображение». В Новая доска (обновление Расширение доски) есть слайдер, его можно юзать и в других Типах контента.

#5 23 октября 2021 в 13:29

нужно использовать слайдеры

noname

А можно ли, обойтись без этого? То есть наверняка же есть scss файлик, в котором все эти классы прописаны, только я никак не могу найти где :(

#6 23 октября 2021 в 13:48

\templates\modern\scss, \templates\modern\css\theme.css 

#7 23 октября 2021 в 14:17

Настраиваю я поля, как вдруг вижу так баг (не думаю что так и задумано) — миниатюры изображения не имеют высоты

Panda58dev

При том функционале, который заложен в коробке, никакого бага там нет и указания высоты миниатюры не требуют. Просто правильно настройте обтекания для поля и его соседей или ищите проблему в своём шаблоне (если таковой имеет место).

По началу тоже мучался с Набором изображений, потом пришел к выводу, что нужно использовать слайдеры.

noname

Шикарный вывод!))

#8 23 октября 2021 в 14:56

Шикарный вывод!))

Олег Васильевич я

А зачем себя истязать всякими пык-мык и портить последние нервы ? 

#9 23 октября 2021 в 18:48

всякими пык-мык и портить последние нервы

noname

Костыли — наше всё! 😁

Добавлено спустя 59 минут

\templates\modern\css\theme.css 

noname

Изображение

Весёлая задачка 😕

Добавлено спустя 43 минуты

Товарищи, а есть ли возможность отключить scss? 

P.S.: пытался поставить Light Gallery, но почему то пакетный менеджер не хочет принимать этот модуль, другие архивы ест на ура :(

#10 23 октября 2021 в 20:30

Товарищи, а есть ли возможность отключить scss? 

Panda58dev

Конечно есть. Но зачем?

Пишите ваши стили в файл \templates\modern\scss\theme\_custom.scss

Потом в настройках «Скомпилировать и сохранить».

#11 23 октября 2021 в 21:14

 Ris, «а что, так можно было что ли!»))
написал

  1. .ft_images {
  2. height: 74px;
  3. }

но что-то не работает, хотя компиляция вроде прошла нормально. Или SCSS не может обработать ванильный CSS?

#12 23 октября 2021 в 21:17

но что-то не работает

Panda58dev

А как оно должно было работать? 

Ткните правой кнопкой в этот элемент — Посмотреть код. Появилось ли у элемента с классом .ft_images свойство height: 74px; ?

#13 23 октября 2021 в 21:20

Ткните правой кнопкой в этот элемент — Посмотреть код.

Ris

Я так то умею юзать dev tools :) 
В том то и дело, что нет, не появилось. У этого класса вообще нет никаких стилей. 

#14 23 октября 2021 в 21:42

 Panda58dev

Так попробуйте:

  1. .ft_image img{
  2. height: 74px !important;
  3. }
#15 23 октября 2021 в 22:05

Так попробуйте:

Ris

Да нет, с самими изображениями всё хорошо, а вот с родительским блоком — нет :(
Попробовал — никакого толку, повышение приоритетности тоже не помогает. 

Добавлено спустя 2 минуты

Вёрстка там примерно такая:

  1. <div class="... ft_images ...">
  2. <div class="value">
  3. <a href="#"><img src="#"></a>
  4. <a href="#"><img src="#"></a>
  5. <a href="#"><img src="#"></a>
  6. </div>
  7. </div>
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.