ギャラリーを作成する

ギャラリーページを作るまで

1. JPGファイルをアップロードしたら縮小画像を自動作成
2. ギャラリーを作成する
3. srcsetに対応してみた

複数の写真を一気にアップロードするとかしなければ十分利用できると思います。

フレームワークは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>`]]

表示例:バラ1

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+]

カテゴリ用写真一覧テンプレート表示例:花

全ての写真一覧テンプレート表示例:ギャラリー

• 前の記事
• 次の記事