CODE_BREAKERS Telegram 643
🖥 Фича Bubble, о которой вы наверняка не знали

Вы наверняка не знаете об этой классной функции в Bubble: возможности воспроизводить изображения в формате Masonry Grid — сетки, в которой изображения выстраиваются в неровном шахматном порядке. Формат такой сетки встречается в Pinterest. Рассказываем, как сделать такую самому!

Как сделать Masonry Grid: начало настройки

1️⃣ Заранее подготовьте изображения и убедитесь в их качестве: некоторые будут вытягиваться вертикально, так что и разрешение, и сама картинка должны быть к этому готовы.
2️⃣ Получить Masonry Grid можно только внутри элемента Repeating Group, в которой потоком воспроизводятся изображения из базы данных. Так что создайте Repeating Group и задайте источником данных для неё изображения.
3️⃣ Перейдите в настройки Repeating Group через редактор свойств — серое окошко с настройками элемента. Там надо найти чек-бокс Set fixed number of rows и снять галочку.
4️⃣ После этого появится чек-бокс Stretch rows to fill vertical space — растянуть строки и заполнить вертикальное пространство. Эту галочку тоже надо снять.

После двух этих манипуляций появится новая настройка, которая раньше не была видна — Display items as masonry grid.

Как сделать Masonry Grid: работа с изображениями

Сетка-масонри включена. Теперь можно настроить отображение изображений, чтобы всё смотрелось красиво и аккуратно.

1️⃣ Здесь же, во вкладке Appearance, в настройке Repeating Group можно задать расстояние между изображениями, чтобы они не прилипали друг к другу.
2️⃣ Теперь надо кликнуть на сам элемент изображения в ячейке Repeating Group. Найдите настройку Run-mode rendering. Поменяйте настройку с Zoom на настройку Rescale и тогда изображение отобразится согласно своим истинным пропорциям.
3️⃣ Идём во вкладку Layout. Там надо найти настройку Make this element fixed-height. Снимите галочку. Теперь изображения будут отображаться так, как положено в Masonry Grid.

Masonry Grid готова!

Ещё пара лайфхаков:
Можно настроить отображение Masonry Grid по колонкам, задав внутри Repeating Group фиксированное количество колонок, например, 3 штуки. Тогда изображения будут выстраиваться сверху вниз в три колонки.
Если снять настройку на фиксированное количество колонок, станет доступна настройка ширины каждой колонки, и тогда изображение будет занимать эту ширину.



В классическом программировании для создания Masonry Grid используется HTML, CSS и, чтобы всё заработало, — JavaScript. Довольно трудоёмкая задачка сделать всё это рабочим — и результат, к слову, может сказаться на производительности.

А в Bubble такая крутая фича реализуется в несколько кликов и за пару минут работы!

Хотите знать все доступные фишки лучших No-code инструментов и научиться создавать топовые IT-продукты на Bubble? Тогда ждём на курсе «Веб-разработчик без кода», стартуем 25 октября!

🖥 Хочу освоить Bubble: codebreakers.tech/bubble
2👍1🔥1



tgoop.com/code_breakers/643
Create:
Last Update:

🖥 Фича Bubble, о которой вы наверняка не знали

Вы наверняка не знаете об этой классной функции в Bubble: возможности воспроизводить изображения в формате Masonry Grid — сетки, в которой изображения выстраиваются в неровном шахматном порядке. Формат такой сетки встречается в Pinterest. Рассказываем, как сделать такую самому!

Как сделать Masonry Grid: начало настройки

1️⃣ Заранее подготовьте изображения и убедитесь в их качестве: некоторые будут вытягиваться вертикально, так что и разрешение, и сама картинка должны быть к этому готовы.
2️⃣ Получить Masonry Grid можно только внутри элемента Repeating Group, в которой потоком воспроизводятся изображения из базы данных. Так что создайте Repeating Group и задайте источником данных для неё изображения.
3️⃣ Перейдите в настройки Repeating Group через редактор свойств — серое окошко с настройками элемента. Там надо найти чек-бокс Set fixed number of rows и снять галочку.
4️⃣ После этого появится чек-бокс Stretch rows to fill vertical space — растянуть строки и заполнить вертикальное пространство. Эту галочку тоже надо снять.

После двух этих манипуляций появится новая настройка, которая раньше не была видна — Display items as masonry grid.

Как сделать Masonry Grid: работа с изображениями

Сетка-масонри включена. Теперь можно настроить отображение изображений, чтобы всё смотрелось красиво и аккуратно.

1️⃣ Здесь же, во вкладке Appearance, в настройке Repeating Group можно задать расстояние между изображениями, чтобы они не прилипали друг к другу.
2️⃣ Теперь надо кликнуть на сам элемент изображения в ячейке Repeating Group. Найдите настройку Run-mode rendering. Поменяйте настройку с Zoom на настройку Rescale и тогда изображение отобразится согласно своим истинным пропорциям.
3️⃣ Идём во вкладку Layout. Там надо найти настройку Make this element fixed-height. Снимите галочку. Теперь изображения будут отображаться так, как положено в Masonry Grid.

Masonry Grid готова!

Ещё пара лайфхаков:
Можно настроить отображение Masonry Grid по колонкам, задав внутри Repeating Group фиксированное количество колонок, например, 3 штуки. Тогда изображения будут выстраиваться сверху вниз в три колонки.
Если снять настройку на фиксированное количество колонок, станет доступна настройка ширины каждой колонки, и тогда изображение будет занимать эту ширину.



В классическом программировании для создания Masonry Grid используется HTML, CSS и, чтобы всё заработало, — JavaScript. Довольно трудоёмкая задачка сделать всё это рабочим — и результат, к слову, может сказаться на производительности.

А в Bubble такая крутая фича реализуется в несколько кликов и за пару минут работы!

Хотите знать все доступные фишки лучших No-code инструментов и научиться создавать топовые IT-продукты на Bubble? Тогда ждём на курсе «Веб-разработчик без кода», стартуем 25 октября!

🖥 Хочу освоить Bubble: codebreakers.tech/bubble

BY Code Breakers | No-code solutions


Share with your friend now:
tgoop.com/code_breakers/643

View MORE
Open in Telegram


Telegram News

Date: |

‘Ban’ on Telegram A Telegram channel is used for various purposes, from sharing helpful content to implementing a business strategy. In addition, you can use your channel to build and improve your company image, boost your sales, make profits, enhance customer loyalty, and more. You can invite up to 200 people from your contacts to join your channel as the next step. Select the users you want to add and click “Invite.” You can skip this step altogether. SUCK Channel Telegram best-secure-messaging-apps-shutterstock-1892950018.jpg
from us


Telegram Code Breakers | No-code solutions
FROM American