app/template/default/blog/list.twig line 1

Open in your IDE?
  1. {% extends 'default_frame.twig' %}
  3. {% block javascript %}{% endblock %}
  5. {% block stylesheet %}
  6. <style>
  7. /* .pluginCMBblog .item_blog_image {
  8.     width: 100% !important;
  9.     height: 248px;
  10.     object-fit: cover;
  11. }
  12. .pluginCMBblog .figure__main_image{
  13.     margin: 0;
  14.     padding: 0;
  15.     display: grid;
  16.     justify-content: stretch;
  17.     align-items: flex-end;
  18. }
  20. .pluginCMBblog .item_blog_image,
  21. .pluginCMBblog figcaption {
  22.     padding: 0;
  23.     grid-column: 1/2;
  24.     grid-row: 1/2;
  25. }
  26. .pluginCMBblog figcaption {
  27.     text-align: center;
  28.     padding: 0.4rem 2rem;
  29.     font-size: 1rem;
  30.     background-color: rgba(0,0,0,.7);
  31.     color: #fff;
  32.     overflow: hidden;
  33.     white-space: normal;
  34.     word-wrap: break-word;
  35. } */
  38. .pluginCMBblog .ec-topicpath .ec-topicpath__item{
  39.     display: initial !important;
  40. }
  42. .pluginCMBblog .list_blog_cat li {
  43.     display: initial !important;
  44.     letter-spacing: 0.2rem;
  45.     font-size: 16px;
  46. }
  47. .pluginCMBblog .list_blog .list_category_link{
  48.     color: #337ab7;
  49.     padding: .2rem 0.5rem;
  50.     font-size: 1.3rem;
  51.     
  52.     border-right: 1px solid #ddd;
  53. }
  55. .pluginCMBblog .blog_category li:last-child .list_category_link{
  56.     border: none;
  57. }
  59. .w-100 {
  60.     width: 100%
  61. }
  62. .side-bar > div {
  63.     width: 90%;
  64. }
  65. h5.tag-header {
  66.     font-family: Oswald;
  67.     font-weight: bold;
  68.     font-size: 22px;
  69.     color: #333;
  70.     border-bottom: 4px solid #000;
  71. }
  72. .month-archive a {
  73.     margin-bottom: 8px;
  74.     display: block;
  75.     color: #333;
  76. }
  77. .month-archive a:hover {
  78.     color: #337ab7;
  79. }
  81. .archive-link-div {
  82.     max-height: 600px;
  83.     overflow-y: scroll;
  84. }
  85. .archive-link-div::-webkit-scrollbar {
  86.     display: none;
  87. }
  89. .pluginCMBblog .blog-list {
  90.     padding-left: 0;
  91.     list-style-type: none;
  92. }
  93. .pluginCMBblog .blog-list__item {
  94.     margin: 20px 0;
  95.     display: flex;
  96.     align-items: center;
  97.     gap: 15px;
  98. }
  100. .pluginCMBblog .blog-list__item .blog-image {
  101.     max-width: 170px;
  102. }
  104. .pluginCMBblog .blog-list__item .blog-info {
  105.     width: calc(100% - 190px);
  106.     border-bottom: 1px dashed #707070;
  107.     font-size: 13px;
  108.     color: #333;
  109. }
  111. .pluginCMBblog .blog-list__item .blog_release_date {
  112.     display: inline-block;
  113.     margin-right: 10px;
  114.     color: #707070;
  115. }
  117. .pluginCMBblog .blog-list__item .blog_category {
  118.     display: inline-block;
  119.     padding-left: 0;
  120.     list-style-type: none;
  121. }
  123. .pluginCMBblog .blog-list__item .blog_category a {
  124.     padding: 3px 5px;
  125.     color: white;
  126.     background: #333;
  127. }
  129. .pluginCMBblog .blog-list__item .blog_title_h3 {
  130.     margin: 20px 0;
  131.     line-height: 30px;
  132. }
  134. .pluginCMBblog .blog-list__item .blog-link {
  135.     color: #333;
  136. }
  137. .pluginCMBblog .blog-list__item .blog-link:hover {
  138.     color: #337ab7;
  139. }
  140. .pluginCMBblog .blog-list__item .blog-link .chevron-right {
  141.     display: inline-block;
  142.     width: 18px;
  143.     height: 18px;
  144.     border-radius: 50%;
  145.     background: black;
  146.     text-align: center;
  147. }
  148. .pluginCMBblog .blog-list__item .blog-link .chevron-right .fas {
  149.     color: white;
  150. }
  151. /* .pluginCMBblog .figure__main_image {
  152.     box-shadow: 0px 0px 15px #888;
  153. } */
  155. .pluginCMBblog .figure__main_image img {
  156.     width: 170px;
  157.     height: 170px;
  158.     border-radius: 5px;
  159.     object-fit: cover;
  160. }
  162. .pluginCMBblog a:hover img {
  163.     opacity: .85;
  164. }
  166. @media screen and (max-width: 768px){
  167. /* .pluginCMBblog .item_blog_image {
  168.     width: 100% !important;
  169.     height: 40vw;
  170.     object-fit: cover;
  171.     }
  172.     .side-bar > div {
  173.         width: 100%
  174.     } */
  175.     .ec-shelfRole {
  176.         padding: 0;
  177.     }
  178.     .pluginCMBblog .blog-list__item {
  179.         flex-direction: column;
  180.         align-items: unset;
  181.     }
  182.     .pluginCMBblog .blog-list__item .blog-image {
  183.         width: 70%;
  184.     }
  185.     h5.tag-header {
  186.         margin-top: 40px;
  187.     }
  188. }
  189. @media only screen and (min-width: 768px) {
  190.     .side-bar {
  191.         width: 280px;
  192.     }
  193.     .ec-role {
  194.         display: flex;
  195.         justify-content: flex-start
  196.     }
  197. }
  198. </style>
  199. {% endblock %}
  201. {% block main %}
  202.     <div class="ec-role pluginCMBblog">
  203.         <div class="w-100">
  204.             {# <div class="ec-searchnavRole__topicpath">
  205.                 <ol class="ec-topicpath list_blog_cat">
  206.                     <li class="ec-topicpath__item">
  207.                         <a href="{{ url('cm_blog_pro_page_list') }}">{{ '全て'|trans }}</a>
  208.                     </li>
  209.                     {% for category in categories %}
  210.                 
  211.                     <li class="{{category.class}}">
  212.                         <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getId()]}) }}" class="list_category_link">
  213.                             {{ category.getName|raw }}
  214.                         </a>
  215.                     </li>
  216.                     {% endfor %}
  217.                 </ol>
  218.             </div> #}
  219.     
  220.             {% if pagination.totalItemCount > 0 %}
  221.                 <div class="ec-shelfRole">
  222.                     <ul class="blog-list">
  223.                         {% for blog in pagination %}
  224.                         <li class="blog-list__item">
  225.                             <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}" class="blog-image">
  226.                                 <figure class="figure__main_image">
  227.                                     {% if blog.getMainListImage %}
  228.                                         <img src="{{ asset(blog.getMainListImage|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  229.                                     {% else %}
  230.                                         <img src="{{ asset(''|no_image_product, 'save_image') }}" class='item_blog_image'></img>
  231.                                     {% endif %}
  232.                                     {% if blog.getFigCaption %}
  233.                                         <figcaption>{{ blog.getFigCaption }}</figcaption>
  234.                                     {% endif %}
  235.                                 </figure>
  236.                             </a>
  237.                             <div class="blog-info">
  238.                                 <div class="blog_release_date">{{ blog.release_date|date('Y.m.d')}}</div>
  239.                                 <ul class="blog_category">
  240.                                     {% for category in blog.getBlogCategories %}
  241.                                         <li class="{{category.getCategory.class}}">
  242.                                             <a href="{{ url('cm_blog_pro_page_list', {categories: [category.getCategory().getId()]}) }}" class="list_category_link">
  243.                                             {{ category.getCategory.getName|length > 15 ? category.getCategory.getName|striptags|replace({('&nbsp;'):' '})|slice(0, 15)|raw ~ '...' : category.getCategory.getName|raw }}
  244.                                             </a>
  245.                                         </li>
  246.                                     {% endfor %}        
  247.                                 </ul>
  248.                                 <h3 class="blog_title_h3">{{ blog.getTitle|length > 20 ? blog.getTitle|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.getTitle|raw }}</h3>  
  249.                                 <p class="blog_body">{{ blog.body|length > 45 ? blog.body|striptags|replace({('&nbsp;'):' '})|slice(0, 45)|raw ~ '...' : blog.body|raw }}</p>
  250.                                 <p style="margin: 10px;text-align: right">
  251.                                     <a href="{{ url('cm_blog_pro_page_detail', {'id': blog.slug ? blog.slug : blog.id}) }}" class="blog-link">
  252.                                         詳しく見る <span class="chevron-right"><i class="fas fa-chevron-right"></i></span>
  253.                                     </a>
  254.                                 </p>
  255.                             </div>
  256.                         </li>
  257.                         {% endfor %}
  258.                     </ul>
  259.                 </div>
  260.                 <div class="ec-pagerRole">
  261.                     {% include "pager.twig" with {'pages': pagination.paginationData, 'routes' : 'cm_blog_pro_page_list'} %}
  262.                 </div>
  263.             {% endif %}
  264.         </div>
  265.         <div class="side-bar">
  266.             {% set categoryRepository = repository('Plugin\\CMBlogPro42\\Entity\\Category') %}
  267.             {% set blogCategoryRepository = repository('Plugin\\CMBlogPro42\\Entity\\BlogCategory') %}
  268.             <div class="month-archive">
  269.                 <h5 class="tag-header">カテゴリ</h5>
  270.                 <div class="category-link">
  271.                     {% for Category in categoryRepository.findAll() %}
  272.                         <a href="{{ url('cm_blog_pro_page_list', {categories: [Category.getId()]}) }}" class="list_category_link">
  273.                             > {{ Category.getName|raw }}　 ({{ blogCategoryRepository.findBy({'Category': Category})|length }})
  274.                         </a>
  275.                     {% endfor %}
  276.                 </div>
  277.             </div>
  278.         </div>
  279.     </div> 
  280. {% endblock %}