お世話になります。
トップページに新着記事を現在表示させていますが、この一覧記事の左側にサムネイル画像を
同時に表示させたいと思っています。
WPのキャッチアイ画像を表示させるようなものです。
フォーラムの
「Dittoで出力した一覧ページへ画像をつけるには？http://forum.modx.jp/viewtopic.php?f=7&t=436」
を読み直して何度も挑戦してみましたがよく分かりません。
噛んで砕いたような説明では面倒でしょうが、どなたか一から方法をご説明して頂けませんでしょうか。
例えば、
「Dittoのconfig」はコピペしてファイルを作成し、アップすれば良いのでしょうか。
「Dittoの呼び出し
[[Ditto? &config=`top_sub` &orderBy=`menuindex asc`]]」はどこに記入するのでしょうか。
「テンプレート変数
2nd：2行目用のテンプレート変数です。
入力タイプは「文字列」」はテンプレート変数を作成してタイプをtextにするのでしょうか。
やっているうちに混乱の度合いが酷くなっています。
面倒な投稿ですが、何卒宜しくお願いいたします。
新着記事にサムネイル画像を表示するには 【解決済み】
Re: 新着記事にサムネイル画像を表示するには
私も、modxを触りはじめた時に同じような疑問をもったので、少しでも力になればと思い、
ちょっと解説をしてみます。
分かりにくければすみません。
おそらくdittoというか、スニペットの使い方がいまいち理解されてないのではないかと思いますので、
オーソドック？な使い方を書きますので、表示されるか試してみてはいかがでしょうか？
見当違いでしたらすみません。。
【リソースのイメージ】
dittoテスト(ID) ←ここのIDをdittoコール内の”ID”に入れる
├新着no1
├新着no2
【表示させるチャンクをつくる】
チャンク名：{{sample}}
【テンプレート変数をつくる】※新着no1、新着no2で使うテンプレートに適用させておく
[*image*] ←画像
[*comment*] ←テキスト
【新着no1、新着no2リソースの作成】
[*image*] [*comment*]に入力
【スニペットコールの記述】
「dittoテスト」の[*content*]に下をコピペ。（使用テンプレートは指定しておく）
これで「dittoテスト」に、新着no1／新着no2の内容が表示されるはずです。
１、新着情報を一覧表示したいリソースに、dittoのスニペットコールを記述。
２、形成するHTMLをチャンクをつくる
３、スニペットコール内に、チャンクでつくったtplを指定
こんな流れでしょうか。
modxは、htmlとcssだけしか分からないデザイナーさんには、最初はとっつきにくいかもしれませんが、
基本？が理解できると、通常のサイトでやりたい事はスムーズに実現できると思います。
私がそうだったので…
ちょっと解説をしてみます。
分かりにくければすみません。
おそらくdittoというか、スニペットの使い方がいまいち理解されてないのではないかと思いますので、
オーソドック？な使い方を書きますので、表示されるか試してみてはいかがでしょうか？
見当違いでしたらすみません。。
【リソースのイメージ】
dittoテスト(ID) ←ここのIDをdittoコール内の”ID”に入れる
├新着no1
├新着no2
【表示させるチャンクをつくる】
チャンク名：{{sample}}
コード: 全て選択
<div class="test">
<h2>[+pagetitle+]</h2>
<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>
<p><a href="[~[+id+]~]">[+comment+]</a></p>
</div>
[*image*] ←画像
[*comment*] ←テキスト
【新着no1、新着no2リソースの作成】
[*image*] [*comment*]に入力
【スニペットコールの記述】
「dittoテスト」の[*content*]に下をコピペ。（使用テンプレートは指定しておく）
コード: 全て選択
[!Ditto? &id=`news` &parents=`ID` &depth=`1` &hideFolders=`1` &tpl=`sample`!]
これで「dittoテスト」に、新着no1／新着no2の内容が表示されるはずです。
１、新着情報を一覧表示したいリソースに、dittoのスニペットコールを記述。
２、形成するHTMLをチャンクをつくる
３、スニペットコール内に、チャンクでつくったtplを指定
こんな流れでしょうか。
modxは、htmlとcssだけしか分からないデザイナーさんには、最初はとっつきにくいかもしれませんが、
基本？が理解できると、通常のサイトでやりたい事はスムーズに実現できると思います。
私がそうだったので…
Re: 新着記事にサムネイル画像を表示するには
yasuさん、非常に丁寧な分かりやすい解説をしていただきまして有難うございます。
> おそらくdittoというか、スニペットの使い方がいまいち理解されてないのではないかと思いますので、
> オーソドック？な使い方を書きますので、表示されるか試してみてはいかがでしょうか？
まさに！そのとおりです！
XHTMLとCSSしか分かっていないので、出来ている事はどこかの解説サイトの丸写しに近く、
出来ればラッキー！
しばらく取り組んでみて出来なければあきらめる・・・・そんな程度ですが、テンプレートの作成が好きで
自作のテンプレートに組み込めるCMSはMODxだ！との思いで将来の可能性込みで使っています。
誰かご親切な方の返信が頂けているかな？と思い、ちょっと覗いてみただけですので、
解説していただきましたやり方は、今晩じっくりと自宅で取り組みたいと思います。
結果につきましては後ほど連絡いたします。
> おそらくdittoというか、スニペットの使い方がいまいち理解されてないのではないかと思いますので、
> オーソドック？な使い方を書きますので、表示されるか試してみてはいかがでしょうか？
まさに！そのとおりです！
XHTMLとCSSしか分かっていないので、出来ている事はどこかの解説サイトの丸写しに近く、
出来ればラッキー！
しばらく取り組んでみて出来なければあきらめる・・・・そんな程度ですが、テンプレートの作成が好きで
自作のテンプレートに組み込めるCMSはMODxだ！との思いで将来の可能性込みで使っています。
誰かご親切な方の返信が頂けているかな？と思い、ちょっと覗いてみただけですので、
解説していただきましたやり方は、今晩じっくりと自宅で取り組みたいと思います。
結果につきましては後ほど連絡いたします。
Re: 新着記事にサムネイル画像を表示するには
yasuさん、出来ました！＼(^.^)／
本当に有難うございました！m(__)m
解説の順序でやって行きましたが、
チャンクを作ることで出来るんですね。
コンフィギュレーションファイルとしてアップする必要があるのかと思っていました。
> テンプレート変数をつくる
テンプレート変数そのものの意味が分かっていませんでした。
只作ってどうするのかと？悩んでいました・・・・・
その後のこの部分
> 【新着no1、新着no2リソースの作成】
> [*image*] [*comment*]に入力
の>[*image*] [*comment*]に入力の意味が分かりませんでしたが、スクロールさせて下のほうに
挿入するところがあり、やっと分かりました。
dittoのコードは丸写しですが、これからもう少しdittoの勉強が必要だとつくづく感じています。
後はCSSでレイアウトを考えればよいだけで、ともかくサムネイル付きの記事一覧ページが
出来上がりました。
本当に有難うございました。
教えて頂くと簡単に出来てしまい、こんな程度も分からない自分の不甲斐なさに改めて呆れるばかりです。
今後とも宜しくお願いいたします。
本当に有難うございました！m(__)m
解説の順序でやって行きましたが、
チャンクを作ることで出来るんですね。
コンフィギュレーションファイルとしてアップする必要があるのかと思っていました。
> テンプレート変数をつくる
テンプレート変数そのものの意味が分かっていませんでした。
只作ってどうするのかと？悩んでいました・・・・・
その後のこの部分
> 【新着no1、新着no2リソースの作成】
> [*image*] [*comment*]に入力
の>[*image*] [*comment*]に入力の意味が分かりませんでしたが、スクロールさせて下のほうに
挿入するところがあり、やっと分かりました。
dittoのコードは丸写しですが、これからもう少しdittoの勉強が必要だとつくづく感じています。
後はCSSでレイアウトを考えればよいだけで、ともかくサムネイル付きの記事一覧ページが
出来上がりました。
本当に有難うございました。
教えて頂くと簡単に出来てしまい、こんな程度も分からない自分の不甲斐なさに改めて呆れるばかりです。
今後とも宜しくお願いいたします。
Re: 新着記事にサムネイル画像を表示するには
応用編
<img src="[+image+]" width="120" height="90" />
の部分をウィジェット化すれば、画像を設定していないエントリーではimgタグ自体を出力しないということもできます
こう書いても動くと思います（テンプレートをチャンクで指定しない書き方もあるということ）[!Ditto?
&id=`news`
&parents=`ID`
&depth=`1`
&hideFolders=`1`
&tpl=`@CODE:
<div class="test">
<h2>[+pagetitle+]</h2>
<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>
<p><a href="[~[+id+]~]">[+comment+]</a></p>
</div>
`
!]
<img src="[+image+]" width="120" height="90" />
の部分をウィジェット化すれば、画像を設定していないエントリーではimgタグ自体を出力しないということもできます
Re: 新着記事にサムネイル画像を表示するには
yamaさん、応用編有難うございます。
って、いきなりレベルアップしたようで・・・・また新たな悩みが・・・・・(^^ゞ
お聞きしたいのは以下の点ですが、
・テンプレートをチャンクで指定しない書き方が、「&tpl=`@CODE:」なんでしょうか？
・「<img src="[+image+]" width="120" height="90" />の部分をウィジェット化すれば、」とは
どのようにするのでしょうか？
確かに画像を設定しないリソースもありますが、ウィジェット化すれば表示されないのでしょうか？
これを回避するために、画像がないリソースの場合は、指定したサムネイル画像を表示しようと思っていました。
またややこしい初心者のような質問ですが、宜しくお願いいたします。
って、いきなりレベルアップしたようで・・・・また新たな悩みが・・・・・(^^ゞ
お聞きしたいのは以下の点ですが、
・テンプレートをチャンクで指定しない書き方が、「&tpl=`@CODE:」なんでしょうか？
・「<img src="[+image+]" width="120" height="90" />の部分をウィジェット化すれば、」とは
どのようにするのでしょうか？
確かに画像を設定しないリソースもありますが、ウィジェット化すれば表示されないのでしょうか？
これを回避するために、画像がないリソースの場合は、指定したサムネイル画像を表示しようと思っていました。
またややこしい初心者のような質問ですが、宜しくお願いいたします。
Re: 新着記事にサムネイル画像を表示するには
テンプレート変数の設定画面に「ウィジェット(出力フィルタ)」というのがあります。ここで「Custom widget」を選んで
<a href="[~[+id+]~]"><img src="[+value+]" width="120" height="90" /></a>
上記のように記述してください
テンプレートは
<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>
上記の部分を
[+image+]
こう書き換えます
もしかすると[~[+id+]~]の部分はDitto制御下のidを拾えなかった気もするので、その場合は画像にリンクを張るのは難しいかもです
(http://modx.jp/blog.html 公式ブログでは工夫して張っちゃってますけど)
ウィジェットの使い方をマスターすると、MODX使いこなしの幅が増えると思います。PHPを書く方法もあるので、工夫次第でなんでもできますよ
<a href="[~[+id+]~]"><img src="[+value+]" width="120" height="90" /></a>
上記のように記述してください
テンプレートは
<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>
上記の部分を
[+image+]
こう書き換えます
もしかすると[~[+id+]~]の部分はDitto制御下のidを拾えなかった気もするので、その場合は画像にリンクを張るのは難しいかもです
(http://modx.jp/blog.html 公式ブログでは工夫して張っちゃってますけど)
ウィジェットの使い方をマスターすると、MODX使いこなしの幅が増えると思います。PHPを書く方法もあるので、工夫次第でなんでもできますよ
Re: 新着記事にサムネイル画像を表示するには
yamaさん、お世話になります。
ウィジェット化は詳細なご説明により分かりました！有難うございます。
そして、応用編のDittoをそのまま「<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>」
の部分を「[+image+]」に換えて記入しました。
結果は、
「&tpl
指定したDittoテンプレート(チャンク)にプレースホルダが含まれていません。上記のテンプレートの内容を確認してください。」
と言うことなんです。
今から、思いつく事を色々取り組んでやってみます。
丸呑みして消化不良のまま右往左往しているようです・・・・・・
ついでと言っては大変失礼ですが、良く見かけるようにサムネイルを付けた新着記事の文字数を任意の数字に設定し、
最後に「・・・・続きを読む」とするにはどのようにすれば良いのでしょうか？
新着記事一覧のテキストは、本文リソースの頭から100文字を自動的に取ってくるようにしたいのです。
妙に何も考えていないようで厚かましく恥ずかしいのですが、ご面倒でなければ宜しくお願いいたします。
ウィジェット化は詳細なご説明により分かりました！有難うございます。
そして、応用編のDittoをそのまま「<a href="[~[+id+]~]"><img src="[+image+]" width="120" height="90" /></a>」
の部分を「[+image+]」に換えて記入しました。
結果は、
「&tpl
指定したDittoテンプレート(チャンク)にプレースホルダが含まれていません。上記のテンプレートの内容を確認してください。」
と言うことなんです。
今から、思いつく事を色々取り組んでやってみます。
丸呑みして消化不良のまま右往左往しているようです・・・・・・
ついでと言っては大変失礼ですが、良く見かけるようにサムネイルを付けた新着記事の文字数を任意の数字に設定し、
最後に「・・・・続きを読む」とするにはどのようにすれば良いのでしょうか？
新着記事一覧のテキストは、本文リソースの頭から100文字を自動的に取ってくるようにしたいのです。
妙に何も考えていないようで厚かましく恥ずかしいのですが、ご面倒でなければ宜しくお願いいたします。
Re: 新着記事にサムネイル画像を表示するには
yasuさん、yamaさん、お世話になり有難うございました。
応用編の方法が今ひとつ出来ず分かっていないのですが、
ともかくCSSでレイアウトして、新着記事とサムネイル画像の表示に成功しましたので、
このトピックは解決とさせていただきます。
御丁寧な返信を頂きまして本当に有難うございました。
応用編の方法が今ひとつ出来ず分かっていないのですが、
ともかくCSSでレイアウトして、新着記事とサムネイル画像の表示に成功しましたので、
このトピックは解決とさせていただきます。
御丁寧な返信を頂きまして本当に有難うございました。