Tiles Image Gallery

Почему нельзя использовать плиточную галерею изображений, если изображений всего два? Отображается только одно «миниатюрное» изображение. Но когда изображений три и больше, всё работает. Надеюсь, когда-нибудь плиточная галерея будет работать даже с двумя изображениями.

Спасибо большое.

1 лайк

Итак, у меня не работает этот компонент. Я установил его на стандартную тему, чтобы протестировать перед добавлением в другие, но он функционирует некорректно. Я пробовал сам, и пользователи тоже.

Вот что происходит:


Тестовая тема находится здесь.

1 лайк

Какие еще компоненты/плагины вы используете? В таких ситуациях конфликт обычно является причиной, так как этот компонент работает корректно на обоих моих экземплярах Discourse.

Кроме того, я с нетерпением жду NaNoWriMo в этом году! :wink:

1 лайк

Ничего вычурного. Просто это, без плагинов.

(Вариант Vincent — это чистый CSS, работает только в теме Vincent, а не в стандартной.)

В первый год у нас будет nano на Discourse. Не могу дождаться!

1 лайк

Я тоже использую Vincent на одном из своих сайтов. Это отличная тема, хотя, возможно, вам придётся исправить CSS в нескольких местах, так как тема не обновлялась под изменения в Discourse 2.3. (Я просто добавил компонент темы с исправлениями CSS — это очень просто.)

Я использую все те же компоненты, что и вы, кроме компонента «Исправление цветов для сотрудников».

Используете ли вы какие-либо необычные плагины?

Нет, никаких плагинов, только SSO

Хорошо, мне удалось КРАТКОВРЕМЕННО воспроизвести то, что вы видели, установив компонент на экземпляр Discourse, где он ранее не был установлен. Когда я впервые использовал компонент, я получил такое же поведение, которое вы наблюдали (изображения сильно смещены вправо).

ОДНАКО, проблема решилась сама собой после того, как я сделал одну маленькую вещь: я добавил переносы строк между URI изображений. Когда я сохранил сообщение, через мгновение движок перерисовал изображения в виде плиток, как и ожидалось.

Итак, я изменил это:

![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) ![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) ![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

На это:

<div data-theme-tiles="1">

![PNG|690x376](upload://tkDa9A71XGWBECPZ8O4NJ7EVU0o.jpeg) 
![PNG|690x375](upload://qF63DV2mw5jrFWvYleWclebsDMo.jpeg) 
![PNG|690x376](upload://8xiyNyKpSqdDOfh4mxMHgy0Bzkh.jpeg) 

</div>

Интересно, что после того, как это сработало один раз, больше не имеет значения, есть ли переносы строк между URL-адресами изображений :face_with_raised_eyebrow:

Если вы хотите протестировать это на одном из моих сайтов, просто отправьте мне сообщение, и я пришлю вам ссылки (один из них в данный момент не публичный) :sunglasses:

1 лайк

Хорошо, после множества экспериментов и работы с @cjk77 над его собственной установкой мы выяснили, что упираемся в ограничения максимального размера изображений. Система обрабатывает это некорректно: вместо простого сбоя она выполняет странное переформатирование итогового результата. ЕСЛИ вы опубликуете изображение, которое слишком маленькое, вы можете увидеть следующее:


Все использованные изображения были меньше лимита на изменение размера. Изображения точного предела вообще не отображаются.

5 лайков

У меня тоже эта проблема. Это связано с размером изображения? Нужно ли их увеличить и загрузить заново?

Редактирование: это помогло.

1 лайк

Да, исходя из моих экспериментов, компонент не будет работать с изображениями меньше максимального предела. Я полагаю, это связано с тем, как работает однобоксинг.

2 лайка

Этот и компонент Slick Image Gallery не работают. @Johani

1 лайк

Оба варианта здесь работают отлично. Не могли бы вы уточнить, что именно не работает у вас? Какую версию Discourse вы используете?

Мы размещены на Discourse. Поэтому я не знаю точного числа, но, похоже, последнее обновление произошло 17 часов назад. Я установил компонент и загрузил несколько изображений для проверки, но это не работает. Вот и всё :thinking:

Версию используемого вами Discourse можно узнать, посмотрев в заголовок HTML любой страницы:

Это всё ещё не помогает — ЧТО именно не работает? Появляются ли кнопки в редакторе? Как выглядит полученный текст до сохранения? Появляются ли изображения в вашем сообщении вообще? И так далее.

Никто не сможет помочь, пока не поймёт, что именно происходит.

1 лайк

Спасибо, я нашёл это:

update

Изображения отображаются, но не так, как должно быть:

Оно должно выглядеть так:

Ваши изображения слишком малы. Они должны быть достаточно большими, чтобы активировать встроенный механизм изменения размера изображений в Discourse, чтобы плитки или галереи Slick работали корректно.

3 лайка

Каковы минимальные размеры изображений для корректной работы компонента?

Независимо от настроек вашего сайта.

Найдите параметры «max image width» (максимальная ширина изображения) и «max image height» (максимальная высота изображения).

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

6 лайков

Возможно, это баг? Определённо есть возможность для улучшения. Я установил это сегодня и испытывал трудности с правильным расположением элементов. Наконец, я разобрался. Мне нужно было разместить все изображения на одной строке перед нажатием кнопки редактора. Иначе я получаю код, который выглядит так:

![20060316-img1|679x500](upload://7IiKEBIQhilcDwt9KIBxiWZsVt8.jpeg)

</div>
<div data-theme-tiles="1">

![20060106-img2|674x499](upload://pYLbo4Bg417KHGzcNsfVopvxDfX.jpeg)

</div>

И все мои изображения оказываются в одном столбце.

Я предполагаю, что это не проблема, если вы загружаете все изображения одной партией, но в моём случае я собирал изображения из нескольких постов и копировал ссылки по одной.

Почему бы не нажать кнопку «Tiles» сначала, а затем вставить ссылки на изображения там, где написано «Добавить изображения»?

1 лайк