Replication of Features Page

Hello Mark,
Thank you for reaching out and for your kind words about the feature page formats! I'm glad to hear you find them a valuable enhancement to your W3CSS layouts.

I'd be happy to share the code with you to help you get started. However, implementing and customizing it for your site may be complex, and it's not something I can effectively guide you through remotely.

Here is the code:

{% set classes = [
    'node solo-clear solo-teaser',
    'node--type-' ~ node.bundle|clean_class,
    node.isPromoted() ? 'node--promoted',
    node.isSticky() ? 'node--sticky',
    not node.isPublished() ? 'node--unpublished',
    view_mode ? 'node--view-mode-' ~ view_mode|clean_class,
  ]
%}

{{ attach_library('solo_helper/content-info') }}

{% set node_title = node.label|striptags|trim %}
{% if node.field_teaser_mode is not empty %}
  {% set node_summary = node.field_teaser_mode.processed|striptags|trim %}
{% else %}
  {% set node_summary = node.body.summary|render|striptags|trim %}
{% endif %}
{% set node_url = url('entity.node.canonical', {'node': node.id}, {'absolute': true}) %}
{% if node.uid.entity %}
  {% set user = node.uid.entity %}
  {% set user_url = path('entity.user.canonical', {'user': user.id}) %}
  {% set user_picture = user.user_picture.target_id ? file_url(user.user_picture.entity.fileuri) : null %}
  {% set user_name = user.name.value %}
  {% set comment_count = node.comment and node.comment.comment_count ? node.comment.comment_count.value : '0' %}
  {% set first_last = (user.field_first_name.value ~ ' ' ~ user.field_last_name.value)|trim %}
{% endif %}


<article{{ attributes.addClass(classes) }}>

  <h2 {{ title_attributes.addClass('node__title') }}>
    <a href="{{ url }}" rel="bookmark">{{ label }}</a>
  </h2>

  <div class="solo-author-info">

    {% if user.field_user_social_media is not empty %}
    <div class="teaser-author-social sm-icons">
    {% for item in user.field_user_social_media %}
      {% set url = item.uri %}

      {% if 'facebook' in url %}
        <a class="facebook" href="{{ url }}" aria-label="Facebook Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-facebook.html.twig' %}</span>
        </a>

      {% elseif 'twitter' in url %}
        <a class="twitter" href="{{ url }}" aria-label="Twitter Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-twitter.html.twig' %}</span>
        </a>

      {% elseif 'linkedin' in url %}
        <a class="linkedin" href="{{ url }}" aria-label="LinkedIn Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-linkedin.html.twig' %}</span>
        </a>

      {% elseif 'drupal' in url %}
        <a class="drupal" href="{{ url }}" aria-label="Drupal Profile" target="_blank">
          <span>{% include '@solo/partials/svg/_svg-drupal.html.twig' %}</span>
        </a>
      {% endif %}

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

    {% if first_last or user_name %}
    <div class="author-picture">
      <a href="{{ user_url }}" title="{{ user_name }}">
        <span>
          {% if user_picture %}
            <img src="{{ user_picture }}" alt="{{ user_name }}">
          {% else %}
            {% include '@solo/partials/svg/_account.html.twig' %}
          {% endif %}
        </span>
        &nbsp;
        <span>
          {% if first_last %} {{ first_last }} {% else %} {{ user_name }} {% endif %}
        </span>
      </a>
    </div>
    {% endif %}
    <div class="author-calendar">
      <span>{% include '@solo/partials/svg/_calendar-clock.html.twig' %}</span>
      &nbsp;
      {% if node.changed %}
        <span>Last Updated: {{ node.changed.value|date('g:i A, M d, o') }}</span>
      {% else %}
        <span>Last Updated: Not available</span>
      {% endif %}
    </div>
    {% if comment_count > 0 %}
    <div class="author-comment">
      <span>{% include '@solo/partials/svg/_comment.html.twig' %}</span>
      &nbsp;
      <span>{{ comment_count }} Comment{{ comment_count|number_format > 1 ? 's' : '' }}</span>
    </div>
    {% endif %}

  </div>

  <div{{ content_attributes.addClass('solo-clear node__content') }}>
    {# {{ content }} #}
    <div class="teaser-image-wrapper">

      <div class="author-share sm-icons">
          <a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u={{ node_url }}" aria-label="Share on Facebook" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-facebook.html.twig' %}</span>
          </a>
          <a class="twitter" href="https://x.com/share?url={{ node_url }}&text={{ node_title }}" aria-label="Share on X" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-twitter.html.twig' %}</span>
          </a>

          <a class="linkedin" href="https://www.linkedin.com/sharing/share-offsite/?url={{ node_url }}" aria-label="Share on LinkedIn" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-linkedin.html.twig' %}</span>
          </a>
          <a class="email" href="mailto:?subject={{ node_title }}&amp;body={{ node_summary }} {{ node_url }}." aria-label="Email the Article" target="_blank">
            <span>{% include '@solo/partials/svg/_svg-email.html.twig' %}</span>
          </a>
          <span class="share-teaser"><strong>Share</strong></span>
      </div>
      {{ content.field_node_image }}
    </div>

    <p>{{ node_summary ~ ' ...' }}</p>

    {% if content.links %}
    {{ content.links }}

{% endif %}

  </div>

</article>

Best Wishes,
Alaa

Thank you Alaa.

One additional question - the "menus" on the right side (e.g. Landing Pages, Color Schemes) are of particular interest. Is this created with a block containing a menu or a title and paragraph type (which one)?

I would very much like to replicate this scenario for our site as we would like easy navigation based on the content on the left side. Similar to your set up.

Again, many thanks for any guidance you can provide.

Hello Mark,

You are welcome! The right-side menus are standard menus with some custom css. Go to your-site-dot-com/admin/structure/menu/add to create a new menu and add links. Then, navigate to your-site-dot-com/admin/structure/block, place the menu, and configure it as needed.

Best wishes,
Alaa