Isotope галерея

Подскажите, каким образом организовать на сайте галерею вида
имеются ли готовые решения для этих целей?
Антон
23 мая 2016, 18:45
modx.pro
3
2 617
0

Комментарии: 12

    Антон
    24 мая 2016, 08:22
    0
    видел этот пост, не совсем из него понял, откуда эта галерея черпает изображения? каким образом выстраивать структуру этой галереи?
      Алексей Федоров
      24 мая 2016, 09:35
      0
      Изотоп, по сути, обертка. Выводить можно через ms2Gallery, MIGX, assets-что-то там и т.д. Дополнения для вывода галереи изображений не такая уж редкость. Чтобы не убивать пользователя слишком долгой загрузкой, разумно будет использовать AjaxSnippet
        Владимир
        24 мая 2016, 09:45
        +1
        Галерея черпает изображения из TV «thumb» дочерних документов и выводит их с помощью pdoResources.
      Антон
      24 мая 2016, 10:21
      0
      не существует какого-то готового дополнения по этой теме?
        Иван Бочкарев
        24 мая 2016, 10:28
        1
        +1
        Нет.
        Там же все просто. Вот мой пример:
        <section id="portfolio">
        		
        		<h2 class="module-title-font">Последние работы</h2>
        			
        			<div class="home-projects text-center">
        			    <div id="options" data-effect="fade" class="effect-fade in" style="transition: all 0.7s ease-in-out;">
        			    
        			    <ul id="filters" class="option-set">
          				
          			    <li><a href="#" data-filter="*" class="">Все</a></li>
            				[[!pdoResources? 
            					&parents=`3` 
            					&tpl=`ui-button` 
            					&sortby=`pagetitle` 
            					&sortdir=`ASC` 
            					&includeTVs=`0` 
            					&depth=`0` 
            				]]
            			</ul>
            			
            			</div>
             
            			<div id="container">
        
            				[[!pdopage?
                            	&element=`ms2GalleryResources`
                            	&parents=`3`
                            	&limit=`0`
                            	&tpl=`article-tpl-projects`
                               	&includeContent=`1` 
            					&sortDir=`DESC`
                                &sortby=`publishedon`
            					&depth=`1`
                            	&typeOfJoin=`inner`
                            	&includeThumbs=`476x344`
                            	&includeOriginal=`1`
                            	&includeTVs=`client`
                            ]]
            			    
            			</div>
        
        			</div>
        			
        	</section>
          Антон
          24 мая 2016, 12:04
          0
          каким образом вы каждой галерее присваиваете некий тэг, который определяет тип этой галереи для последующей сортировки? К примеру семья, дом, работа, учеба и т.п. В моем представлении, при добавлении галерии необходимо выбрать этот тэг
            Иван Бочкарев
            24 мая 2016, 12:12
            1
            +1
            Чанк ui-button

            <li>
               <a href="#" data-filter=".[[+alias]]" class="">[[+pagetitle]]</a>
            </li>
            Чанк с оформлением article-tpl-projects

            <article class="project-item [[getAlias? &id=`[[+parent]]`]]">
            	<figure>
            		<img src="[[+476x344]]" alt="[[+pagetitle]]" class="img-responsive">
            		<figcaption>
                        <div class="caption-wrap">
                           <div class="actions">
            					<a href="[[~[[+id]]]]" class="btn-border btn-border-sm" title="[[+pagetitle]]">
                              		<img src="../img/link.svg" alt="" class="">
                            	</a>
                            </div>
                        </div>
                     </figcaption>
            	</figure>
            	<div class="project-info">
            		<a href="[[~[[+id]]]]">[[+pagetitle]]</a>
            		<div class="p-client">[[+tv.client]]</div>
            	</div>
            </article>
            в нем указан вызов снипета который и проставляет алиас
            <article class="project-item [[getAlias? &id=`[[+parent]]`]]">
            Сниппет getAlias

            <?php
            /**
             * getAlias
             *
             * DESCRIPTION
             *
             * This snippet returns the alias of a page matching an id
             *
             * USAGE:
             *
             * [[!getAlias? &id=`[[+parent]]`]]
             */
             
            $page = $modx->getObject('modResource', $id);
            if(!empty($page)) {
                return $page->get('alias');
            }
            return '';
              Антон
              24 мая 2016, 12:25
              0
              спасибо, буду пробовать
                Klike
                24 мая 2016, 22:59
                1
                0
                <article class="project-item [[getAlias? &id=`[[+parent]]`]]">
                а зачем сниппет, если есть pdoParser
                [[#[[+parent]].alias]]
                  Максим Кузнецов
                  25 мая 2016, 02:32
                  1
                  +1
                  Зачем pdoParser/сниппет, если есть leftJoin?

                  'leftJoin' => '{
                  	"Parent": { 
                  		"class": "modResource",
                  		"alias": "Parent",
                  		"on": "Parent.id=modResource.parent"
                  	}
                  }',
                  'select' => '
                  	"Parent": "Parent.alias as parent_alias",
                  	//...
                  '
                  nordrussian
                  13 мая 2017, 22:31
                  0
                  Добрый вечер.

                  Скажите а можно вместо alias вывод сортировки сделать по tv полям?
            Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
            12