pbStudio: Портфолио, Услуги и Контакты

Продолжаем разработку нашего сайта. В этом уроке мы завершим работу над всеми страницами.

Навигация по урокам:

pbStudio: Создаём сайт с PageBlocks – настройка и главная страница
pbStudio: Меню и страница «О нас»
pbStudio: Чистый контроллер или FetchIt — два способа обработки форм
pbStudio: Портфолио, Услуги и Контакты
pbStudio: Подключаем мультиязычность

Портфолио

На этой странице используем 2 блока — Hero и Portfolio.
Hero у нас уже реализовано, поэтому добавляем блок Portfolio

Блок Portfolio

1. Настройка блока

Block::make('Portfolio')
    ->fields([
        Field::make('Items')
            ->type('table')
            ->fields([
                Field::make('Title')
                    ->required(),
    
                Field::make('Image')
                    ->type('image')
                    ->sourcePath('/assets/images/')
                    ->required(),
            ])
            ->columns([
                Column::make('Title'),
                Column::make('Image')
                    ->render('image')
                    ->width(100),
            ])
    ])

2. Создаем чанк portfolio.tpl

<section class="portfolio row">
    {foreach $items as $item}
        <div class="col-12 col-md-6 col-lg-4 mb-4">
            <img loading="lazy"
                 src="{$item.image.url|pthumb:'w=416&h=280&zc=1&f=webp'}"
                 class="img-fluid mb-2"
                 width="416"
                 height="280"
                 alt="{$item.title}">
            <h5>{$item.title}</h5>
        </div>
    {/foreach}
</section>

Услуги

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

Блок Visual Impact

1. Настройка блока

Block::make('Visual Impact')
    ->permissions([
        'resource' => 4 // ID страницы услуги
    ])
    ->fields([
        Field::make('Title')->required(),
        Field::make('Description')
            ->type('richtext')
            ->required(),
        Field::make('Image')
            ->type('image')
            ->sourcePath('/assets/images/')
            ->width(80)
            ->required(),
        Field::make('Button')
            ->type('button')
            ->width(20)
            ->required()
    ]),

2. Создаем чанк visual_impact.tpl

<section class="my-5">
    <div class="position-relative">
        <img loading="lazy"
             src="{$image.url|pthumb:'w=1296&h=500&f=webp&bg=FF5D44'}"
             class="img-fluid"
             alt="{$title}">
        <h2 class="position-absolute top-50 start-100 translate-middle w-100"
            style="font-size: 4rem;max-width: 33rem;">{$title}</h2>
    </div>
    <div class="row mt-5">
        <div class="col-12 col-md-6">
            {$description}
        </div>
        <div class="col-12 col-md-6 text-center">
            {$button|button}
        </div>
    </div>
</section>

Блок Headline First

1. Настройка блока

Block::make('Headline First')
    ->permissions([
        'resource' => 4
    ])
    ->fields([
        Field::make('Title')
            ->width(80)
            ->required(),
        Field::make('Button')
            ->type('button')
            ->width(20)
            ->required(),
        Field::make('Description')
            ->type('richtext')
            ->required()
    ]),

2. Создаем чанк headline_first.tpl

<section class="row my-5">
    <div class="col-12 col-md-6">
        <h2 style="font-size: 3rem">{$title}</h2>
        {$button|button}
    </div>
    <div class="col-12 col-md-6">
        {$description}
    </div>
</section>

Блок Balanced Content

1. Настройка блока

Block::make('Balanced Content')
    ->permissions([
        'resource' => 4
    ])
    ->fields([
        Field::make('Image')
            ->type('image')
            ->sourcePath('/assets/images/')
            ->width(80)
            ->required(),

        Field::make('Button')
            ->type('button')
            ->width(20)
            ->required(),

        Field::make('Title')
            ->required(),

        Field::make('Description')
            ->type('richtext')
            ->required(),
    ])

2. Создаем чанк balanced_content.tpl

<section class="row my-5">
    <div class="col-12 col-md-10 position-relative">
        <img loading="lazy"
             src="{$image.url|pthumb:'w=1100&h=460&bg=F8F9FA'}"
             class="img-fluid"
             alt="{$title}">
        <div class="col-12 col-md-6 position-absolute start-100 top-50 translate-middle">
            <h2 style="font-size: 3rem">{$title}</h2>
            {$description}
            {$button|button}
        </div>
    </div>
</section>

Блок Key Benefits

1. Настройка блока

Block::make('Key Benefits')
    ->permissions([
        'resource' => 4
    ])
    ->fields([
        Field::make('Title')->required(),
        Field::make('Description')
            ->type('richtext')
            ->required(),
        Field::make('Button')
            ->type('button')
            ->required(),
    ]),

2. Создаем чанк key_benefits.tpl

<section class="row my-5">
    <div class="col-12 col-md-6 mx-auto text-center">
        <h2 style="font-size: 3rem;">{$title}</h2>
        {$description}
        {$button|button}
    </div>
</section>

Контакты

На этой странице будем использовать 2 блока — Hero и Contacts.

Блок Contacts

1. Настройка блока

Block::make('Contacts')
    ->fields([
        Field::make('Address')
            ->required(),
        
        Field::make('Phone')
            ->width(50)
            ->required(),
        
        Field::make('Email')
            ->width(50)
            ->required(),
        
        Field::make('Map')
            ->type('map')
            ->center('50.4500336,30.5241361')
            ->layer('dark')
            ->icon('/assets/images/logo.svg')
            ->iconSize('25,25')
            ->zoom(6)
            ->required(),
    ])

2. Создаем чанк contacts.tpl

<section class="contacts row">
    <div class="col-auto">{$address}</div>
    <div class="col-auto mx-auto">{$phone}</div>
    <div class="col-auto">{$email}</div>
    <div class="col-12 mt-3">
        <div class="map-container">
            <div id="map">
                {'!pbMap' | snippet: [
                    'markers' => $map_coords,
                    'options' => $map_options,
                ]}
            </div>
        </div>
    </div>
</section>
<style>
    .map-container {
        position: relative;
        overflow: hidden;
        padding-top: 56.25%;
    }

    #map {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }
</style>

Сайт готов! В следующем уроке научимся подключать мультиязычность.