templates/network/profile/components/listing.html.twig line 6

Open in your IDE?
  1. {% if listing %}
  2.   {% block listing_container %}
  3.     <section class="py-8">
  4.       <div class="container mx-auto max-w-screen-3xl">
  5.         <div class="grid gap-6 md:grid-cols-2 xl:grid-cols-2">
  6.           {% block listing %}
  7.             {% for profile in listing %}
  8.               {% block list_item %}
  9.                 <a href="{{ pimcore_url({ object: profile }) }}">
  10.                   <div class="relative flex items-center justify-center h-64 overflow-hidden"
  11.                     style="background-color:{{ profile.color }};">
  12.                     {% if profile.banner %}
  13.                       <div class="absolute w-full h-full opacity-25">
  14.                         {# <img class="object-cover object-center w-full h-full mx-auto"
  15.                       src="{{ profile.banner }}" /> #}
  16.                         {{
  17.                           profile.banner.thumbnail('auctionhouse-listing-banner').html({
  18.                             pictureAttributes: {
  19.                               class: 'object-cover object-center w-full h-full mx-auto'
  20.                             },
  21.                             imgAttributes: {
  22.                               class: 'object-cover object-center w-full h-full mx-auto'
  23.                             }
  24.                           })|raw
  25.                         }}
  26.                       </div>
  27.                     {% endif %}
  28.                     {% if profile.avatar and profile.avatar.mimetype != 'image/svg+xml' %}
  29.                       <div class="z-30 w-8/12 sm:w-6/12" style="">
  30.                         <div class="grid grid-cols-1 gap-10">
  31.                           <div class="items-center justify-center {{
  32.                             profile.avatar == true
  33.                               ? 'flex'
  34.                               : 'hidden'
  35.                             }} w-24 h-24 mx-auto text-center bg-white">
  36.                             {# <img src="{{ profile.avatar }}" class="w-full h-auto max-h-full mx-auto" /> #}
  37.                             {{
  38.                               profile.avatar.thumbnail('auctionhouse-listing-avatar').html({
  39.                                 pictureAttributes: { class: 'w-full h-auto mx-auto max-h-full' },
  40.                                 imgAttributes: { class: 'w-full h-auto mx-auto max-h-full' }
  41.                               })|raw
  42.                             }}
  43.                           </div>
  44.                           <div class="text-sm">
  45.                             <div class="flex flex-col items-center justify-between gap-3 p-3 mx-auto font-medium text-center uppercase whitespace-no-wrap bg-white lg:p-5 sm:font-medium sm:text-left sm:flex-row gap-x-2">
  46.                               <p class="w-8/12">
  47.                                 {{ profile.name }}
  48.                               </p>
  49.                               <div class="flex justify-center w-3/12">
  50.                                 {% include 'icons/arrow-right-tail.svg.twig' with {
  51.                                   class: 'text-black h-4 w-4'
  52.                                 } %}
  53.                               </div>
  54.                             </div>
  55.                           </div>
  56.                         </div>
  57.                       </div>
  58.                     {% else %}
  59.                       <div class="z-30 w-8/12 sm:w-6/12" style="">
  60.                         <div class="grid grid-cols-1 gap-10">
  61.                           <div class="flex items-center justify-center w-24 h-24 mx-auto text-center bg-white">
  62.                             {% include 'component/avatar.html.twig' with {
  63.                               avatar: profile.avatar,
  64.                               initials: profile.name|initials,
  65.                               rounded: false,
  66.                               size: 'small'
  67.                             } only %}
  68.                           </div>
  69.                           <div class="text-sm">
  70.                             <div class="flex flex-col items-center justify-between gap-3 p-3 mx-auto font-medium text-center uppercase whitespace-no-wrap bg-white lg:p-5 sm:font-medium sm:text-left sm:flex-row gap-x-2">
  71.                               <p class="w-8/12">
  72.                                 {{ profile.name }}
  73.                               </p>
  74.                               <div class="flex justify-center w-3/12">
  75.                                 {% include 'icons/arrow-right-tail.svg.twig' with {
  76.                                   class: 'text-black h-4 w-4'
  77.                                 } %}
  78.                               </div>
  79.                             </div>
  80.                           </div>
  81.                         </div>
  82.                       </div>
  83.                     {% endif %}
  84.                   </div>
  85.                 </a>
  86.               {% endblock %}
  87.             {% endfor %}
  88.           {% endblock %}
  89.         </div>
  90.       </div>
  91.     </section>
  92.   {% endblock %}
  93. {% endif %}