{% if articles|length > 0 %} <div class="row mb-3"> <div class="col-sm"> <h4 class="ui horizontal section divider header section-title"> {{ 'homepage.waitingList.maxNews'|trans }} <a class="title-link" href="{{ path('odiseo_sylius_blog_plugin_shop_article_index') }}">{{ 'homepage.waitingList.allNews'|trans }}</a> </h4> </div> </div> <div class="row"> {% for article in articles %} {% set uniqueArticleId = "blog_article_" ~ article.id %} <div class="col-sm col-md-4 mb-5" data-id="{{ uniqueArticleId }}"> <div class="ui fluid card homepage_blog_section"> <a class="header" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" class="header sylius-product-name title_block"> <picture> {% if article.images|length > 0 %} {% if app.environment == "prod" %} <source id="{{ uniqueArticleId }}_source_1" srcset="{{ article.images[0].path|imagine_filter(filter|default('my_shop_product_large_thumbnail')) }}" type="image/webp"> <source id="{{ uniqueArticleId }}_source_2" srcset="{{ article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) }}" type="image/jpg"> <img width="350px" height="350px" style="width:100% !important; height: auto !important;" src="{{ article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) }}" alt="{{ article.title }}" class="blog_image" onerror="this.src='{{ article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) }}';document.getElementById('{{ uniqueArticleId }}_source_1').srcset=document.getElementById('{{ uniqueArticleId }}_source_2').srcset=this.src;this.onerror=null;" /> {% else %} <source id="{{ uniqueArticleId }}_source_1" srcset="{{ article.images[0].path|imagine_filter(filter|default('my_shop_product_large_thumbnail')) }}" type="image/webp"> <source id="{{ uniqueArticleId }}_source_2" srcset="{{ article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) }}" type="image/jpg"> <img width="350px" height="350px" style="width:100% !important; height: auto !important;" src="{{ article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail')) }}" alt="{{ article.title }}" class="blog_image" onerror="this.src='{{article.images[0].path|imagine_filter(filter|default('sylius_shop_product_large_thumbnail'))}}';document.getElementById('{{ uniqueArticleId }}_source_1').srcset=document.getElementById('{{ uniqueArticleId }}_source_2').srcset=this.src;this.onerror=null;"/> {% endif %} {% else %} <source srcset="{{ asset('assets/shop/img/placeholder_max.webp') }}" type="image/webp"> <source srcset="{{ asset('assets/shop/img/placeholder_max.jpg') }}" type="image/jpg"> <img src="{{ asset('assets/shop/img/placeholder_max.jpg') }}" class="blog_image" /> {% endif %} </picture> </a> <div class="content blog_content"> <a class="header mh-20" href="{{ path('odiseo_sylius_blog_plugin_shop_article_show', {'slug' : article.slug}) }}" class="header sylius-product-name title_block"> {% if article.title|length > 45 %} {{ article.title|striptags|slice(0, 45)|raw }}.... {% else %} {{article.title}} {% endif %} </a> <div class="text_block"> {{ article.content|striptags|slice(0, 150)|raw }}...</div> </div> </div> </div> {% endfor %} </div>{% endif %}