Home Forums Template Support Particle Joomla Content

Viewing 10 posts - 1 through 10 (of 10 total)
  • Avatar
    Fabio Malugani
    Subscriber

    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
    Tony
    Moderator

    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

    Avatar
    Fabio Malugani
    Subscriber

    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?
    Tag title empty

    Fabio

    Tony
    Tony
    Moderator
    This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.
    Avatar
    Fabio Malugani
    Subscriber
    This reply has been marked as private, meaning that only the original poster and forum moderators can see the content of the reply.
    Tony
    Tony
    Moderator

    Hi Fabio,

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

    Thank you

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

    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 3 years ago by MichaelMichael.
    • This reply was modified 3 years ago by MichaelMichael.
    • This reply was modified 3 years ago by MichaelMichael.
    • This reply was modified 3 years ago by MichaelMichael.
    Avatar
    Fabio Malugani
    Subscriber

    I LOVE YOU MICHAEL !! 😉

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

Gantry5 particles 2.1.4 released, new features, bug fixes and more Changelog
HAPPY NEW YEAR - Save 40% Off Everything! Discount code: NEWYEAR2021 Shop Now