Článek (article)

Latte / Html

Neintegrovaná verze

Pro specifikace blogového článku - rubrika, čas čtení, datum atd. používáme komponentu spec.scss

Pro authora můžeme taky vytvořit komponentu zvlášť.

{default $type = "small"}
{default $img = false}

<article class="article article--{$type}">


    <div class="article__figure --flex --flex-column --flex-end-x">

        <a class="article__figure-link" href="#" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>

        {var $img = false}
        <a href="#" class="article__author author --flex --flex-centre-y">
            <div class="author__figure" n:if="$img">
                <img class="author__img" src="{$img}" alt="Autor">
            </div>
            <div class="author__text">
                <span class="author__label">Autor článku</span>
                <span class="author__name">Jméno autora</span>
            </div>
        </a>
    </div>

    <div class="article__text">
        <div class="article__spec spec">
            <span class="spec__item spec__item--date">20. 2. 2020</span>
            <a  href="#"
                    class="spec__item spec__item--rubric">
                Rubrika článku
            </a>
        </div>

        <h3 class="article__title --title-h2">
            <a href="#" class="article__link">
                Název článku s delším textem
            </a>
        </h3>
        <div class="article__perex">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Etiam sodales tellus non nisl vulputate faucibus. 
            Pellentesque id ipsum mattis sem mattis pulvinar.
        </div>
        <a class="article__link article__link--small"
           href="#">Zobrazit celý článek</a>
    </div>

</article>

Integrovaná verze


{default $type = "small"}

<article class="article article--{$type}" n:if="isset($item)">

    {var $img = ("/blog/small/blg-{$item['id']}-11.jpg"|imageExist)}
    {if !$img}
        {var $img = ("/blog/middle/blg-{$item['id']}-11.jpg"|imageExist)}
    {/if}


    <div class="article__figure --flex --flex-column --flex-end-x">

        <a class="article__figure-link" href="{$item|link}" n:if="$img">
            <img class="article__img" src="{$img}" alt="{$item|name|striptags}">
        </a>
        {var $author = $item['author']}
        {if isset($author) && $author}
            {var $img = ("/autor/athr-{$author['id']}-12.jpg"|imageExist)}
            <a href="{$author|link}" class="article__author author --flex --flex-centre-y">
                <div class="author__figure" n:if="$img">
                    <img class="author__img" src="{$img|noescape}" alt="{$author|header|striptags}">
                </div>
                <div class="author__text">
                    <span class="author__label">{$web['BLOG_ARTICLE_AUTHOR']}</span>
                    <span class="author__name">{$author|header}</span>
                </div>
            </a>
        {/if}
    </div>

    <div class="article__text">
        {var $rubric = $item['rubric']}
        <div class="article__spec spec">
            <span class="spec__item spec__item--date">{$item['date_inserted']->format('j. n. Y')}</span>
            <a n:if="$rubric"
                    href="{$rubric|link|noescape}"
                    class="spec__item spec__item--rubric">
                {$rubric|header}
            </a>
        </div>

        <h3 class="article__title --title-h2">
            <a href="{$item|link}" class="article__link">
                {$item|header|noescape}
            </a>
        </h3>
        <div class="article__perex">
            {$item|perex:true|striptags}
        </div>
        <a class="article__link article__link--small"
           href="{$item|link}">{$web['BLOG_READ_MORE']}</a>
    </div>

</article>

CSS / SCSS

/* Article */

.article {
	flex-direction: column;
	display: flex;
	align-items: center;
	
	@include media($medium){
		flex-direction: row;
	}
}

.article--small{
	margin: auto;
	max-width: 700px;
	flex-direction: column;
	
	@include media($xlarge){
		flex-direction: row;
	}
}

.article--large{
	max-width: 945px;
	margin: 0 0 55px 0;
}

/* Article | Spec */

.article__spec {
	margin-bottom: 15px;
}


/* Article | Figure */

.article__figure {
	max-width: 340px;
	width: 100%;
	height: 344px;
	position: relative;
	flex-shrink: 0;
	z-index: 1;
	padding: 18px 25px;
	
	@include media($xlarge){
		width: 344px;
		height: 344px;
	}
	
	&::after{
		@include pseudo(block, absolute);
		background: linear-gradient(to top, #000 0%, transparent 60%);
		top:0;
		left:0;
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 0;
		pointer-events: none;
	}
	
	
	.article--small &{
		height: 255px;
		
		@include media($xlarge){
			width: 255px;
			height: 255px;
		}
	}
	
}


/* Article | Author */

.article__author{
	z-index: 2;
}

/* Article | Img */

.article__img{
	position: absolute;
	left:0;
	top:0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Article | Title */

.article__title {
	font-weight: bold;
	margin: 0 0 10px 0;
	
	@include media($large) {
		font-size: 2.5rem;
	}
}

/* Article | Perex */

.article__perex {
	font-size: 1.5rem;
	margin: 0 0 15px 0;
}

/* Article | Link */

.article__link {
	text-decoration: underline;
	
	.article__title & {
		text-decoration: none;
		color: $color__text;
		
		&:hover, &:focus {
			color: $color__primary;
		}
	}
}

.article__link--small{
	font-size: 1.5rem;
}

/* Article | Text */

.article__text{
	padding: 14px 0px;
	max-width: 340px;
	
	
	.article--large &{
		@include media($medium){
			padding: 14px 34px;
			max-width: none;
		}
	}
	
	
	.article--small &{
		@include media($xlarge){
			padding: 14px 34px;
			max-width: none;
		}
	}
}
/* Spec */

.spec {
	margin: -2px -8px;
}


.spec--header-top{
	margin: -2px -8px -2px -33px;
}

/* Spec | Item */

.spec__item {
	color: $color__gray-darker;
	font-size: 15px;
	margin: 2px 8px;
	display: inline-flex;
}

.spec__item--date{
	font-size: 1.3rem;
	padding: 6px 14px;
	color: #fff;
	font-weight: 700;
	background: $color__primary;
}

.spec__title--hide {
	display: none;
}
/* Author */


.author{
	flex-shrink: 0;
	
	.about-author &{
		margin: 0 20px 15px 0;
	}
}

.author__figure {
	width: 54px;
	height: 54px;
	overflow: hidden;
	border-radius: 50%;
	margin: 0 10px 0 0 ;
	border: 1px solid $color__gray;
}

.author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.author__text{
	line-height: 1.2;
}


.author__label {
	display: block;
	font-size: 13px;
	color: $color__gray-darker;
}

.author__name {
	font-size: 1.5rem;
	color: #fff;
	font-weight: 700;
	
	.author--dark &{
		color: $color__text;
	}
}

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

*
*