Вывод галерери из Фото по 3 штуки в ряд

Подскажите, плз, как вывести галерею (в например сайдбар, но это не важно) из приложения фото так, чтобы превьюшки были не 1 штука в ряд, а 3? На старой теме такой же вывод работал как надо, сейчас выводится только 1 фотка в ряд. Код такой:

            {if $wa->photos}
    {$photos = $wa->photos->photos("/album/2", "970")}
    {foreach $photos as $photo}
        <p>{if $photo.description}{$photo.description}<br>{/if}
            <img src='{$photo.thumb_970.url}' alt='{$photo.name}.{$photo.ext}'>
        </p>
    {/foreach}

12 ответов

  • 1
    replicant 16 января 2020 19:31 #

    Вашей затее мешает тег <p></p>. Вы каждую фотографию обрамляете тегом нового параграфа. Каждая фотография выходит с новой строки.

    • +1
      Stiv Stiv 16 января 2020 19:38 #

      Так было в старой теме. Можно убрать параграфы - уберется только межстрочный (вертикальный) интервал между фотками. Но по прежнему будет вывод по одной фотке в строку...

  • 1
    Stiv 16 января 2020 19:39 #

    И, кстати, сейчас это решение вообще не работает как надо - просто выводятся фотки в столбик, вместо кликабельных превьюшек. Хотя тут более-менее понятно, в старой теме был подключен fancy lightbox.

    Было: https://www.krafthaus.ru/v1/tandyry/

    Cейчас: https://www.krafthaus.ru/tandyry/info/faq/

    • +1
      replicant replicant 16 января 2020 19:53 #

      Тогда показывайте ссылку на сайт и место, где у вас там этот блок. Если менялась тема, то и свойства объектов определяются теперь новыми правилами, в которых вам предстоит разбираться.

      У вас для изображений стоит свойство max-width:100%

      Создайте какое-нибудь более конкретное правило для этих картинок в сайдбаре типа

      .sidebar img { max-width: 50%; }

      Тогда картинки не будут занимать 100% ширины, а будут в половину блока и поместятся по две или 33%, чтобы влезли по три штуки.



      Если честно, то вся сборка этого блока должна быть переделана полностью. Вы превьюшки из больших изображений методом утягивания собираете в эту ленту. Сайдбар на несколько мегабайт потянет. Всё переделать надо. А иначе так и будет что 186кБайт в размере 800px × 533px выходит в масштабе 84px × 56px.

      • +1
        Stiv Stiv 16 января 2020 20:42 #

        Полностью согласен, что все надо переделать. Вопрос лишь в том - можно ли это сделать стандартными средствами движка/темы или надо условный отдельный плагин для галереи писать? Или дешевле будет просто тему сменить на более удобную...

        • +2
          replicant replicant 16 января 2020 22:45 #

          Средства выбранной вами темы предполагают, что можно задействовать код https://photoswipe.com/. В этой теме есть крепкая основа для неплохой галереи и какой-то сторонний плагин скорее всего не нужен. Надо разобраться сначала с тем, что есть и как имеющимся пользоваться.

          Менять темы тоже то ещё развлечение. У вас хорошая тема. Начните изучать её устройство, шаблоны, html/css. В какой-то момент дело сдвинется, но потребуется время.

          • +1
            Stiv Stiv 17 января 2020 00:03 #

            Я бы с радостью изучил все и не задавал глупых вопросов тут, если бы к теме прилагалась нормальная документация. К сожалению, ее почти нет. Техподдержка разработчика на вопросы отвечает выборочно, в частности на этот ответа от них я так и не получил.

            • +1

              Проблема многих заключается в том, что они считают что приборетя лицензию на тему/плагин/приложение они получают в рабство разработчика, который должен исполнять все прихоти Хозяина по первому зову. Как только вам удастся избавиться от этой навязчивой идеи, и осознать что за ваш магазин/сайт/блог никто кроме вас ответственности не несет, все сразу нормализуется и встанет на свои места.

              P.S. Это касается исключительно комментария на который был дан ответ, а не темы в целом.

              • +1
                Stiv Stiv 17 января 2020 00:57 #

                О, очередной гуру! Мне интересно, неужели вам платят за такие комментарии или это способ самоудовлетворения такой: дать наставление, которого не просили, вместо ответа по существу?

                • +1

                  Да, когда удается донести до пользователя что именно он в ответе за свой сайт, а не разработчики плагинов/тем и прочее - я получаю моральное удовлетворение =)  До вас, похоже, донести сию прописную истину не представляется возможным =)

  • 1
    Stiv 17 января 2020 03:06 #

    Решение находится в файлах post.photos.html и layouts/layout.gallery.html. Итоговый код должен выглядеть примерно так:

    <div class="gallery gallery--tile">
        <div class="gallery__items row photoswipe">
          {$_photos = $wa->photos->photos("/album/2", "96x96, 970")}
          {foreach $_photos as $_photo}
            <figure class="gallery__col col-md-4 col-sm-2 col-12" itemscope itemtype ="http://schema.org/Photograph">
              <a class="gallery__item photoswipe__image" href="{$_photo.thumb_970.url}" name="photo{$photo.id}">
                <img class="gallery__image" src="{$_photo.thumb_96x96.url}" class="retinify" alt="{$photo.name|escape}" title="{$_photo.name}">
                {if $photo.description}
                  <div class="gallery__description" itemprop="description">{$photo.description}</div>
                {/if}
              </a>
            </figure>
          {/foreach}
        </div>
      </div>

    Еще бы понять, почему названия и описания фоток не показываются ни здесь, ни собственно в альбомах, встроенных в блог...

    • +1
      replicant replicant 17 января 2020 13:18 #

      Вы забыли поставить _ перед

      $photo.description

      Вы же обращаетесь к массиву как

      foreach $_photos as $_photo

      А значит элементы будут $_photo.name, $_photo.description, $_photo.id и т.п.


      Имя массива должно быть указано хотя бы одинаково как $_photo, а тут в одной строке и так и сяк

      alt="{$photo.name|escape}" title="{$_photo.name}"

      В приведенном вами куске кода увидел 4 опечатки.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите