画像ブロックのカスタマイズ

2012年4月8日 at 23:52

はじめて投稿します。
php初心者です。
画像ブロックにテキストフィールドを追加し、それを更に、h2で囲みたいと思っています。
添付画像のようなタイトルに使う予定です。
以下はhtmlです。


テキストフィールド




どのファイルをどのように変えればいいのか、どうかご教授下さい。

添付: example.jpg
タグ:

Re: 画像ブロックのカスタマイズ

2012年4月9日 at 12:10
designer content という アドオンがあります。
htmlの挿入やテキストフィールドの挿入が可能です。

ヘルプが下記にありますので参考にしてください。

http://concrete5-japan.org/help/editing/designercontent/
 

Re: 画像ブロックのカスタマイズ

2012年4月9日 at 13:48
acliss19xxさん、回答ありがとうございます。
実を言うと、designer contentを使って、ブロックを作ろうと試みたのですが・・・

・画像のオーバーを設定できない
・内部リンクと外部リンクの選択ができない

という、2つの問題に直面し、
PHPを解読し、カスタマイズしようとしましたが、
上記の2点については、機能の追加はかなりハードルが高く・・・
それで、画像ブロックの方のカスタマイズを考えた訳なんです。

と、いっても、どちらにしろ、ハードルが高いのですが・・・

先程、画像ブロックのview.phpのフォルダーに<h3><span>タグを加えた所、サイトに反映されました。
が、controller.phpにあるimageタグのクラスccm-image-blockの変更をしても、反映されません・・・
どこを変更したらよいでしょうか。

それから、テキストフィールドの追加を是非とも知りたいです。

今の状態とフォルダーの階層を添付しました。
よろしくお願いします。
 

Re: Re: 画像ブロックのカスタマイズ

2012年4月9日 at 18:06
html css が分からないので見当違いのことを言っていたらごめんなさい

既存のブロックに機能を追加するのはなかなかハードルと思います。
データベースにも影響がありますので。。。。。

マウスオーバーイベントをする場合は
designer content を使用して
ブロックハンドル test
image1 と image2 を 作成して
/block フォルダに test ブロックが作成されます。
そのtestブロックのview.php で、$field_2_image を
$field_1_imageの処理のマウスオーバーイベントに使用するように書き換える。
この方法で出来るとおもいます。

内部リンクと外部リンクを選択するのはしんどそうなので
designer content
外部リンク用のブロックと内部リンク用のブロックを作成するというのはどうでしょうか?
 

Re: 画像ブロックのカスタマイズ

2012年4月9日 at 22:56
acliss19xxさんのおっしゃるとおりにやってみたところ、出来ました!
なるほど、2つ目のimageをjavascriptに組み込むという訳ですね。
目からうろこです。
(内部リンクと外部リンクは、おっしゃるとおり、2通りのブロックを作ろうと思います。)

しかしながら、また問題が・・・
そうするとイメージにidを振らなくてはなりませんが、「ブロック」という性質上、
何度も使い回さなくてはならない訳で、
(何もしなければ)そのidがすべてのイメージに振られてしまいますよね・・・。

思った通り、ブロック1つではロールオーバーした画像が、
ブロックをもう1つ追加した所、その2つ目はロールオーバーしませんでした。(そりゃそうですね)

このidをブロック毎に、個々に持たせるような方法が分かりましたら、
再度、ご教授下さいませ。
 

Re: Re: 画像ブロックのカスタマイズ

2012年4月9日 at 23:53
ブロックを追加したときにブロックIDみたいなもの割り振られて
それを使用するとダブらなかったと思います。

$this->bID; だったと思うのですが・・・・・・・

/concrete/block/image/controller.php の
getContentAndGenerate メソッドを参考にしてみてください。
一番最後のメソッドです。

すみません。はっきりとしたことが分かりません。分かる方お願いします。
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 1:17
カスタムテンプレート使うのが良いと思いますよ
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 10:25
acliss19xxさん、教えてくださった、$bID = $this->bID;をcontroller.phpに追加してみました。
それからview.phpにも$bIDを追加しました。

すると、htmlの方には数字が出てきました。

が、挿入している2つのブロックに同じ数字がはき出されていました・・・。

PHPの書き方がまずいのか・・・(こっちの可能性大)
はたまた、やはり$bIDが個々のブロックのIDではないのか・・・
分かりません(>_<)

acliss19xxさん、もしくはどなたか、分かる方ご教授いただけますか?


taoさん、カスタムテンプレートを使うというのは、私が最初にやろうとしていたimageブロックのカスタマイズの事ですか?
それとも、そういったアドオンがあるのでしょうか?

今後の為にも、そちらのやり方も是非とも知りたいです。
よろしくお願いします。
 

