Skip to content

Instantly share code, notes, and snippets.

@apsolut

apsolut/c:\sites\sandbox\hs-cognigy\featuredListing.module\module.html

Created October 4, 2024 09:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save apsolut/cf4aa49c4095b3ec7a903c1dd8ce2716 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save apsolut/cf4aa49c4095b3ec7a903c1dd8ce2716 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. apsolut created this gist Oct 4, 2024.
    88 changes: 88 additions & 0 deletions c:\sites\sandbox\hs-cognigy\featuredListing.module\module.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,88 @@
    <div class="featured-posts-container">
    {% set featured_posts = blog_recent_topic_posts('default', 'featured', 3) %}

    {% for topic_post in featured_posts %}
    <a href="{{ topic_post.absolute_url }}" class="featured-post">
    <div class="topic-post " style="padding: 10px;">

    <div class="topic-text">
    <p>{{ topic_post.tag_list }}</p>
    <h2>{{ topic_post.name }}</h2>
    <p class="date">{{ topic_post.publish_date|datetimeformat('%B %Y') }}</p>

    </div>

    </div>
    </a>
    {% endfor %}
    </div>

    <div class="other-posts=container">
    <div class="other-posts">
    {% set featured_posts = [] %}
    {% set other_posts = [] %}

    {% for content in contents %}
    {% if 'featured' in content.topic_list|map(attribute='name') %}
    {% if featured_posts|length < 3 %}
    {% do featured_posts.append(content) %}
    {% endif %}
    {% else %}
    {% do other_posts.append(content) %}
    {% endif %}
    {% endfor %}

    {% for content in other_posts %}
    <div class="post-item">
    <p>{{ content.tag_list }}</p>
    <h3><a href="{{ content.absolute_url }}">{{ content.name }}</a></h3>
    <p>{{ content.post_summary }}</p>
    </div>
    {% endfor %}
    </div>

    </div>


    <style>



    .featured-posts-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 120px;
    }
    .featured-post {
    border: 1px solid #f1f1f1;
    padding: 10px;
    }
    .featured-post:nth-child(1) {
    width: 100%;
    }

    .featured-post:nth-child(2),
    .featured-post:nth-child(3) {
    width: calc(50% - 22px);
    }

    .other-posts {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block: 90px;
    }
    .other-posts .post-item {
    width: 30%;
    border: 1px solid #f1f1f1;
    margin-bottom: 20px;
    padding: 10px;
    }
    .other-posts:after {
    content: '';
    display: block;
    width: 30%;
    border: 1px solid transparent;
    padding: 10px;
    }
    </style>