ギャラリーを作成する

ギャラリーページを作るまで
複数の写真を一気にアップロードするとかしなければ十分利用できると思います。
フレームワークはUIKitを使っているのでHTMLタグもその様になっています。またスニペットの「DocLister」と「phpthumb」を使用しています。
1.準備:テンプレート変数の作成
入力タイプが「Image」のテンプレート変数を作成します。
テンプレート変数名を今回は「photo」と名付けます。
リソースの階層は下記のようになっています。
- すべての写真を表示するリソース(コンテナ)
- カテゴリーに所属する写真を表示するリソース(コンテナ)
- 写真を表示するリソース
- カテゴリーに所属する写真を表示するリソース(コンテナ)
2.個別の写真用テンプレート
このテンプレートにテンプレート変数「photo」を関連付けます。
テンプレート変数「photo」の画像をこのリソースで表示するようの写真を設定します。
DLPrevNextは兄弟リソースへ移動するナビゲーションです。
<img src="[*photo*]">
[[DLPrevNext?
&parents=`[*parent*]`
&depth=`1`
&orderBy=`publishedon DESC`
&prevnextTPL=`@CODE:<ul class="uk-pagination">[+prev+][+next+]</ul>`
&prevTPL=`@CODE:
<ul>
<li><a href="[+url+]"> [+title+]</a></li>
</ul>`
&nextTPL=`@CODE:
<ul>
<li class="uk-margin-auto-left"><a href="[+url+]">[+title+] </a></li>
</ul>`]]
3.写真の一覧を表示するテンプレート
すべての写真一覧とカテゴリーに所属する写真一覧用のテンプレートです。
[+pages+]は写真が25枚以上になるときにページネーションを表示します。
tvPrefixを空にしてtvListに使用するテンプレート変数名を入れることで、Dittoと同じようにテンプレート変数が使用できます。
&prepare=`prepareGallery`は表示される前に処理をするものです。スニペットで「prepareGallery」を作成します。これはサムネイルを表示させるためです。
<?php
if ($data['photo'] != ''){
$data['thumb'] = $modx->runSnippet('phpthumb', array('input'=>$data['photo'], 'options'=>'w=300,h=300,zc=1'));
}else{
$data['thumb'] = '';
}
return $data;
以下で子孫リソースの写真を表示します。
<div class="uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-5@m" uk-grid>
[[DocLister?
&parents=`[*id*]`
&depth=`2`
&display=`25`
&tvPrefix=``
&tvList=`photo`
&prepare=`prepareGallery`
&orderBy=`publishedon DESC`
&tpl=`@CODE:<div><a href="[+url+]"><img src="[+thumb+]"></a></div>`
&paginate=`pages`
&pageAdjacents=`4`
&PrevNextAlwaysShow=`0`
&TplNextP=`@CODE:<li><a href="[+link+]"><span uk-pagination-next></span></a></li>`
&TplPrevP=`@CODE:<li><a href="[+link+]"><span uk-pagination-previous></span></a></li>`
&TplDotsPage=`@CODE:<li class="uk-disabled"><span>...</span></li>`
&TplPage=`@CODE:<li><a href="[+link+]">[+num+]</a></li>`
&TplCurrentPage=`@CODE:<li class="uk-active"><span>[+num+]</span></li>`
&TplWrapPaginate=`@CODE:<ul class="[+class+]" uk-margin>[+wrap+]</ul>`
&PaginateClass=
</div>
[+pages+]
`&toc=`true`]]
2018年10月27日 / CMS