Re: Re: 画像ブロックのカスタマイズ

2012年4月10日 at 10:49
controller.phpの view()
に $this->set($blockID,$this->bID);

でview.phpで
$blockIDで使用するとどうですか?
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 10:52
間違えました。

$this->set('blockID',$this->bID);
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 13:44
すいません、何をしたいのかイマイチわかっていません。
最終的に吐き出したいHTMLとか貼れますか?
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 12:27
acliss19xxさん、できました!
いや、できてました、と言った方がよいかもしれません。

おっしゃるとおり、$blockIDに変えて、やってみた所、
html上で、やっぱり2つ目のブロックの画像が反転しなったのです・・・。

そこで、再度、管理画面で、ブロックを選ぶところから挿入してみたところ、
その3つ目のブロックの画像が反転しました。

じゃあ、なぜ2つ目のブロックの画像が反転しないのか(なぜIDが同じになってしまうのか)?
実は、2つ目のブロックは、「クリップボード」からペーストしたものでした。
それで、どうも同じIDが振られてしまったようです・・・。
(という事で、恐らく、$bIDでもちゃんと動いていたと思います)

う~ん、こればっかりは、もうどうしようもなさそうですね。

それとも、策はありますか?
でも、今度こそハードルが高そうです。

とにかく、ありがとうございました。
返信もすごく早くて助かりました。


ところで、taoさんのおしゃっているやり方(画像ブロックのカスタマイズかな?)はどんな感じですか?
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 12:35
クリップボードからのコピーは違うページのときに使用するべきなのかもしれませんねぇ。
通常はブロックを追加で処理をし、、
複数のページで同じものを設定されたい場合は5.5.1からグローバルエリアやスタックという機能が追加されていますのでそちらを使用されると便利だとおもいます。
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 13:07
今回のこのリンク画像付のタイトルは、トップページにしか使わない予定なので、
(もしかすると他のページにも入るかもしれませんが)
ブロックを追加で構築していこうと思います。

お客さんに引き渡した後は・・・
まぁ、そんなにいじらないかなぁ、と思うので(なんて、いけないな)
その時はその時で対処ですね。

このクリップボードにコピーするとIDまで同じになってしまうという欠点、
是非、次回concrete5のバージョンアップ時に直ってほしいですね。

acliss19xxさん、お忙しいところありがとうございました。


taoさん、更にいい方法ありますか?
返信待ってます!
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 13:17
ちょっと興味があったので・・・さくっと作ってみた。

gazou-block.zip

使用方法は、サイトにて・・・

ただし・・・画像右側の「一覧ボタン」が右すぎる。
とりあえずは、イメージどおりかとは思いますけど。
CSSをいじらないと、本番では使えないかな。
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 13:25
画像とキャップションで参考になりそうなアドオンは・・・
Image caption」ブロックが近いと思います。
最初、これ改造すればいいじゃん・・・と考えていたので。
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 15:59
すみません。ちゃんと読んでいませんでした。
現在の concrete5 「画像ブロック」ってかなり高機能だったのですね!

ポイントは、
1、内部リンクと外部リンクを選択が出来る!(これは知らなかった。新機能?)
2、マウスオーバーの画像の選択が出来る!(以前からあったもの)

んで、さくっと画像ブロックを「カスタムブロック」しようとしたら挫折した。
んで、新しく「アドオンブロック」作ろうとしたら・・・やっぱり動かないw

「Designer Contents」で、選択方法の動かし方がいまいちわからないので、今回は時間切れ。
サンプルは参考になろうかと思いますので、H2のキャップションは、view.php で変更を。
画像の変更は、view.css で、それと新しい画像を用意してください。

なお、[ blocks/btexample/templates/新しいフォルダー名/view.css と view.php ] で、このアドオンの「カスタムテンプレート化」が作成出来ます。
今回は、内部用リンクですので、外部用リンクも同じように作るだけですね。

誰か [ view.css ] を変更してくださいませんか? 画像右側の「ページ一覧」が右過ぎ!
[ text-align:right; ] を苦肉の策で使っているからなんだけど・・・
 

Re: 画像ブロックのカスタマイズ

2012年4月10日 at 23:53
tomoyaさん、そうなんです、画像ブロックのカスタマイズって、
そうとう難しいですよね。
PHPもっと勉強しようと思いました。

それから、ブロックを作っていただきありがとうございます。
私もそれを参考に、そして、今回知ったノウハウで、ブロックを作ってみました。
CSS付きです(笑)
2通りのタイトルスタイルです。
 ・画像リンク付きタイトルa
 ・テキストリンク付きタイトルb
です。
動作は確認済みです。

