Создаем лендинг сайт с нуля: делаем галерею изображений #6

Сегодня сделаем секцию Gallery нашего лендинга. Сверстаем галерею таким образом, чтобы можно было добавлять большое количество изображений и не ограничиваться только четырьмя. Погнали!

Полезные ссылки:

• Шаблон лендинга, который мы будем делать, доступен в Figma по ссылке.
• Код данного урока доступен в репозитории GitHub по ссылке.
• Подписывайтесь на мой Дзен канал

Подготовка изображения

Для удобства работы с галереей я создал подпапку 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 по ссылке.