Particle Joomla Content

[Fabio Malugani]

Hi, i’ve got the joomla template EDU pro. I use the joomla content particle but i’ve a litte problem… i use it in latestblog section with 3 articles in home page. The joomla content particle with image but the tag haven’t the tag alt.. please can you tell me how insert it?

This is a part of your code for particle’s template

<div class="jl-content-item">

  <div class="jl-content-item-container  ">

    <div class="jl-content-item-image ">

      <a href="%articleLink%">

        %articleImage%

      </a>

    </div>

Many thanks

[Tony]

Hi Fabio,

Just replace the code from joomlacontent.html.twig with the code below

{% extends '@nucleus/partials/particle.html.twig' %}

{% block stylesheets %}
  <link rel="stylesheet" href="{{ url('gantry-theme://css/uikit.min.css') }}" type="text/css" />
  <link rel="stylesheet" href="{{ url('gantry-theme://css/components/slider.min.css') }}" type="text/css" />
  <link rel="stylesheet" href="{{ url('gantry-theme://css/components/dotnav.min.css') }}" type="text/css" />
  <link rel="stylesheet" href="{{ url('gantry-theme://css/components/slidenav.min.css') }}" type="text/css" />
{% endblock %}

{% block javascript_footer %}
  {% do gantry.load("jquery") %}
  <script src="{{ url('gantry-theme://js/uikit.min.js') }}"></script>
  <script src="{{ url('gantry-theme://js/components/slider.min.js') }}"></script>
  <script src="{{ url('gantry-theme://js/components/slideset.min.js') }}"></script>
  <script src="{{ url('gantry-theme://js/components/lightbox.min.js') }}"></script>
{% endblock %}