テキストが入る部分については、テキストの大きさが大小変わっても、ある程度は伸び縮みするようになっています。
私は、会社のサイトを作る事が多いので、ユーザビリティの点が問われる事が多くて・・・

そういった訳で、デザインとユーザビリティを考え、今回はリンク部分は画像にしたかったのです。私が何をしたかったか、添付したファイルをみてもらえば分かると思います。
(tomoyaさんのように、リンク部分に画像の背景を持ってくるのもありだと思います。)


画像は、できるだけ、変更して使っていただければと思います。
htmlもバンバン変更しちゃってください。
index.htmlファイルは、アップする時は削除してくださいね。
 

Re: 画像ブロックのカスタマイズ

2012年4月11日 at 17:18
kukuさん。ファイル有難うございます。
午前中ちょっと確認しました。

とりあえず、テスト用の c552 でもちゃんと稼動しております。
(導入するサイトのテーマにも依存しそうですが)

今回は、いちおうここまで・・・なんだけど、これって応用が利きますね。
1、kukuさん版をさらに改造して、「h1/h2/h3/h4」の選択が出来るようにする。
2、「画像ブロック」から、「外部リンク or 内部リンクの選択」の部分をもらう。
   (ついでに画像のサイズの変更とかも出来るようにするとか。)
3、純粋に「ボタン」ブロックでもOK!(以前 sexy-button 作ったので)
  id / class を選択出来るようにして、わざわざファイル数を増やさないように、カスタム
  テンプレートの代わりにするとか・・・etc..

実は、以前 jQuery sexy-button をブロック化した事があり、それが今回の元ネタということになっていて、それで css の <a タグに画像をのせていたのでした。
今度のチャレンジは、「バナーボックス」かな。(jQuery付がちょっと問題かも)

アイデア次第で、色々と応用が利きそうです。なんでもござれですね。
作って動いている時が割りと楽しかったりします(笑)
 

Re: 画像ブロックのカスタマイズ

2012年4月12日 at 23:59
そういえば、この前に作ったブロックは、「クリップボード」からペーストができない、という欠点があったというのを書くのを忘れてしまったな・・・
と考えていたら、ふと思い立った事がありました。

基本画像ブロックのオーバーは、いったいどうやってオーバーさせているのだろう・・・と。(ちゃんと「クリップボード」からペーストできるし)

私が前に作ったブロックには、自分で作った(ペーストしただけですが)javascriptを読み込ませていて、それにはブロック事に違うidが必要なのですが、
基本画像ブロックのオーバー画像にはidがない!!!

知識不足で分からないのですが、idのいらない画像オーバーできるjavascriptがあるんですね。

という訳で、それを参考に再度「クリップボード」からペーストできるブロックを作りました。(acliss19xxさん、前につまずいたところ、解決しましたよ!)

しかし、そのオーバーのjsファイルは、入っていません。
なので、index.htmlは、サーバーにアップしても、それ自身は画像のオーバーはしません。
(ブロックをサーバーにアップすればconcrete上でオーバーします。)

tomoyaさん、cssもできるだけ、他から干渉されないようにがっちり組みましたよ。
みなさん、それをいじりまくってくださいね

それから、今回は、RSSのリンク付き画像もアップできるバージョンも作りましたので、どうぞ。(みれば分かりますが、AのAとBのAいらないんじゃない、って言われそう・・・あはは)
他、いくつか改善点もあるので、みなさんこちらの方をダウンロードしてみてください。
■機能
・ボタン画像、RSS画像ともに、追加の有無が選べます。
・RSS画像のリンク無しというのもできます。
・RSSは、外部リンクになっています。そして、blankになっています。

■注意点
・BのBですが、テキストのリンクを入れた時には、テキストを忘れず入れてください。RSSをその状態で入れるとなぜか、RSSのリンクURLがテキストに入ってしまう・・・のです。
・BのAとBのBですが、テキストリンクの長さに応じて、タイトルのH2のパディングを調節してください。そうしないと、タイトルとテキストが重なってしまう現象が起きる事があります。

それから、tomoyaさんも言っていますが、今は内部リンクオンリーですが、
外部リンクも選択できる機能を付ける事が出来る方、是非、是非、改良してください!
↑これ、私的には、とっても欲しい追加機能です。
taoさんできます?なんて名前出したりして。
よろしくお願いします。

カスタムのアイデアも、いいですね。
H1、H2、H3、H4のカスタムあるといいですよね。
ボタンの有り無しなんかも、カスタマイズでやっちゃうのもありですね。
皆さん、カスタマイズお願いします。
後、ここおかしいぞ的なご意見もください。
なんせ、concrete初心者なんで・・・
 

Re: 画像ブロックのカスタマイズ

