Сегодня сделаем секцию Gallery нашего лендинга. Сверстаем галерею таким образом, чтобы можно было добавлять большое количество изображений и не ограничиваться только четырьмя. Погнали!
Полезные ссылки:
Часть 1. Подготовка и настройка проекта
Часть 2. Настройка конфигурации и установка необходимых библиотек
Часть 3. Создание CSS-переменных и верстка блока Header
Часть 4. Верстка секции Hero, создание компонента Button
Часть 5. Верстка секции About
Часть 6. Верстка секции Gallery
Часть 7. Верстка секции WhyUs
Часть 8. Верстка секции Catalogue
Часть 9. Верстка секции Map
Часть 10. Верстка секции Footer
Часть 11. Создание якорных ссылок, рефакторинг
Часть 12. Создание мобильного меню
Часть 13. Анимация секций при скролле
Часть 14. Установка метаданных
Часть 15. Настройка Favicon.ico
Часть 16. Настройка счетчика Яндекс Метрики
Часть 17. Публикуем проект на хостинге
Подготовка изображения
Для удобства работы с галереей я создал подпапку gallery в папке images, это позволит нам не запутаться в файлах, если у вас будет, например, 20 изображений.
В папку gallery загрузите любые понравившиеся вам 4 изображения с соотношением сторон 1:1.
Можете взять изображения прямо из шаблона.
Присвоим изображениям имена ( gallery-01.jpg...gallery-04.jpg ).
Создание компонента Gallery.jsx
В папке sections создадим файл компонента Gallery.jsx.
Содержимое файла Gallery.jsx
import image01 from '@/app/images/gallery/gallery-01.jpg';
import image02 from '@/app/images/gallery/gallery-02.jpg';
import image03 from '@/app/images/gallery/gallery-03.jpg';
import image04 from '@/app/images/gallery/gallery-04.jpg';
import ExportedImage from 'next-image-export-optimizer';
export default function Gallery() {
return (
<>
<section className='flex flex-col gap-10 w-full px-5 mx-auto max-w-screen-xl py-12 lg:py-32'>
<h2 className='text-2xl lg:text-5xl font-black lg:text-center'>Галерея наших проектов</h2>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-10'>
<div className='relative aspect-square'>
<ExportedImage
alt='gallery image'
src={image01.src}
fill
loading='lazy'
placeholder='blur'
className='object-cover'
/>
</div>
<div className='relative aspect-square'>
<ExportedImage
alt='gallery image'
src={image02.src}
fill
loading='lazy'
placeholder='blur'
className='object-cover'
/>
</div>
<div className='relative aspect-square'>
<ExportedImage
alt='gallery image'
src={image03.src}
fill
loading='lazy'
placeholder='blur'
className='object-cover'
/>
</div>
<div className='relative aspect-square'>
<ExportedImage
alt='gallery image'
src={image04.src}
fill
loading='lazy'
placeholder='blur'
className='object-cover'
/>
</div>
</div>
</section>
</>
);
}
Я напрямую добавил все 4 изображения в компонент, в дальнейших уроках мы будем рефакторить код, и я покажу, как можно сократить и автоматизировать этот кусок кода, что позволит гораздо удобнее его читать и обслуживать.
Верстку галереи я сделал через гриды, также можно выполнить ее на флекс-блоках. Это скорее вопрос вкуса.
Также я добавил отображение галереи в 2 колонки на устройствах типа планшет ( md:grid-cols-2 ). В остальном это достаточно простая верстка.
Подключение секции к шаблону
В фале page.jsx подключим нашу новую секцию
Содержимое файла page.jsx
import About from './components/sections/About';
import Gallery from './components/sections/Gallery';
import Hero from './components/sections/Hero';
export default function Home() {
return (
<main>
<Hero />
<About />
<Gallery />
</main>
);
}
В итоге, запустив dev-режим, мы получим вот такой блок нашего сайта:
На сегодня всё!
В будущих уроках мы прикрутим к каждому изображению открывающееся модальное окно с большим изображением при клике по нему.
В следующей статье мы сверстаем секцию WhyUs.
Код данного урока доступен в репозитории GitHub по ссылке.
Не забудь подписаться на канал, а также заходи на мой блог blog.in9var.ru, а также можешь посетить мой основной сайт — in9var.ru.