CMS Designerユーザーズフォーラム

はじめまして。お世話になっています。
CMSDの初心者で、導入しようと日々勉強しております。

画像表示の件で質問があります。
こちらのフォーラムやリファレンスの5.5.5などを参考にlistを使って複数の画像を表示できるようにはなりました。

そこで画像の表示の仕方なのですが、リファレンスの5.5.5の例の＜table＞タグを使った形ですと縦に複数の画像が表示されていきますが、これを横方向に画像を、例えば3枚表示したら、改行してまた3枚表示・・・というように表示させたいのですが。

イメージとしては、
　
┌---------┐　　┌---------┐　　┌---------┐
│　　　　│　　│　　　　│　　│　　　　│
│　画像　│　　│　画像　│　　│　画像　│
│　　　　│　　│　　　　│　　│　　　　│
└---------┘　　└---------┘　　└---------┘
　画像説明　　　画像説明　　　画像説明

┌---------┐　　┌---------┐
│　　　　│　　│　　　　│　
│　画像　│　　│　画像　│・・・・・
│　　　　│　　│　　　　│
└---------┘　　└---------┘　
　画像説明　　　画像説明

のような感じで並べて表示させたいと思っております。

xslのif文を使ってするのかなとも思いましたが、何分勉強不足であまりよく判っていません。
もっと基本的なことでできるのかもしれませんが、どのようにすれば良いか判らず質問させていただきました。

何卒よろしくお願いいたします。

　webmasterです。portさんはじめまして。

　実は、CMSDが採用しているテンプレートエンジンである「XSLT」は、データを
テーブル状に配置することが非常に苦手です。

　エントリ一覧をテーブル状に配置する機能については1.0.1aで追加しています
が、今回の依頼のように、リスト項目の一覧をテーブル状に配置する機能は現状では
用意しておりません。m(_ _)m

　そこで、TABLEタグではなくCSSを使ってテーブル状にデータを配置する方法を
ご紹介します。

　まず結果のHTMLサンプルをご覧下さい。

コード: 全て選択

<html>
<head>
<title>test</title>
<style type="text/css">
<!--
div.panel {
	width : 600px;
}

div.block {
	float : left;
	width : 200px;
	background-color : #E0E0E0;
	padding : 0px;
	margin : 0px;
}

div.innerblock {
	height : 200px;
	padding : 10px;
	border : 1px solid black;
	margin-left : 10px;
	margin-bottom : 10px;
	background-color : #A0A0A0;
}

div.innerblock img {
	margin-bottom : 10px;
	display : block;
}

-->
</style>
</head>
<body>

<div class="panel">

<div class="block">
  <div class="innerblock">
    <img src="image.gif" />
    説明文です。<br />
    ラララララ
  </div>
</div>

<div class="block">
  <div class="innerblock">
    <img src="image.gif" />
    説明文です。<br />
    ラララララ
  </div>
</div>

<div class="block">
  <div class="innerblock">
    <img src="image.gif" />
    説明文です。<br />
    ラララララ
  </div>
</div>

<div class="block">
  <div class="innerblock">
    <img src="image.gif" />
    説明文です。<br />
    ラララララ
  </div>
</div>

<div class="block">
  <div class="innerblock">
    <img src="image.gif" />
    説明文です。<br />
    ラララララ
  </div>
</div>

</div>

</body>
</html>

　このソースを適当なファイル名で保存（test.html等）して、表示してみて下さい。
　image.gifが３列で表示されているかと思います。

　このような出力を行うためには、データを上記のようなdivタグで囲ってやって、
（block、innerblockと二重に囲っているのは、IEのCSSタグ回避の為です）
それら全体をpanelというクラス名のdivで囲ってやります。
　panelの幅を、blockの幅×３にしてあるので、各blockが３つ置きに折り返されて
表示されます。

　その為のデザイン定義（XSLT）のサンプルはこちらです。

コード: 全て選択

  <div class="panel">
  <xsl:for-each select="photolist/listitem">
    <div class="block">
      <div class="innerblock">
        <img src="{photo}" />
        <xsl:value-of select="phototitle" disable-output-escaping="yes" />
      </div>
    </div>
  </xsl:for-each>
  </div>

　このXSLTにはスタイル情報は含まれていませんので、外部CSSで定義するなり、
埋め込み先のphpファイルに直接記述するなりして下さい。

　CSSの.panelの幅を、.blockの幅の4倍、5倍に指定すれば、4列、5列も可能です。
　適当に調整してみて下さい。
　（もし、幅が可変で、幅いっぱいに列を伸ばしたいという場合は、.panelのwidthを
指定なしにしてもOKです。CSSはこの点、TABLEによるレイアウトより柔軟です）

　CSSにお詳しい場合はお好きなようにいじって頂いて結構です。

　ご不明点はまたご連絡くださいませ。
　（TABLEを使ってレイアウトができなくて申し訳ありません）。

早速の回答、誠にありがとうございます。

なるほど、CSSのブロックの幅を使って折りかえさせればいいのですね。
あまりCSSに詳しくないものでして、考えつきませんでした。

CSSの説明とサンプルともに丁寧に回答していただき本当にありがとうございます。大変よくわかりました。TABLEレイアウトでなくても全然かまいません。
これを参考にテーブル状に表示できるようにがんばってみたいと思います。

もしまた作成中、不明な点がありましたら、また質問させていただきます。
ありがとうございました。

　webmasterです。
　一つ、書き忘れておりました。先ほどのサンプルで、XSLTに関しては実際に
試しておりません。m(_ _)m
　かなり入念に目視確認しておりますが、もしうまく動かなかった場合には
サンプル自体が間違っている可能性がありますのでご連絡頂ければと思います。

　最後に、幅を使わず、float:leftをclearすることで折り返しを実現するXSLTの
サンプルも書いておきますね。

コード: 全て選択

  <div class="panel"> 
  <xsl:for-each select="photolist/listitem"> 
    <div class="block"> 
      <div class="innerblock"> 
        <img src="{photo}" /> 
        <xsl:value-of select="phototitle" disable-output-escaping="yes" /> 
      </div> 
      <xsl:if test="position() mod 3 = 0">
        <br clear="all" />
      </xsl:if>
    </div> 
  </xsl:for-each> 
  </div>

　これは、先ほどのサンプルに

コード: 全て選択

      <xsl:if test="position() mod 3 = 0">
        <br clear="all" />
      </xsl:if>

　を足しただけです。
　mod 3の部分をmod 4とかmod 2とかにすれば、4列、2列が実現できます。
　これを使う場合は、CSS側で.panelのwidthを削除して下さい。

　特に内容を理解する必要はないですが、もし気になる方は以下をご覧下さい。
　position()は、繰り返し項目やエントリ一覧にて「何番目か」を取得するXSLTの
関数で、1から始まります。modは剰余（割った余り）を計算する演算子です。
　「現在位置を3で割った余りが0ならば」という意味になりますので、3個置きに
「<br clear="all" />」を出力させることができます。

　以上、ご参考までにどうぞ。

追加説明ありがとうございます。

XSLTに関しては、CSS以上に理解していませんが解説していただいた関数は、よくわかりました。
この関数を使ったデザイン定義でもチャレンジしてみたいと思います。

ありがとうございました。

CMS Designerユーザーズフォーラム

画像表示の件

画像表示の件

Re: 画像表示の件

ありがとうございます。

Re: ありがとうございます。

Re: ありがとうございます。