{% block particle %}
    {% if particle.enabled %}
        {% set article_settings = particle.article %}
        {% set filter = article_settings.filter %}
        {% set sort = article_settings.sort %}
        {% set limit = article_settings.limit %}
        {% set display = article_settings.display %}
        {% set rand = random() %}
        {# 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 featured = filter.featured | default('include') %}
        {% if featured == 'exclude' %}
            {% do
                article_finder.featured(false) %}
        {% elseif featured == 'only' %}
            {% do
                article_finder.featured(true) %}
        {% endif %}

        {% set articles = article_finder.order(sort.orderby, sort.ordering).limit(limit.total).start(limit.start).find() %}

        {% set medium = particle.columns/2 %}
        {% set medium = medium|round(0, 'ceil') %}
        {% set small = particle.columns/3 %}
        {% set small = small|round(0,'ceil') %}

        {# Init Slider #}
        {% set slidenav = particle.slidenav ? '<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slider-item="previous"></a><a href="" class="uk-slidenav uk-slidenav-next" data-uk-slider-item="next"></a>' : '' %}

        {% if particle.dotnav %}
          {% set dotnav = '<ul class="uk-slider-nav uk-dotnav uk-flex-center">' %}
          {% for item in particle.items %}
          {% set dotnav = dotnav ~ '<li data-uk-slider-item="' ~ loop.index0 ~ '"><a href=""></a></li>'%}
          {% endfor %}
          {% set dotnav = dotnav ~ '</ul>' %}
        {% else %}
          {% set dotnav = '' %}
        {% endif %}

        {% set options = '{
                      center:' ~ (particle.slider.center ? "true" : "false") ~ ',
                      infinite:' ~ (particle.slider.infinite ? "true" : "false") ~ ',
                      autoplay:' ~ (particle.autoplay ? "true" : "false") ~ ',
                      pauseOnHover:' ~ (particle.pause ? "true" : "false") ~ ',
                      autoplayInterval:' ~ particle.interval ~ '
                    }' %}
        {% set slider = '<div class="uk-slidenav-position" data-uk-slider="' ~ options ~'"><div class="uk-slider-container"><div class="uk-slider ' ~ particle.gutter ~' uk-grid-width-small-1-' ~ small ~ ' uk-grid-width-medium-1-' ~ medium ~ ' uk-grid-width-large-1-' ~ particle.columns ~ '">' %}
        {% set sliderend = '</div></div>' ~ slidenav ~ dotnav ~ '</div>' %}

        {# Init Slideset #}
        {% set dotnav = particle.dotnav ? '<ul class="uk-slideset-nav uk-dotnav uk-flex-center"></ul>' : '' %}
        {% set slidenav = particle.slidenav ? '<a href="" class="uk-slidenav uk-slidenav-previous" data-uk-slideset-item="previous"></a><a href="" class="uk-slidenav uk-slidenav-next" data-uk-slideset-item="next"></a>' : '' %}

        {% set options = '{
                  small:' ~ small|round ~ ',
                  medium:' ~ medium|round ~ ',
                  large:' ~ particle.columns ~ ',
                  xlarge:' ~ particle.columns ~ ',
                  animation: \'' ~ particle.slideset.animation ~ '\',
                  duration:' ~ particle.slideset.duration ~ ',
                  autoplay:' ~ (particle.autoplay ? "true" : "false") ~ ',
                  pauseOnHover:' ~ (particle.pause ? "true" : "false") ~ ',
                  autoplayInterval:' ~ (particle.interval ? "7000" : particle.interval) ~ '
               }' %}

        {% set slideset = '<div data-uk-slideset="' ~ options ~ '"><div class="uk-slidenav-position"><div class="uk-grid '~ particle.gutter ~' uk-slideset">' %}
        {% set slidesetend = '</div>' ~ slidenav ~ '</div>' ~ dotnav ~ '</div>' %}

        {# Init Default #}
        {% set default = '<div class=" ' ~ particle.gutter ~' uk-grid uk-grid-width-small-1-' ~ small ~ ' uk-grid-width-medium-1-' ~ medium ~ ' uk-grid-width-large-1-' ~ particle.columns ~ '" data-uk-grid-margin>' %}
        {% set defaultend = '</div>' %}

        {# Switch Slide Type #}
        {% if particle.slide == "slider" %}
          {% set begin = slider %}
          {% set end = sliderend %}
        {% elseif particle.slide == "slideset" %}
          {% set begin = slideset %}
          {% set end = slidesetend %}
        {% else %}
          {% set begin = default %}
          {% set end = defaultend %}
        {% endif %}
        {# BEGIN JOOMLA CONTENT #}
        <div class="jl-joomlacontent {{particle.class}}">
            {{begin|raw}}
            {% for article in articles %}
                {# Init Template #}

                {% if display.image.enabled and article.images.image_intro or article.images.image_fulltext %}
                    {% if article.images.image_intro and display.image.enabled == 'intro' or display.image.enabled == 'show' %}

                        {% set articleImage = '<img src="' ~ url(article.images.image_intro) ~ '" ' ~ article.images.image_intro | imagesize | raw ~ ' alt="'~ article.images.image_intro_alt ~'"   />' %}
                          {% set articleImageLink =  url(article.images.image_intro)  %}

                    {% elseif article.images.image_fulltext and display.image.enabled == 'full' %}

                        {% set articleImage = '<img src="' ~ url(article.images.image_fulltext) ~ '" ' ~ article.images.image_fulltext | imagesize | raw ~ ' alt="'~ article.images.image_intro_alt ~'" />' %}
                          {% set articleImageLink =  url(article.images.image_fulltext)  %}

                    {% endif %}
                {% endif %}

                {% if display.title.enabled %}
                    {% set articleTitle = display.title.limit
                        ? article.title | truncate_text(display.title.limit)
                        : article.title %}
                {% endif %}
                
                {% if display.date.enabled %}
                    {% if display.date.enabled == 'published' %}
                        {% set articleDate = article.publish_up | date(display.date.format) %}
                    {% elseif display.date.enabled == 'modified' %}
                        {% set articleDate = article.modified | date(display.date.format) %}
                    {% else %}
                        {% set articleDate = article.created | date(display.date.format) %}
                    {% endif %}
                {% endif %}

                {% if display.author.enabled %}
                    {% set articleAuthor = article.author.name %}
                {% endif %}

                {% if display.category.enabled %}
                    {% set category_link = display.category.enabled == 'link' %}
                    {% set cat = article.categories | last %}
                    {% set articleCategoryLink = cat.route %}
                    {% set articleCategoryTitle = cat.title %}
                {% endif %}

                {% if display.hits.enabled %}
                    {% set articleHits = article.hits %}
                {% endif %}

                {% if display.text.type %}
                    {% set article_text = display.text.type == 'intro'
                        ? article.introtext
                        : article.text %}
                    {% if display.text.formatting == 'text' %}
                        {% set articleText = article_text | truncate_text(display.text.limit) %}
                    {% else %}
                        {% set articleText = article_text | truncate_html(display.text.limit) %}
                    {% endif %}
                {% endif %}

                {% if display.read_more.enabled %}
                    {% set articleReadmore ='
                    <button class="'~ display.read_more.css ~'">'~ display.read_more.label|default('Read More...') ~'</button>
        '%}
                {% endif %}
                {# end Template #}

                {# Begin Joola Content Item #}
                {% if particle.template.enabled %}
                    {# Custom Template #}
                    <div class="jl-content-item">
                        {{particle.template.content|replace({'%articleImage%': articleImage, '%articleLink%': article.route, '%articleTitle%': articleTitle, '%articleDate%': articleDate, '%articleAuthor%': articleAuthor, '%articleCategoryLink%': articleCategoryLink,
                        '%articleCategoryTitle%': articleCategoryTitle, '%articleHits%': articleHits, '%articleText%': articleText, '%articleReadmore%': articleReadmore, })|raw}}
                    </div>
                {% else %}
                    {# Default Template #}
                    <div class="jl-content-item">
                        <div class="jl-content-item-container uk-grid uk-grid-margin">
                            {# Begin Image #}
                            {% if display.image.enabled and article.images.image_intro or article.images.image_fulltext %}
                                <div class="jl-content-item-image uk-width-1-1">
                                    <a href="{{ articleImageLink }}" data-uk-lightbox="{group:'jl-joomlacontent-{{rand}}'}">

                                        {{articleImage|raw}}
                                    </a>
                                </div>
                            {% endif %}
                            {# End Image #}

                            {# Begin Title #}
                            {% if display.title.enabled %}
                                <div class="jl-content-item-title uk-width-1-1">
                                    <h3 class="jl-content-item-title">
                                        <a href="{{article.route}}">
                                            {{articleTitle|raw}}
                                        </a>
                                    </h3>
                                </div>
                            {% endif %}
                            {# End Title #}

                            {# Begin Detail #}
                            {% if display.date.enabled or display.author.enabled or display.category.enabled or display.hits.enabled %}
                                <div class="jl-content-item-details">
                                    {# Date Detail #}
                                    {% if display.date.enabled %}
                                        <span class="jl-content-item-date">
                                            <i class="fa fa-clock-o" aria-hidden="true"></i>
                                            {{ articleDate|raw }}
                                        </span>
                                    {% endif %}
                                    {# End Date Detail #}

                                    {# Author Detail #}
                                    {% if display.author.enabled %}
                                        <span class="jl-content-item-author">
                                            <i class="fa fa-user" aria-hidden="true"></i>
                                            {{ articleAuthor|raw }}
                                        </span>
                                    {% endif %}
                                    {# End  Author Detail #}

                                    {# Category Detail #}
                                    {% if display.category.enabled %}
                                        <span class="jl-content-item-category">
                                            {% if category_link %}
                                                <a href="{{ articleCategoryLink }}">
                                                    <i class="fa fa-folder-open" aria-hidden="true"></i>
                                                    {{ articleCategoryTitle }}
                                                </a>
                                            {% else %}
                                                <i class="fa fa-folder-open" aria-hidden="true"></i>
                                                {{ articleCategoryTitle }}
                                            {% endif %}
                                        </span>
                                    {% endif %}
                                    {# End Category Detail #}

                                    {# Hits Detail #}
                                    {% if display.hits.enabled %}
                                        <span class="jl-content-item-hits">
                                            <i class="fa fa-eye" aria-hidden="true"></i>
                                            {{articleHits|raw}}
                                        </span>
                                    {% endif %}
                                    {# End Hits Detail #}

                                </div>
                            {% endif %}
                            {# End Detail #}

                            {# Begin Text #}
                            {% if display.text.type %}
                                <div class="jl-content-item-text uk-width-1-1">
                                    {{articleText|raw}}
                                </div>
                            {% endif %}
                            {# End Text #}

                            {# Begin Read More #}
                            {% if display.read_more.enabled %}
                                <div class="jl-content-item-read-more">
                                    <a href="{{ article.route }}">
                                        {{articleReadmore|raw}}
                                    </a>
                                </div>
                            {% endif %}
                            {# End Read More #}
                        </div>
                    </div>
                {% endif %}
                {# End Joola Content Item #}

            {% endfor %}
            {{end|raw}}
        </div>
        {# END JOOMLA CONTENT #}

    {% endif %}
{% endblock %}

Let me know if it works for you.

Thanks

[Fabio Malugani]

Many thanks Tony…
I’ve replaces the joomlacontent.html.twig in templates/jl_education_pro/custom/particles but doesn’t works.. the tag alt is empty..
The tag alt is here…is correct?

Fabio

[Tony]

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.

[Fabio Malugani]

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.

[Tony]

Hi Fabio,

Could you pls set the account to super user so I can check the source code for joomla content particle?

Thank you

[Fabio Malugani]

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.

[Fabio Malugani]

This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.

[Michael]

Hi Fabio,

I fixed the ALT tags issue of Joomlacontent Particles.

Atl tags of overlay I added alt tags field so you can customize alt tags.

https://imgur.com/a/glnPi

Thank you

• This reply was modified 6 years, 3 months ago by Michael.
• This reply was modified 6 years, 3 months ago by Michael.
• This reply was modified 6 years, 3 months ago by Michael.
• This reply was modified 6 years, 3 months ago by Michael.

[Fabio Malugani]

I LOVE YOU MICHAEL !! 😉