お世話になります。

http://www.ec-cube.net/products/detail.php?product_id=668
上記のテンプレを使用しておりサブ情報のレイアウトを
変更したいのですが、CSSではなくPHPでの変更が必要で
行き詰ってしまいました。

現在は
コメント1　画像1
コメント2　画像2
コメント3　画像3
・
・
・
という表示ですが、これを

画像1　コメント1
コメント2　画像2
画像3　コメント3
・
・
・

というように変更したいのです。
お力添えを頂けますと助かります。
どうぞよろしくお願いします。

http://www.ec-cube.net/products/detail.php?product_id=668
EC-CUBEレスポンシブWebデザインテンプレート No.L0082(2.13.0〜2.13.1)

<!--{* ▼サブ情報 *}-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<div class="subarea cf">
<h3 class="heading02"><!--{$arrProduct[$key]|h}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->

<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<p class="subphotoimg">
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$lkey]|strlen >= 1}-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank" ><img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" /></a>
<!--{else}-->
<img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" />
<!--{/if}-->
</p>
<!--{/if}-->
<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
</div>
<!--{/if}-->
<!--{/section}-->
<!--{* ▲サブ情報 *}-->


EC-CUBEバージョン 2.13.1
PHPバージョン PHP 5.3.26
DBバージョン PostgreSQL 9.1.9

nacho様

記載して頂いたソースコード内の「$smarty.section.cnt.index」というのが、
現在のループ回数です。なので、こちらを使ってif文章の分岐を作れば
よいと思います。

<!--{if $smarty.section.cnt.index%2 == 0}-->
<!-- 「画像　コメント」となる記述 -->
<!--{else}-->
<!-- 「コメント　画像」となる記述 -->
<!--{/if}-->

といった具合になると思います。

以上、簡易で申し訳ありませんが、
解決の助けになれば幸いです。

Iorin0225様

ご回答ありがとうございます。
PHPが判らずに申し訳ありません。
頂きましたヒントを元にコードを入れてみたのですが
どの箇所に入れ込んだら良いかが判らずにおります。
これであっているのかも、不安です。

<!--{if $smarty.section.cnt.index%2 == 0}-->
<img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" />
<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<!--{else}-->
<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" />
<!--{/if}-->


また、上記を追加するだけでなく
ソースコードを削らなければならない部分もあるのでしょうか？
色々な箇所で試しているのですが、適切な箇所がわかりません。
どうぞよろしくお願いします。

nacho様

最初の投稿に記載していただいたソースコードを適宜、削除したり編集したりする必要があります。

サブテキストが条件に応じて前か後ろに配置されればよいので、



上記を画像の後ろに、



上記を画像の前に配置すればよいと思います。

動作検証等ができておりませんが、
もし動作しない際は再度、書き込んでいただければと思います。

お手数をおかけしますが、宜しくお願いします。

お返事をありがとうございます。
ご丁寧にお教え下さり大変感謝致します。

下記のソースコードとCSSの変更で希望の表示が出来るようになりました。


<!--{* ▼サブ情報 *}-->
<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
<!--{assign var=ikey value="sub_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$key] != "" or $arrProduct[$ikey]|strlen >= 1}-->
<div class="subarea cf">
<h3 class="heading02"><!--{$arrProduct[$key]|h}--></h3>
<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
<!--{if $smarty.section.cnt.index%2 != 0}-->
<p class="subtext_right"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<!--{/if}-->
<!--{if $arrProduct[$ikey]|strlen >= 1}-->
<p class="subphotoimg">
<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
<!--{if $arrProduct[$lkey]|strlen >= 1}-->
<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank" ><img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" /></a>
<!--{else}-->
<img alt="<!--{$arrProduct.name|h}-->" src="<!--{$arrFile[$ikey].filepath}-->" />
<!--{/if}-->
</p>
<!--{/if}-->
<!--{if $smarty.section.cnt.index%2 == 0}-->
<p class="subtext_left"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
<!--{/if}-->
</div>
<!--{/if}-->
<!--{/section}-->
<!--{* ▲サブ情報 *}-->

-----
CSS
-----
.subarea .subtext_right {
margin-bottom: 1.5em;
float: right;
width: 40%;
text-align: center;
}
.subarea .subtext_left {
margin-bottom: 1.5em;
float: left;
width: 40%;
text-align: center;
}
とても助かりました。本当にありがとうございました。