blog-main-olivares.html.twig

{# Blog presentation cards for articles   by José Luis Olivares. 
You can say thanks endorsing my dev skills on https://www.linkedin.com/in/jolivaress/.
and/or  making a voluntary donation through Paypal https://paypal.me/joolivares #}

{% extends '@nucleus/partials/particle.html.twig' %}
    {% set article_settings = particle.article %}
    {% set filter = article_settings.filter %}
    {% set default_cardbody=article_settings.default_cardbody %}

    {# Category Finder #}
    {% set category_options = filter.categories ? {id: [filter.categories|split(','), 0]} : {} %}
    {% set categories = joomla.finder('category', category_options).published(1).language().limit(0).find() %}
    {# Content Finder #}
    {% if filter.articles %}
        {% set article_options = filter.articles ? {id: [filter.articles|replace({' ': ''})|split(',')]} : {} %}
        {% set article_finder = joomla.finder('content', article_options).published(1).language() %}
    {% else %}
        {% set article_finder = joomla.finder('content').category(categories).published(1).language() %}
    {% endif %}

    {% set total = article_finder.count() %}
    {% set articles = article_finder.find() %}

{% block particle %}
<div class="uk-container uk-text-center">

   {# <script>console.log({{ _context | json_encode | raw }});
        console.log("---------articles[1]------");
        console.log({{ articles[1] | json_encode | raw }});
        console.log("---------articles[1].route------");
        console.log({{ articles[1].route| json_encode | raw }});
        console.log("---------Categories------");
        console.log({{ categories[19].route| json_encode | raw }});

    </script>  #}

    {% if particle.title %}
        <div class="g-grid">
            <div class="g-block size-100 {{ particle.title_css }}">
                <{{ particle.titlehx|raw }} class="g-title">{{ particle.title|raw }}</{{ particle.titlehx|raw }}>
            </div>
        </div>
    {% endif %}
    <div class="uk-child-width-1-{{particle.cardcount|default('2')}}@m uk-grid-match uk-grid" uk-grid>
        {% for article in articles  %}
           {#  <script>
                console.log("---------article content------");
                console.log({{ article.route | json_encode | raw }});
             </script> #}
            <div>
                <div class="uk-card uk-card-{{particle.cardtype|default('default')}} uk-grid-collapse uk-child-width-1-2@s uk-margin" uk-grid>                    
                    <div class="uk-card-media-left uk-cover-container">
                        <a target="{{ particle.blogtarget|default('_parent') }}" href="{{ article.route }}" class="uk-link-reset">                                                
                            <canvas width="1050" height="650"></canvas>
                            <img src="{{ url(article.images.image_intro) }}" {{ article.images.image_intro|imagesize|raw }} class="uk-border-rounded" alt="{{ article.images.image_intro_alt }}" uk-cover/>                           
                        </a>    
                    </div>
                    <div class="uk-card-body {{particle.cardbodypadding|e}} uk-padding-remove-vertical uk-margin">
                        <h3 class="uk-card-title uk-margin-remove-bottom">
                            <a target="{{ particle.blogtarget|default('_parent') }}" href="{{ article.route }}" class="uk-button uk-button-text">{{article.title|e}}</a>
                        </h3>
                        <p class="uk-text-meta uk-margin-remove-top">by {{ article.created_by_alias|e }}, {{ article.date|e }}</p>
                        <p class="uk-text-small">
                            <a target="{{ particle.blogtarget|default('_parent')|default('_parent')|e }}" href="{{ article.route | url }}" class="uk-link-reset">
                                {% if default_cardbody %}
                                    {{default_cardbody}}
                                {% endif %}
                            </a>
                        </p>
                    </div>
                </div>  
            </div>
        {% endfor %}
    </div>
      <div class="uk-margin-medium-top" id="jlblogbutton">
        <a class="uk-button {{ particle.blogbuttontype|e }}" href="{{ particle.bloglink|e }}" target="{{ particle.blogtarget|e }}" >{{ particle.blogbuttontext|raw }}</a>
     </div>
     {# this is for testing
     {% for article in articles %}
        <h1>{{article.title}}</h1>
        <!-- <p>{{ article.fulltext|raw }}</p> -->
        <!-- <p>{{ article.introtext|raw }}</p> -->
        <img src="{{ url(article.images.image_intro) }}" {{ article.images.image_intro|imagesize|raw }} class="uk-border-rounded" alt="{{ article.images.image_intro_alt }}" uk-cover/>
     {% endfor %}
    #}
</div>
{% endblock %}