Úvodní sekce stránky (main-header)

Můžeme mít několik variant, pomůžeme si vloženými moduly, pokud je značně odlišné, nebo modifikační třídou. Základní varianty jsou s obrázkem a bez obrázku.

HTML / Latte

{*
    Example of ImageDetail and ImageExist filter to use for image rendering
    Filter ImageDetail returns either name or alt of an image that has been set on menuitem page

    {var $name = (($page|imageDetail,4|webalize) ?: ($page|name|webalize))}
    {var $alt = (($page|imageDetail,4,true|striptags) ?: ($page|name|striptags))}
    {var $img = ("/menuitem/big/img-{$page['id']}-4.jpg"|imageExist,false,"/menuitem/big/{$name}__img-{$page['id']}-4.jpg")}
*}

{* Main Header *}

<section n:class="'main-header', $img ? 'main-header--image' : 'main-header--color'">

    {* Main Header | Figure *}


    <div class="main-header__figure" n:if="$img">

        {* Single source *}

			{*<img class="main-header__img"
				 src="/userfiles/images/image.jpg" alt="obrazek">*}

			{* Multiple sources *}

			{*<picture class="main-header__picture">
				<source srcset="/userfiles/images/image.jpg"
						type="image/jpg" media="(min-width: 641px)">
				<source srcset="/userfiles/images/image.jpg"
						type="image/jpg">
				<img class="main-header__img"
					 src="/userfiles/images/image.jpg"
					 alt="{$page|name|striptags}">
			</picture>*}

    </div>

	{* Main Header | Content *}

    <div class="main-header__content --content">

        {* Main Header | Breadcrumb *}

        {include "./partials/components/breadcrumb.latte"}

        {* Main Header | Title *}

        <h1 class="main-header__title">
            {$page|header|noescape}
        </h1>

        {* Main Header | Perex *}

        <div class="main-header__perex" n:if="$page['supplements']['Perex']">
            {$page|perex:true|noescape}
        </div>

    </div>

</section>

CSS / SCSS

/* Main header */

.main-header {
  padding-top: 60px;
  padding-bottom: 30px;
  margin-top: 140px;
}

.main-header--color {
  background-color: $color__gray-light;
}

Nevíte si rady?
Neváhejte se zeptat

Nevíte si rady nebo potřebujete něco konzultovat? Nápovědu stále zdokonalujeme na základě vašich požadavků a postřehů. Uvádíme co nejvíce možných variant, které používáme na řešení jednotlivých částí webu, mějte ale na paměti, že projekty řešíme individuálně na základě konkrétních potřeb.

Nádražní 876
560 02 Česká Třebová

honza.cech@czechgroup.cz

+420 774 201 483

*
*