app/template/default/Artists/index.twig line 1

Open in your IDE?
  1. {#
  2. This file is part of EC-CUBE
  4. Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
  6. http://www.ec-cube.co.jp/
  8. For the full copyright and license information, please view the LICENSE
  9. file that was distributed with this source code.
  10. #}
  11. {% extends 'default_frame.twig' %}
  13. {% block javascript %}
  14. <script>
  15. </script>
  16. {% endblock %}
  18. {% block stylesheet %}
  19.     <style>
  20.         .artists-title {
  21.             margin-left: 5%;
  22.             font-weight: bold;
  23.         }
  25.         .artist-flex {
  26.             background-color: #f4f1ee;
  27.             padding: 20px;
  28.             padding-left: 5%;
  29.             margin-top: 50px;
  30.             margin: 3%;
  31.             display: flex;
  32.             flex-wrap: wrap;
  33.             border-radius: 10px;
  34.         }
  35.         .artist-img-wrapper {
  36.             padding: 10px;
  37.             margin: 10px;
  38.             border-radius: 5px;
  39.             font-size: 20px;
  40.             width: 45%;
  41.             position: relative;
  42.             flex-wrap: wrap;
  43.         }
  44.         .artist-img-wrapper img {
  45.             min-width: 600px;
  46.             max-width: 600px;
  47.             width: 600px;
  48.             height: 300px;
  49.         }
  50.         .artist-img-wrapper2 {
  51.             position: absolute;
  52.             bottom: 20px;
  53.             left: 77%;
  54.             width: 50%;
  55.         }
  57.         /* 770以下の時 */
  58.         @media screen and (max-width: 790px) {
  59.         .under790 {
  60.             width: 46%;
  61.         }
  62.         .under790-2 {
  63.             display: none;
  64.         }
  65.         }
  67.         /* 620以下の時 */
  68.         @media screen and (max-width: 620px) {
  69.         .under620 {
  70.             width: 100%;
  71.         }
  72.         }
  74.         .artist-img-wrapper a {
  75.             color: black;
  76.         }
  78.         .artist-img-wrapper a:hover {
  79.             color: #d5a770;
  80.         }
  82.         .artist-img-wrapper p {
  83.             font-size: 20px;
  84.             margin-top: 5px;
  85.         }
  87.         .artist-img-wrapper img {
  88.             min-width: 100%;
  89.             width: 100%;
  90.             height: 400px;
  91.             border-radius: 5%;
  92.         }
  94.         .header-photo {
  95.             position: relative;
  96.         }
  98.         .header-photo h2 {/*h2タグを画像の真ん中に*/
  99.             position: absolute;
  100.             top: 50%;
  101.             left: 50%;
  102.             -ms-transform: translate(-50%,-50%);
  103.             -webkit-transform: translate(-50%,-50%);
  104.             transform: translate(-50%,-50%);
  105.             margin:0;/*余計な隙間を除く*/
  106.             padding:0;/*余計な隙間を除く*/
  107.             color: white;/*文字色*/
  108.             font-size: 40px;/*文字サイズ*/
  109.             text-align:center;/*pタグ内で更に中央寄せ*/
  110.             font-family: 'Quicksand',sans-serif;
  111.             font-weight: "bold";
  112.         }
  114.         .header-photo img {
  115.             width: 99.5%;
  116.         }
  118.         .artist-art img {
  119.             width: 300px;
  120.             height: 300px;
  121.         }
  123.         .img-wrapper-artist {
  124.         }
  126.         .img-wrapper-artist img {
  127.             padding-bottom: 5px;
  128.         }
  130.         .top-left {
  131.             position: absolute;
  132.             top: 25px;
  133.             left: 25px;
  134.             color: white;
  135.         }
  137.     </style>
  138. {% endblock %}
  141. {% block main %}
  142.     <div class="header-photo">
  143.         <img src="https://sh-cdn.singulart.com/eyJidWNrZXQiOiJzaW5ndWxhcnQtd2Vic2l0ZS1wcm9kIiwia2V5IjoiYXJ0aXN0c1wvdjJcL3BpY3R1cmVzXC9jcm9wcGVkXC9zdHVkaW9cL2Jhc2VcLzEzMzZfc3R1ZGlvXzAwNzY1OGQ0NDRlMWE1MjhiOWRlODIxYmQ0MTRiNzEzLmpwZWciLCJlZGl0cyI6eyJyZXNpemUiOnsid2lkdGgiOjEyMDAsImhlaWdodCI6NDYwLCJmaXQiOiJjb3ZlciJ9LCJ0b0Zvcm1hdCI6IndlYnAiLCJ3ZWJwIjp7InF1YWxpdHkiOjgwfX19?signature=8dd9a04e219b34454723ae1876cda86063e22f77b898d6d073c648889889b95e">
  144.         <h2 class="artists-title">芸術家</h2>
  145.     </div>
  147.     <div class="artist-flex">        
  148.         {% for artist in artists %}
  149.             <div class="artist-img-wrapper under790 under620">
  150.                 <a href="/artists/detail/{{ artist.id }}">
  151.                     {# artist写真 #}
  152.                     <img src="{{ asset(artist.image |no_image_product, 'user_data') }}" alt=artist.name>
  153.                     {# artistが出品した写真（3枚まで） #}
  154.                     <div class="artist-img-wrapper2">
  155.                         {% for i in 0 .. num - 1 %}
  156.                             {% if selectedProducts is defined %}
  157.                                 {% for selectedProduct in selectedProducts[i] %}
  158.                                     {% if selectedProduct.artist_id == artist.id %}
  159.                                     {% if loop.index < 4 %}
  160.                                         <div class="img-wrapper-artist">
  161.                                             <a href="{{ url('product_detail', {'id': selectedProduct.id}) }}">
  162.                                                 <img class="img" src="{{ asset(selectedProduct.main_list_image|no_image_product, 'save_image') }}" alt="{{ selectedProduct.name }}" {% if loop.index > 5 %} loading="lazy"{% endif %}>
  163.                                             </a>
  164.                                         </div>
  165.                                     {% endif %}
  166.                                     {% endif %}
  167.                                 {% endfor %}
  168.                             {% endif %}
  169.                         {% endfor %}
  170.                     </div>
  171.                     <p class="fontweight-bold top-left">{{ artist.name }}</p>
  172.                 </a>
  173.             </div>
  175.         {% endfor %}
  176.     </div>
  177. {% endblock %}