|
|
|
|
|
|
|
|
|
\Components\Website\Posts
|
|
|
|
<div class="post-card">
<logic:if test="$templateRegionsShown['icon'] && $post['post_icon']">
<div class="post-image">
<a href="[? $post['post_content_url'] ?]">
<standard:image src="[? $post['post_icon'] ?]" width="400" maintainaspect="true" />
</a>
<div class="post-overlay-link">
<a href="[? $post['post_content_url'] ?]"><small>READ MORE</small></a>
</div>
</div>
</logic:if>
<div class="post-content">
<logic:variable as="arrAdditionalCategory" value="[? \Components\Website\Posts\Categories::getAllForPost($post['post_id'], true) ?]" />
<div class="post-category-title">
<data:repeater as="post_category" datasource="\Components\Website\Posts\Categories::getAllForPost($post['post_id'])">
<small>[?? $post_category['post_category_title'] ??]</small>
</data:repeater>
</div>
<logic:if test="$templateRegionsShown['date']">
<span style="display: flex; justify-content: flex-start;align-items: center;gap: .5rem"> <standard:icon library="feather" iconstyle="standard" iconname="calendar" size="4" style="width: 18px; height: 18px;" />[? formatDate($post['post_date']) ?]</span>
</logic:if>
<h4>[?? $post['post_title'] ??]</h4>
<p>[?? $post['post_content_short'] ??]</p>
<logic:if test="$post['post_content_url']">
<a href="[? $post['post_content_url'] ?]">Read more ></a>
</logic:if>
</div>
<logic:if test="$post['post_content_url']">
<a href="[? $post['post_content_url'] ?]" class="floating-link"></a>
</logic:if>
</div>
|
|
.flexContainer,
.templateContainer--websitePosts-list-custom,
.templateContainer--websitePosts-list-default {
padding: 0;
margin: 0;
display: flex !important;
justify-content: center;
-webkit-flex-flow: row wrap;
gap: 20px;
}
.post-card {
width: 408px;
display: flex;
flex-direction: column;
position: relative;
background: #fafafa;
border: 2px solid rgba(239, 239, 239, 0.594);
border-radius: 10px;
}
.post-image {
position: relative;
}
.post-image img {
width: 100%;
height: 200px;
object-fit: cover;
transition: filter 0.5s;
}
.post-card:hover .post-image img {
filter: brightness(0.2);
}
.post-overlay-link {
position: absolute;
top: 50%;
left: 0;
right: 0;
text-align: center;
transform: translateY(-50%);
display: none;
}
.post-card:hover .post-overlay-link {
display: block;
}
.post-overlay-link a {
color: #fff;
font-weight: 600;
letter-spacing: 1px;
}
.post-content {
padding: 30px;
}
.post-category-title
{
position: absolute;
top: 20px;
right: 30px;
}
.post-category-title small {
background: #d2042d;
color: #fff;
padding: 2px 8px;
font-size: 0.7rem;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
margin-bottom: 10px;
}
.post-content h4 {
font-weight: 600;
font-size: 1.2rem;
margin: 10px 0;
}
.floating-link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
|
|
|