質問 > 管理機能 > 外部パスで画像を登録したいのですが |
管理機能
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | 下へ |
投稿者 | スレッド |
---|---|
stella |
投稿日時: 2010/9/10 15:34
対応状況: −−−
|
新米 登録日: 2010/9/3 居住地: 投稿: 6 |
Re: 外部パスで画像を登録したいのですが AMUAMU様、seasoft様、ご回答ありがとうございます。
>AMUAMU様 初心者には難しそうですね。 >seasoft様 2箇所目の赤文字ですが、<!--{else}-->〜<!--{/if}-->内は拡大画像のためのソースだと考え、前回教えて頂いたソースをそのまま貼り付けてみました。 そんな単純にいくほど甘くはなかったようですね。。。 拡大画像が表示できるよういろいろと奮闘してみたのですが、どうにもうまくいかないため、思考をちょっと変えて詳細ページ内にスワップイメージを設ける事に挑戦してみました。 が、、、 Dreamweaverを使用してtpl内をいじってみましたが結果うまくいきません。。。 <!--▼CONTENTS--> <script type="text/javascript"> <!-- function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> <body onload="MM_preloadImages('<img src="<!--{$arrProduct.sub_image1|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />','<img src="<!--{$arrProduct.sub_image2|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />','<img src="<!--{$arrProduct.sub_image3|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />','<img src="<!--{$arrProduct.sub_image4|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />','<img src="<!--{$arrProduct.sub_image5|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />')"> ・・・・省略・・・・ <!--★画像★--> <p> <img src="<!--{$arrProduct.main_large_image|escape}-->" alt="<!--{$arrProduct.name|escape}-->" name="swap_img" width="280px" height="280px" class="picture" id="swap_img" /> </p> <p> ▼下の画像をクリックすると上に大きく表示されます▼ </p> <table> <tr> <td width="88"><img src="<!--{$arrProduct.sub_image1|escape}-->" alt="<!--{$arrProduct.name|escape}-->" width="80px" height="80px" class="picture" onclick="MM_swapImage('swap_img','','<img src=!--{$arrProduct.sub_image1|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />',1);MM_swapImgRestore()" /></td> <td width="88"><img src="<!--{$arrProduct.sub_image2|escape}-->" alt="<!--{$arrProduct.name|escape}-->" width="80px" height="80px" class="picture" onclick="MM_swapImage('swap_img','','<img src="<!--{$arrProduct.sub_image2|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />',1)" /></td> <td width="89"><img src="<!--{$arrProduct.sub_image3|escape}-->" alt="<!--{$arrProduct.name|escape}-->" width="80px" height="80px" class="picture" onclick="MM_swapImage('swap_img','','<img src="<!--{$arrProduct.sub_image3|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />',1)" /></td> <td width="89"><img src="<!--{$arrProduct.sub_image4|escape}-->" alt="<!--{$arrProduct.name|escape}-->" width="80px" height="80px" class="picture" onclick="MM_swapImage('swap_img','','<img src="<!--{$arrProduct.sub_image4|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />',1)" /></td> <td width="89"><img src="<!--{$arrProduct.sub_image5|escape}-->" alt="<!--{$arrProduct.name|escape}-->" width="80px" height="80px" class="picture" onclick="MM_swapImage('swap_img','','<img src="<!--{$arrProduct.sub_image5|escape}-->" width="80px" height="80px" alt="<!--{$arrProduct.name|escape}-->" class="picture" />',1)" /></td> </tr> </table> 懲りず、seasoft様に教えて頂いたソースを乱用してます。。。 画像は6枚ともちゃんと表示されるのですが、画像をクリックするとスワップ先の画像が消え <!--{$arrProduct.name|escape}--> という表示がでてきます。 変化自体はするので全く機能してないわけではなさそうなのですが、うまくいきません。 よく見てみると拡大画像のために(恐らく)記述されていたjsが<!--▼CONTENTS-->前に記されていたのに対して、今回のスワップのためのjsは<!--▼CONTENTS-->の直下に記されていました。 一応<!--▼CONTENTS-->前に変更してみましたが変化ありませんでした。 あと、jsの記述の後に<body onload>というbodyタグが記されているのですが、tpl内で使用できるのでしょうか。。 素人目から見て以上の原因候補が見てとれました。 もしスワップイメージをEC-CUBEで使用した経験がある方、解決方法がおわかりになる方がいらっしゃれば是非お知恵を貸して下さい。 乱文失礼いたしました。 |
a-003 |
投稿日時: 2010/9/11 0:51
対応状況: 確認中
|
常連 登録日: 2010/9/2 居住地: 北海道 投稿: 36 |
Re: 外部パスで画像を登録したいのですが stella さん
はじめまして、私も同じことしたいでので横から大変ご無礼かと思いますが 一緒に進めさせて頂けますでしょうか。宜しくお願いいたします。 seasoft さん システム3度入れなおしバックアップたくさん有ります。PHPもバージョンアップしてみました。 先日は大変お世話になりました。その後このページ参考にさせて頂いて下ります。 AMUAMU さん 過去の書込み見つけました。商品画像の外部化 http://xoops.ec-cube.net/modules/newbb/viewtopic.php? viewmode=flat&order=ASC&topic_id=4274&forum=10 1.パラメータ修正 OK IMAGE_SAVE_URL URL_DIR . "upload/save_image/" →"http://******.jp/photo/image.jpg/" 2.商品登録での表示OK 一覧-メイン画像 詳細-メイン画像 詳細-メイン拡大画像 詳細-サブ画像(1) 詳細-サブ拡大画像(1) 詳細-サブ画像(2) 詳細-サブ拡大画像(2) 詳細-サブ画像(3) 詳細-サブ拡大画像(3) 詳細-サブ画像(4) 詳細-サブ拡大画像(4) 詳細-サブ画像(5) 詳細-サブ拡大画像(5) 3.テンプレートを修正2箇所 OK <!--{$arrProduct."http://******.jp/photo/image.jpg/"|escape}--> ご質問 テンプレートを修正してmain_image変数やmail_large_image変数を直接URLとして出力するよう にすれば表示出来ると思います main_image変数やmail_large_image変数 とはどちらのことを言われているのでしょうか??? 大変お手数ですが、どうかご教授して頂ければと思います。 宜しくお願いいたします。 EC-CUBE 2.4.4 OS Linux sv309.xserver.jp DBサーバ MySQL 5.0.77 WEBサーバ Apache PHP 5.3.3 GD Loaded |
AMUAMU |
投稿日時: 2010/9/11 4:07
対応状況: −−−
|
神 登録日: 2009/5/2 居住地: 東京都 投稿: 2712 |
Re: 外部パスで画像を登録したいのですが 参照先URLは別画面のことですので混同するとマズイかと思います。
DBに保存されているデータのうち、テンプレートで使える変数はその呼び出し元PHP内のコードに記載されている内容に依存します。 商品一覧画面ではmain_large_imageは無駄に読み出さないようにPHP側(LC_Page_Products_List.php)でプログラムされていたと思います。 元々読み出されていない情報を取り出すには、適宜、必要な値をPHP側を修正して読み出すように修正する必要があります。 個別の内容ですが ><!--$arrProduct."http://******.jp/photo/image.jpg/"|escape}--> は不可解な内容です。 他の例と見比べて頂ければ分かると思いますが、そのような使い方は無いと思います。 適切なPHPの読み込み設定をした後に、例えば$arrProduct.main_large_image のように呼び出すのが筋かと思います。
|
seasoft |
投稿日時: 2010/9/12 3:02
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: 外部パスで画像を登録したいのですが 込み入っていますので、部分レスですが・・・
> あと、jsの記述の後に<body onload>というbodyタグが記されているのですが、tpl内で使用できるのでしょうか。。 tpl 内に記述するというよりは、PHP 内でテンプレート変数に割り当てる使い方だったと思います。(全ページ共通ならば、テンプレートに直書きも可能だと思いますが。) > もしスワップイメージをEC-CUBEで使用した経験がある方、解決方法がおわかりになる方がいらっしゃれば是非お知恵を貸して下さい。 若干構成は違いますが、EC-CUBE の標準実装でも、ボタンのロールオーバーイメージとして、同様のロジックが使われていたと思います。(JS関数は EC-CUBE の一部として、メンテナンスされていると思います。)
|
a-003 |
投稿日時: 2010/9/13 0:54
対応状況: 確認中
|
常連 登録日: 2010/9/2 居住地: 北海道 投稿: 36 |
Re: 外部パスで画像を登録したいのですが 何とか3階層まで外部リンクで写真が表示されました。 徐々にファイル構造が理解できてきました。 残る課題は、 1.拡大画像の非表示 2.商品マスタの検索一覧で非表示 3.注文時の商品画像非表示 4.写真がデフォルト(800px×600px)でリサイズが出来てない 拡大画像の件で下記に訂正をしたところ、カテゴリーは3階層ですが、 4階層目にサブ画像のページになりました。なぜかこのページは正常で リサイズのされております。しかし、写真をクリックすると拡大画像ページで 一歩進んで下記リンク先になりました。 公式ガイドブック(カスタマイズ編)で P71 TIPS 17【商品画像の写真サイズを変える】 で 変更をしよう思っているのですが、何度本をみても提示のコードが有りません。 違うテンプレートをアップしたのか本が古いのかが不明。 変更後 <!--{$arrFile[$key].filepath}--> を <!--{$arrProduct.photo|escape}--> 拡大画像リンク先 ↓↓↓↓↓↓↓↓ http://www.****.jp/products/detail_image.php?product_id=110&image=sub_large_image1 また、お気づきの箇所など有りましたら宜しくお願い致します。 |
seasoft |
投稿日時: 2010/9/13 0:59
対応状況: −−−
|
神 登録日: 2008/6/4 居住地: 投稿: 7367 |
Re: 外部パスで画像を登録したいのですが 当該書籍は Ver 2.4.1 を対象としていたと思いますので、書籍を参考にする場合、まずは対象バージョンでの状況を確認するのが良いと思います。
http://downloads.ec-cube.net/src/eccube-2.4.1.zip http://downloads.ec-cube.net/src/eccube-2.4.1.tar.gz
|
stella |
投稿日時: 2010/9/13 15:49
対応状況: −−−
|
新米 登録日: 2010/9/3 居住地: 投稿: 6 |
Re: 外部パスで画像を登録したいのですが >seasoft様
ご回答ありがとうございます。 「tpl 内に記述するというよりは、PHP 内でテンプレート変数に割り当てる使い方だったと思います。」 detail.tpl外で<body onload>内を記述してdetail.tpl内でPHPを使ってその記述したモノを呼び出すという事でしょうか? 「若干構成は違いますが、EC-CUBE の標準実装でも、ボタンのロールオーバーイメージとして、同様のロジックが使われていたと思います。(JS関数は EC-CUBE の一部として、メンテナンスされていると思います。)」 インストールしたEC-CUBEの中にすでにロールオーバーさせるための記述がオプション的な感じで入ってるという事でしょうか? 的外れな解釈でしたら申し訳ありません。。。 >a-003様 外部パスを使用して詳細ページから拡大画像を表示させる事には成功されているのでしょうか? 勘違いでしたら申し訳ありません。 もし成功されているのであれば、よろしければその方法をご教授頂いてもよろしいですか?? 乱文失礼いたしました。 |
a-003 |
投稿日時: 2010/9/14 14:41
対応状況: −−−
|
常連 登録日: 2010/9/2 居住地: 北海道 投稿: 36 |
Re: 外部パスで画像を登録したいのですが seasoft さん
ご連絡遅くなりました。ファイル有難うございました。 早速DLして確認をしたのですが、本のファイル名が 違うのか、違うファイルを上書きしたかで多分後者のような気がします。 何せ本当に初心者ですのでやってしまったかも知れません。 バージョンは理解していたのですが、当たり前のことですが 結構違うという事が解りました。 <!--{$arrProducts[cnt].main_list_image}-->" これが問題でしょうか。 stella さん CSVでサイズ指定が出来たのですが、まだ出来ておりません。 でもこの処理が出来ると本当に楽なのですよね。 |
a-003 |
投稿日時: 2010/9/14 21:53
対応状況: −−−
|
常連 登録日: 2010/9/2 居住地: 北海道 投稿: 36 |
Re: 外部パスで画像を登録したいのですが CSSが勉強不足のため写真レイアウトはまだばらばらですが
やっとのことで外部リンクする事が出来ました。 レイアウトはCSSで出来るかなと思っております。 システム無視した考え方になるのでしょうか。 以前の書き込みでseasoft さんのアドバイスに有りました訂正をすると 商品詳細メイン画像が表示しませんでしたのでデフォルトに戻してみました。 Re: 外部パスで画像を登録したいのですが <!--{$arrFile[$key].filepath}--> を <!--{$arrProduct.****|escape}--> に変更してみては? ※ **** は列名 ↓↓↓↓↓↓↓↓↓↓ を <!--{$arrProduct.****|escape}--> を <!--{$arrFile[$key].filepath}--> するとなんと・・・・最後の課題だった商品詳細メイン画像も表示されました。 stellaさんの質問から始まり長文になっているので今まで手順をまとめてみました。 EC-CUBE 2.4.4 OS Linux sv309.xserver.jp DBサーバ MySQL 5.0.77 WEBサーバ Apache PHPバージョン PHP 5.1.6 GD Loaded 手順 1.パラメータ設定 → IMAGE_SAVE_URL → IMAGE_SAVE_URL URL_DIR . "upload/save_image/" → "http://******.jp/ファイル名/" 2.EC-CUBEの商品登録CSVにおける画像項目の外部パス指定を可能に 下記画像すべて下記内容で訂正 → "EXIST_CHECK","FILE_EXISTS", 削除 http://webcache.googleusercontent.com/search?q=cache:U6INCS8fXjkJ:sunpatic.blog82.fc2.com/blog-entry-3.html+EC-cube%E3%80% 80%E7%94%BB%E5%83%8F%E3%80%80CSV%E3%80%80%E5%A4%96%E9%83% A8&cd=1&hl=ja&ct=clnk&gl=jp&client=firefox-a /data/class/pages/admin/products/LC_Page_Admin_Products_UploadCSV.php 上記の229行目付近、ここで必須項目(存在の有無)を確認する "EXIST_CHECK","FILE_EXISTS"を削除する。 $this->objFormParam->addParam("メイン画像", "main_image", LTEXT_LEN, "KVa", array("EXIST_CHECK","FILE_EXISTS","SPTAB_CHECK","MAX_LENGTH_CHECK")); ↓↓↓↓↓↓↓↓↓↓ $this->objFormParam->addParam("メイン画像", "main_image", LTEXT_LEN, "KVa", array("SPTAB_CHECK","MAX_LENGTH_CHECK")); 3.CSVファイルでサイズ入力追加(ラストタグの " はいりません。) ****.jpg" width="360" height="270 以下すべてオリジナルサイズ指定可能 1.一覧-メイン画像 例 横 360px 縦 270px 2.詳細-メイン画像 例 横 480px 縦 360px 3.詳細-メイン拡大画像 例 横 600px 縦 450px 詳細-サブ画像はパラメーターでも指定可 但しCSVでサイズ指定がない場合は正方形でどちらかが無視される様です。 4.詳細-サブ画像(1) 5.詳細-サブ拡大画像(1) 6.詳細-サブ画像(2) 7.詳細-サブ拡大画像(2) 8.詳細-サブ画像(3) 9.詳細-サブ拡大画像(3) 10.詳細-サブ画像(4) 11.詳細-サブ拡大画像(4) 12.詳細-サブ画像(5) 13.詳細-サブ拡大画像(5) 商品一覧ページ画像 商品詳細画像 商品詳細サブ画像 拡大画像 は表示できます。 次の課題は、 商品マスタの商品画像一覧非表示→ resize_image.php?image= が不明 http://www.******.jp/resize_image.php?image=photo/****.jpg ここまで出来れば取り合えずOKです。 seasoftさん、AMUAMUさん、stellaさん今後とも宜しくお願い致します。 有難うございました。 |
AMUAMU |
投稿日時: 2010/9/14 22:30
対応状況: −−−
|
神 登録日: 2009/5/2 居住地: 東京都 投稿: 2712 |
Re: 外部パスで画像を登録したいのですが 引用:
レイアウトはCSSで出来るかなと思っております。 むしろ、それが正解だと思います。HTML内は要素を出すだけでCSSで位置を決めるのが正しいHTML+CSSによるWebデザインだと思いますよ なにはともあれ解決に近づいたようで何よりです
|
« 1 (2) 3 » |
スレッド表示 | 新しいものから | 前のトピック | 次のトピック | トップ |