2012年4月20日 at 10:21
これまでの経緯を追っていなかったので全然違う作りかけのものになりますが、Designer Contentで内部リンクと外部リンクの入力欄をそれぞれ設けて、内部リンクの入力があれば内部リンクを、内部リンクが無くて外部リンクの入力があれば外部リンクを設定、両方入力がなければリンクしない、というコードの参考にどうぞ。
添付: image_title.zip
 

Re: Re: 画像ブロックのカスタマイズ

2012年4月20日 at 21:28
ありがとうございます!
 

Re: 画像ブロックのカスタマイズ

2012年4月23日 at 0:01
hissyさん、アップしていただいたコードを参考に外部リンクと内部リンクの入力欄を追加してみました。
(ブロックを添付しました)

が、これだと、 target="_self"で同じページか、target="_blank"で別ページにリンクするかの選択ができません。
(私の作ったものだと常にselfで飛ぶようになってます)

selfとblank選択欄の追加はできますか?
分かりましたら,教えてください。
よろしくお願いします。
 

Re: 画像ブロックのカスタマイズ

2012年4月23日 at 1:49
Designer Contentのセレクトボックスでできると思いますよー
 

Re: 画像ブロックのカスタマイズ

2012年4月25日 at 0:16
hissyさん返信ありがとうございます。
なるほど、セレクトボックスでできるんですね。

しかしながら、PHP初心者の私には、ちょっと難しそうです。
もう少し修行を積んでから挑戦したいと思います。
 

Re: 画像ブロックのカスタマイズ

2012年4月25日 at 12:04
designer content 3.1(concrete5 ver5.5.2用) で見ているのですがセレクトボックスを作成するとview.phpにif文が作成されていてそこに当てはめるだけでいいようになっています。

やり方は
ブロック作成時にセレクトボックスをブランクとセルフで作成する。(文言は適当です)

veiw.phpのリンクしているコードをif文内にコピーします。
ブランクのほうのコードにtarget="_blank"を足す。

これでいけるので思われているより簡単に出来るかもです。
if文にはコメントが書いてあるので分かりやすいですよ。
ぜひ、チャレンジしてみてください。
 

Re: 画像ブロックのカスタマイズ

2012年4月25日 at 17:59
またまた興味があったので作ってみた。(今回はさくっとはいかなかったけど。)

ひとまず大事な事は、「Designer Contents」で、「ドロップダウンリスト」を使っての Target=" " の中身を切り替えるという・・・お題なので・・・(笑)
(以前つまづいて出来なかった事だったので、お勉強がてらに。)

作業内容:
1、「Designer Contents」でそれぞれの項目を作成する。
2、吐き出されたものをもとに・・・ view.php のファイルの改造をする。
3、Target=" " の中身を php で入れる。。。しかしデーターは「数字」のままなのでこれをなんらかをして、「_blank or _self 」を取り出すようにする。

PHPのサンプルを参考に・・・そして concrete5 のお作法にそって・・・
わかってしまえば、なんだ~ということになるんだけど、どこを探しても参考になるものがなかったので。

以下は、サンプルファイル「view.php」を見ていただければ、それぞれの取り出し方の工夫が(苦労ともいうし、勉強ともいえるw)サンプルで表示されるようになっています。
ポイントは、セレクターのデーターの中身が「何に?」なっていて「なにを?」吐き出しているかが一目で、わかります。

<a href="<?php echo $link_url; ?>" target="ここにデーターを入れる">
添付: imagetitle.zip
 

Re: 画像ブロックのカスタマイズ

2012年4月25日 at 18:13
参考になるかどうかはともかくとして・・・
上記の際に使用した「DesignerContent」の作成の画像サンプル。
基本的には、欲しいものの「データーベースフィールド」を自動で作ってもらい、view.php にて適当に編集をするという流れで良いでしょう。
 

Re: 画像ブロックのカスタマイズ

2012年4月25日 at 23:58
hissyさん、acliss19xxさん、tomoyaさん、できました!
tomoyaさんのファイルを見て、
そのファイルをそのまま使い・・・
試行錯誤の結果・・・

できました!!!
最強バージョンです(自分的にはです・・・はは)。

タイトル部分を無くせば、単純なボタンにもなりますし、
本当に、嬉しいです。
これで、内部リンクと外部リンクの2バージョンのブロックを作らなくて良くなりました。

けど、ここまでくると欲がでてきて・・・
内部リンクと外部リンクも、一度セレクトボックスで選択して、
選択した方を表示させる、なんて事ができたらな・・・なんて思ったりして。

ちょっとまた頑張ってみます。

みなさん、ありがとうございました。
添付: imagetitle.zip
 

Re: 画像ブロックのカスタマイズ

2012年4月26日 at 1:11
いい具合にハマッてきてますなー