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

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  3. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  4. http://www.ec-cube.co.jp/
  5. For the full copyright and license information, please view the LICENSE
  6. file that was distributed with this source code.
  7. #}
  8. {% block javascript %}
  9. <script>
  10.   $(function () {
  11.     $('#js-slider-3').slick({
  12.         arrows: true, // 前・次のボタンを表示する
  13.         speed: 500, // スライドさせるスピード(ミリ秒)
  14.         slidesToShow: 4, // 表示させるスライド数
  15.         centerMode: true, // slidesToShowが奇数のとき、現在のスライドを中央に表示する
  16.         variableWidth: true, // スライド幅の自動計算を無効化
  17.     });
  18.   });
  19. </script>
  20. {% endblock %}
  21. {% block stylesheet %}
  22.     <style>
  23.     .pickedCard {
  24.       width: auto;
  25.       height: auto;
  26.       position: relative;
  27.     }
  28.     .img-wrap {
  29.       width: 300px;
  30.       height: 400px;
  31.     }
  32.     .img {
  33.       width: auto;
  34.       max-width: 100%;
  35.       height: auto;
  36.       max-height: 400px;
  37.     }
  38.     .bottom-right {
  39.       position: absolute;
  40.       bottom: 10px;
  41.       right: 25px;
  42.       color: white;
  43.       font-weight: bold;
  44.     }
  45.     {# ihone #}
  46.     @media screen and (max-width: 415px ) {
  47.       .component-title {
  48.         font-size: 37px;
  49.       }
  50.     }
  51.     </style>
  52. {% endblock %}
  53. <div class="ec-role">
  54.   <div class="ec-secHeading">
  55.     <div class="component-title">注目のアーティスト</div>
  56.   </div>
  57.   <ul class="slider-2" id="js-slider-3">
  58.     <li>
  59.       <div class="ec-newItemRole__listItem pickedCard">
  60.           <a href="/artists">
  61.               <div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/manet_self-portrait.jpg"></div>
  62.           </a>
  63.       </div>
  64.     </li>
  65.     <li>
  66.       <div class="ec-newItemRole__listItem pickedCard">
  67.           <a href="/artists">
  68.               <div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/6MonetSPB-e1489564992931.jpg"></div>
  69.           </a>
  70.       </div>
  71.     </li>
  72.     <li>
  73.     <div class="ec-newItemRole__listItem pickedCard">
  74.           <a href="/artists">
  75.               <div class="img-wrap"><img class="img" src="https://spice.eplus.jp/images/CJNrOT3GWGfiteiLgImNzLhPGIRXCrZM3N12PqTyKrEekzWXTbDvO8iUMkmrZSyf"></div>
  76.           </a>
  77.       </div>
  78.     </li>
  79.     <li>
  80.       <div class="ec-newItemRole__listItem pickedCard">
  81.           <a href="/artists">
  82.               <div class="img-wrap"><img class="img" src="https://livedoor.blogimg.jp/insidercharmant/imgs/0/4/04dfd3b4.jpg"></div>
  83.           </a>
  84.       </div>
  85.     </li>
  86.     <li>
  87.       <div class="ec-newItemRole__listItem pickedCard">
  88.           <a href="/artists">
  89.               <div class="img-wrap"><img class="img" src="https://acrylicrab.com/wp-content/uploads/2017/03/Turner_selfportrait-788x1024.jpg"></div>
  90.           </a>
  91.       </div>
  92.     </li>
  93.     <li>
  94.     <div class="ec-newItemRole__listItem pickedCard">
  95.           <a href="/artists">
  96.               <img src="http://liveatloft.cocolog-nifty.com/photos/uncategorized/2015/01/22/photo_7.jpg">
  97.           </a>
  98.       </div>
  99.     </li>
  100.     {% for artist in artists %}
  101.       <li>
  102.         <div class="ec-newItemRole__listItem pickedCard">
  103.             <a href="/artists/detail/{{artist.id}}">
  104.               <div class="img-wrap"><img class="img" src="{{ asset(artist.image |no_image_product, 'user_data') }}" alt=artist.name><h4 class="bottom-right">{{artist.name}}</h4></div>
  105.             </a>
  106.         </div>
  107.       </li>
  108.     {% endfor %}
  109.   </ul>
  110. </div>