craft_macros.twig

{#
  Social Links Array
  Examples:

  {{ dh_macros.dh_socialLinks([
    'twitter',
    'facebook',
    'xing'
  ], true) }}
#}

{% macro dh_socialLinks(networks, icons, label) %}
  <ul class="socialLinks__list">
    {# Loop for each network #}
    {% set icons = icons|default(false) %}
    {% set label = label|default(false) %}
    {% for network in networks %}
      {# Loop through all networks #}
      {% for sn in socialNetworks.socialLinks %}
        {% if sn.linkText|lower == network %}
          <li class="socialLinks__item  socialLinks__item--{{ sn.linkText|lower }}">
            <a class="socialLinks__link"
               href="{{ sn.customLink.url }}" {{ sn.customLink.target ? ' target="_blank"' }}>

              {% if icons == true and label == true %}

                <svg class="svgSprite  svgSprite--icon_{{ sn.linkText|lower }}" viewbox="0 0 48 48">
                  <use xlink:href="/assets/images/svg/sprite/sprite.svg#icon_{{ sn.linkText|lower }}"></use>
                </svg>
                <span class="socialLinks__label">{{ sn.linkText }}</span>

              {% elseif icons == true %}

                <svg class="svgSprite  svgSprite--icon_{{ sn.linkText|lower }}" viewbox="0 0 48 48">
                  <use xlink:href="/assets/images/svg/sprite/sprite.svg#icon_{{ sn.linkText|lower }}"></use>
                </svg>

              {% else %}

                {{ sn.linkText }}

              {% endif %}

            </a>
          </li>
        {% endif %}
      {% endfor %}

    {% endfor %}
  </ul>
{% endmacro %}



{#
  Case Wrapper
  Examples:

  {{ dh_macros.dh_caseWrapper('macbook', previewImage) }}
#}

{% macro dh_caseWrapper(caseWrapper, sourceField, sourceCaption) %}


  {# Settings #}
  {% set wrapper  = caseWrapper|default('macbook') %}
  {% set source   = sourceField %}
  {% set caption  = sourceCaption %}
  {% switch wrapper %}

  {# MacBook #}
  {% case 'macbook' %}
    <div class="macbook  waypointElement  fadeInUp  js_waypointElement">
      <div class="macbook__display">
        <figure class="macbook__figure">

          {# start: Image Settings #}
          {# get Image #}
          {% set image = source.first() %}

          {# Set Image Crop Sizes #}
          {% set cropSizes = [
            { width: 1600 },
            { width: 800 },
            { width: 400 },
            { width: 40, jpegQuality: 0},
          ] %}

          {# settings for Preview Images #}
          {% set images = craft.imager.transformImage(image, cropSizes, {
          jpegQuality: 80,
          ratio: 16/10,
          mode: 'crop',
          position: 'top-center'
          }) %}

          <div class="imageSizeWrapper" style="max-width: {{ image.width }}px;">
            <img class="lazyload"
                 data-sizes="auto"
                 data-srcset="{{ craft.imager.srcset(images) }}"
                 src="{{ images[3].url }}"
                 alt="{{ image.title }}">


            {% if caption|length %}
              <figcaption>{{ caption }}</figcaption>
            {% endif %}
          </div>

        </figure>
      </div>
      <div class="macbook__body"></div>
    </div>

  {% case 'browser' %}
    <div class="browser  waypointElement  fadeInUp  js_waypointElement">
      <figure class="browser__figure">

        {# start: Image Settings #}
        {# get Image #}
        {% set image = source.first() %}

        {# Set Image Crop Sizes #}
        {% set cropSizes = [
          { width: 1600 },
          { width: 800 },
          { width: 400 },
          { width: 40, jpegQuality: 0},
        ] %}

        {# settings for Preview Images #}
        {% set images = craft.imager.transformImage(image, cropSizes, {
         jpegQuality: 80,
        }) %}

        <img class="lazyload"
             data-sizes="auto"
             data-srcset="{{ craft.imager.srcset(images) }}"
             src="{{ images[3].url }}"
             alt="{{ image.title }}">
        {# end: Image Settings #}

        <div class="browser__bar">
          <div class="browser__dot  browser__dot--01"></div>
          <div class="browser__dot  browser__dot--02"></div>
          <div class="browser__dot  browser__dot--03"></div>
        </div>
      </figure>
    </div>

  {% case 'ipad' %}
    <div class="iPad  waypointElement  fadeInUp  js_waypointElement">
      <figure class="iPad__figure">
        {# start: Image Settings #}
        {# get Image #}
        {% set image = source.first() %}

        {# Set Image Crop Sizes #}
        {% set cropSizes = [
        { width: 1600 },
        { width: 800 },
        { width: 400 },
        { width: 40, jpegQuality: 0},
        ] %}

        {# settings for Preview Images #}
        {% set images = craft.imager.transformImage(image, cropSizes, {
        jpegQuality: 80,
        ratio: 4/3,
        mode: 'crop',
        position: 'top-center'
        }) %}

        <img class="lazyload"
             data-sizes="auto"
             data-srcset="{{ craft.imager.srcset(images) }}"
             src="{{ images[3].url }}"
             alt="{{ image.title }}">
        {# end: Image Settings #}
      </figure>
    </div>

  {% case 'iphone' %}
    <div class="iPhone  waypointElement  fadeInUp  js_waypointElement">
      <figure class="iPhone__figure">
        {# start: Image Settings #}
        {# get Image #}
        {% set image = source.first() %}

        {# Set Image Crop Sizes #}
        {% set cropSizes = [
        { width: 1600 },
        { width: 800 },
        { width: 400 },
        { width: 40, jpegQuality: 0},
        ] %}

        {# settings for Preview Images #}
        {% set images = craft.imager.transformImage(image, cropSizes, {
        jpegQuality: 80,
        ratio: 1/1.56221889055,
        mode: 'crop',
        position: 'top-center'
        }) %}

        <img class="lazyload"
             data-sizes="auto"
             data-srcset="{{ craft.imager.srcset(images) }}"
             src="{{ images[3].url }}"
             alt="{{ image.title }}">
        {# end: Image Settings #}
      </figure>
    </div>

  {% case 'default' %}
    <div class="default  waypointElement  fadeInUp  js_waypointElement">
      <figure class="waypointElement  fadeInUp  js_waypointElement">
        {# get Image #}
        {% set image = source.first() %}

        {# Set Image Crop Sizes #}
        {% set cropSizes = [
          { width: 1600 },
          { width: 800 },
          { width: 400 },
          { width: 40, jpegQuality: 0},
        ] %}

        {% set images = craft.imager.transformImage(image, cropSizes, {
          jpegQuality: 80
        }) %}

        <div class="imageSizeWrapper" style="max-width: {{ image.width }}px;">
          <img class="lazyload"
               data-sizes="auto"
               data-srcset="{{ craft.imager.srcset(images) }}"
               src="{{ images[3].url }}"
               alt="{{ image.title }}">


          {% if caption|length %}
            <figcaption>{{ caption }}</figcaption>
          {% endif %}
        </div>
      </figure>
    </div>
  {% endswitch %}

{% endmacro %}



{#
  Blog Asides
  Examples:

 {{ dh_macros.dh_blogAside(row, row.asideType) }}
#}

{% macro dh_blogAside(blogAsideRow, blogAsideType) %}


  {# Settings #}
  {% set row        = blogAsideRow %}
  {% set asideType  = blogAsideType %}
  {% switch asideType %}

  {# MacBook #}
  {% case 'quote' %}
  <div class="aside  aside--{{ asideType }}  waypointElement  fadeInUp  js_waypointElement">
    <blockquote>
      <p>{{ row.quote }}</p>
      <footer>{{ row.quoter }}</footer>
    </blockquote>
  </div>



  {% case 'image' %}
  <div class="aside  aside--{{ asideType }}  waypointElement  fadeInUp  js_waypointElement">
    <figure>
      {# start: Image Settings #}
      {# get Image #}
      {% set image = row.image.first() %}
      {% set caption = row.caption %}

      {# Set Image Crop Sizes #}
      {% set cropSizes = [
        { width: 1600 },
        { width: 800 },
        { width: 400 },
        { width: 40, jpegQuality: 0},
      ] %}

      {# settings for Preview Images #}
      {% set images = craft.imager.transformImage(image, cropSizes, {
        jpegQuality: 80,
      }) %}

      <img class="lazyload"
           data-sizes="auto"
           data-srcset="{{ craft.imager.srcset(images) }}"
           src="{{ images[3].url }}"
           alt="{{ image.title }}">
      {# end: Image Settings #}
    </figure>
    {% if caption|length %}
      <figcaption>{{ caption }}</figcaption>
    {% endif %}
  </div>
  {% endswitch %}


{% endmacro %}



{#
  Deco Big Text
  Examples:

 {{ dh_macros.dh_deco_bigText('text', 'class') }}
#}

{% macro dh_deco_bigText(text, class) %}

  {# Settings #}
  {% set text   = text|default('missing') %}
  {% set class  = class|default('default') %}

  <div class="decoBigText  decoBigText--{{ class }}"><span>{{ text|raw }}</span></div>
{% endmacro %}


{#
  Set Active Class
  Examples:

 {{ dh_macros.dh_is_active('news') }}
#}

{% macro dh_is_active(segment) %}
  {% if craft.request.firstSegment == segment %}is_active{% endif %}
{% endmacro %}



{#
  Pagination
  ==========
  Generate navigation buttons for paginations
​
  @param {object}  pages       - Pagination Object
  @param {object}  craft       - Craft Request Object
  @param {string}  classname   - Classname (default: 'pagination')
  @param {string}  searchquery - To pass search words from Searchfields (default: false)
#}
{% macro dh_pagination(pages,craft,classname,searchquery) %}
  {% set search = searchquery|default(false) %}
  {% set class = classname|default('pagination') %}
  ​
  {# Add Pagination only if the Page Number is higher than 1#}
  {% if pages.totalPages > 1 %}

    <nav class="{{ class }}" role="navigation">
      {# Dont display last page when on the first Page #}
      {% if pages.currentPage > 2 and pages.prevUrl %}
        <a class="{{ class }}__link" href="{{ pages.firstUrl }}{{ search ? '?q='~search }}" title="Back to the first page">
          &laquo;
        </a>
      {% endif %}
      ​
      {# Display the Previous Link if available #}
      {% if pages.prevUrl %}
        <a class="{{ class }}__link" href="{{ pages.prevUrl }}{{ search ? '?q='~search }}" title="Back to the previous page">
          &lsaquo;
        </a>
      {% endif %}

      {# Display prev 5 Page Links#}
      {% for page, url in pages.getPrevUrls(3) %}
        <a class="{{ class }}__link  {{ class }}__link--number" href="{{ url }}{{ search ? '?q='~search }}" title="Go to page {{ page }}">
          {{ page }}
        </a>
      {% endfor %}

      {# Diplay Current Page#}
      <span class="{{ class }}__link  {{ class }}__link--current">
        {{ pages.currentPage }}
      </span>

      {# Display next 5 Page Links #}
      {% for page, url in pages.getNextUrls(3) %}
        <a class="{{ class }}__link  {{ class }}__link--number" href="{{ url }}{{ search ? '?q='~search }}" title="Go to page {{ page }}">
          {{ page }}
        </a>
      {% endfor %}

      {# Display next Page Link if available#}
      {% if pages.nextUrl %}
        <a class="{{ class }}__link" href="{{ pages.nextUrl }}{{ search ? '?q='~search }}" title="Forward to the next page">
          &rsaquo;
        </a>
      {% endif %}

      {# Dont display when on the last page #}
      {% if (pages.totalPages - 1) > pages.currentPage and pages.totalPages > 2 %}
        <a class="{{ class }}__link" href="{{ pages.lastUrl }}{{ search ? '?q='~search }}" title="Forward to the last page">
          &raquo;
        </a>
      {% endif %}
    </nav>
  {% endif %}
{% endmacro %}



{#
  Prev / Next Link
  Examples:

  {{ dh_macros.dh_postNav(entry, 'work', 'postDate', 'prev work', 'next work' ) }}
#}

{% macro dh_postNav(entry, section, order, prevLabel, nextLabel ) %}

  {# Set vars #}
  {% set section     = section|default('blog') %}
  {% set order       = order|default('postDate') %}
  {% set prevLabel   = prevLabel|default(false) %}
  {% set nextLabel   = nextLabel|default(false) %}

  {# Set parameters for prev/next elements list #}
  {% set data = craft.entries.section(section).order(order).limit(null) %}

  {# Get the prev/next elements #}
  {% set prevEntry = entry.getPrev(data) %}
  {% set nextEntry = entry.getNext(data) %}

  {# And make sure to only output the links if the element exists #}
  {% if prevEntry or nextEntry %}


    <ul class="postNav">
      {% if prevEntry %}
      <li class="postNav__item  postNav__item--prev">
        <a class="postNav__link  postNav__link--prev" href="{{ prevEntry.url }}">

          {% if prevLabel != false %}
          <span class="postNav__label">{{ prevLabel }}</span>
          {% endif %}
          <span class="postNav__title">{{ prevEntry.title }}</span>
        </a>
      </li>
      {% endif %}
      {% if nextEntry %}
      <li class="postNav__item  postNav__item--next">
        <a class="postNav__link  postNav__link--next" href="{{ nextEntry.url }}">
          {% if nextLabel != false %}
            <span class="postNav__label">{{ nextLabel }}</span>
          {% endif %}
          <span class="postNav__title">{{ nextEntry.title }}</span>
        </a>
      </li>
      {% endif %}
    </ul>
  {% endif %}

{% endmacro %}



{#
  Section Icon
  TODO: Create a Section Icon Macro for the Home.
#}