app/template/default/Block/cm_blog_block_pro.twig line 1

Open in your IDE?
  1. {% set config = repository('Plugin\\CMBlogPro42\\Entity\\Config').get() %}
  2. {% set blogs = repository('Plugin\\CMBlogPro42\\Entity\\Blog').getList() %}
  4. {% block javascript %}{% endblock %}
  6. <section id="home_news">
  7.     <div class="home_title__inner">
  8.         <h2 class="home_en_title "><span class="en">News</span><small>お知らせ</small></h2>
  9.         <a class="base_link_brn" href="{{ url('homepage') }}news/">
  10.             <span>お知らせ一覧</span>
  11.             <span>お知らせ一覧</span>
  12.         </a>
  13.     </div><!--/.home_title__inner-->
  15.     <div class="home_news__inner">
  16.         <ul class="import_notice__list">
  17.             {% for blog in blogs %}
  18.             <li>
  19.                 <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}">
  20.                     <span class="news_thumb">
  21.                         {% if blog.getMainListImage %}
  22.                             <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'>
  23.                         {% else %}
  24.                             <img src="{{ asset('assets/img/common/default_thumb.jpg') }}" class='item_blog_image'>
  25.                         {% endif %}
  26.                     </span>
  27.                     <span class="news_text">
  28.                         <span class="news_text__top">
  29.                         <span class="date">{{ blog.release_date|date('Y.m.d')}}</span>
  30.                         {% if blog.getBlogCategories is empty %}
  31.                              <span class="list_category_link">［お知らせ]</span>
  32.                         {% else %}
  33.                             {% for category in blog.getBlogCategories %}
  34.                                 <span class="list_category_link">
  35.                                 ［{{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}］
  36.                                 </span>
  37.                             {% endfor %}
  38.                         {% endif %}
  39.                         </span><!--/.news_text__top-->
  40.                         <span class="ttl">{{ blog.getTitle|raw }}</span>
  41.                     </span>
  42.                 </a>
  43.             </li>
  44.             {% endfor %}
  45.         </ul>
  46.     </div><!--/.home_news__inner-->
  48.     <div class="sp_center_link_btn">
  49.         <a class="base_link_brn" href="{{ url('homepage') }}news/">
  50.             <span>お知らせ一覧</span>
  51.             <span>お知らせ一覧</span>
  52.         </a>
  53.     </div><!--/.sp_center_link_btn-->
  54. </section><!--/#home_news-->
  57. {#
  58. {% block stylesheet %}
  59. <style>
  60. /* style by mark */
  62. .cm_blog_plugin .list_blog .ec-topicpath__item {
  63.     display: initial;
  64. }
  66. .cm_blog_plugin .list_blog .ec-topicpath__item a:hover {
  67.     text-decoration: underline;
  68. }
  70. .cm_blog_plugin .item_blog_image {
  71.     width: 100% !important;
  72.     height: 248px;
  73.     object-fit: cover;
  74. }
  76. .cm_blog_plugin .list_blog .list_category_link{
  77.     color: #337ab7;
  78.     padding: .2rem 0.5rem;
  79.     font-size: 1.3rem;
  80.     border-right: 1px solid #ddd;
  81. }
  82. .cm_blog_plugin .blog_category li:last-child .list_category_link{
  83.     border: none;
  84. }
  86. .cm_blog_plugin .blog_category{
  87.     margin: 0;
  88.     padding: 0;
  89.     display: flex;
  90.     flex-wrap: wrap;
  91. }
  92. .cm_blog_plugin .blog_category li{
  93.     display: initial;
  94. }
  95. .cm_blog_plugin .figure__main_image{
  96.     margin: 0;
  97.     padding: 0;
  98.     display: grid;
  99.     justify-content: stretch;
  100.     align-items: flex-end;
  101. }
  102. .cm_blog_plugin .item_blog_image,
  103. .cm_blog_plugin figcaption {
  104.     padding: 0;
  105.     grid-column: 1/2;
  106.     grid-row: 1/2;
  107. }
  108. .cm_blog_plugin figcaption {
  109.     text-align: center;
  110.     padding: 0.4rem 2rem;
  111.     font-size: 1rem;
  112.     background-color: rgba(0,0,0,.7);
  113.     color: #fff;
  114.     overflow: hidden;
  115.     white-space: normal;
  116.     word-wrap: break-word;
  117. }
  119. .cm_blog_plugin .list_blog h3{
  120.     margin-top: 10px;
  121.     margin-bottom: 1px;
  122.     font-size: 16px;
  123.     line-height: 1.4;
  124.     word-break: break-word;
  125. }
  126. .cm_blog_plugin .blog_release_date {
  127.     font-size: 1rem;
  128.     margin-bottom: 1rem;
  129. }
  131. @media screen and (max-width: 768px){
  132. .cm_blog_plugin .item_blog_image {
  133.     width: 100% !important;
  134.     height: 35vw;
  135.     object-fit: cover;
  136.     }
  137. .cm_blog_plugin .cm_blog_plugin{
  138.     padding: 10vw 0 !important;
  139.     }
  140. }
  141. </style>
  142. {% endblock %}
  144. {% if blogs is defined and blogs|length > 0 %}
  145. <div class="ec-categoryRole cm_blog_plugin">
  147.     <div class="ec-role">
  148.         <div class="ec-secHeading">
  149.             <span class="ec-secHeading__en">{{config.getTitleEn}}</span>
  150.             <span class="ec-secHeading__line"></span>
  151.             <span class="ec-secHeading__ja">{{config.getTitleJp}}</span>
  152.         </div>
  153.         <div class="ec-shelfRole" style="padding-top: 20px">
  154.             <ul class="ec-shelfGrid list_blog">
  155.                 {% for blog in blogs %}
  156.                     <li class="ec-shelfGrid__item">
  157.                         <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}">
  158.                             <figure class="figure__main_image">
  159.                             {% if blog.getMainListImage %}
  160.                                 <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  161.                                 {% else %}
  162.                                 <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  163.                             {% endif %}
  164.                             {% if blog.getFigCaption %}
  165.                                 <figcaption>{{ blog.getFigCaption }}</figcaption>
  166.                             {% endif %}
  167.                             </figure>
  168.                         </a>
  169.                         <h3>
  170.                             <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}">
  171.                                 {{ blog.getTitle|length > 40 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 40)|raw ~ '...' : blog.getTitle|raw }}
  172.                             </a>
  173.                         </h3>
  174.                         <div class="blog_release_date">公開日：{{ blog.release_date|date('Y年m月d日')}}</div>
  175.                         <ul class="blog_category">
  176.                             {% for category in blog.getBlogCategories %}
  177.                                 <li class="{{category.getCategory.class|raw}}">
  178.                                     <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  179.                                     {{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}
  180.                                     </a>
  181.                                 </li>
  182.                             {% endfor %}
  183.                         </ul>
  184.                     </li>
  185.                 {% endfor %}
  186.             </ul>
  187.         </div>
  188.     </div>
  189. </div>
  190. {% endif %}
  191. #}