*

Designer Contentでブロックを作る

公開日: : 最終更新日:2024/01/18 CMS

Concrete5の無料で用意されているアドオンの一種類である「Sortable Fancybox Gallery – 1.17」
携帯での表示に対応していて導入の敷居が低いのは良いが、セット単位で用いられるのでどうも使い勝手が悪い。
画像を登録した後いちいちセット登録をしなければならず、なにしろコレだけの為に意味もなく画像セットが量産されるのは効率が悪い。
元々のAirForceで使ってたのがもっと別のLiteBoxで、そっちの方が好きだし、コレを何とか使えないだろうかと思った。

Designer Contentでブロックを自作すれば良いじゃない。

スクリーンショット 2014-07-06 12.26.53

最終的に画像登録と下の赤丸部分のタイトルの設定が出来るようにする事を目標にする。

まずは公式サイトから一式プログラムをダウンロード。
http://www.jacklmoore.com/colorbox/

その後、Designer Contentでブロックを作成。
スクリーンショット 2014-07-06 12.17.52

画像スペースを作成。Altタグを設定できるようにしておけば画像タイトルを設定できるスペースに応用できます。Altタグとは別にタイトルをつけたい時はすぐ下にテキストエリアを用意しておくと良いでしょう。
これを登録出来るようにする最大数の画像の数だけ続ける。
DesinerContentの特性上、登録エリアに何も入れなかった場合はHTMLに何も出力されない為、余計なHTMLがブロック登録時に出力されると言う事がないので、ある程度余裕を持って登録枠を作っておくと良い。

出来たらブロックを作成。
出来たブロックのview.phpをFTPからダウンロードします。出来たブロックは

「ルートパス/blocks/ブロックハンドル名」

内に入っています。

view.phpを編集する。

<?php if (!empty($field_1_image)): ?>
<img src=”<?php echo $field_1_image->src; ?>” width=”” height=”” alt=”<?php echo $field_1_image_altText; ?>” />
<?php endif; ?>

の部分を編集します。

 

<script src=”<?php echo $this->getThemePath(); ?>/js/jquery.colorbox.js”></script><!– colorboxを使用する為のjs –>
<link href=”<?php echo $this->getThemePath(); ?>/css/colorbox.css” rel=”stylesheet” type=”text/css” /><!– colorboxを使用する為のcss –>

<?php if (!empty($field_1_image)): ?>
<a class=”group1″ href=”<?php echo $field_1_image->src; ?>” title=”<?php echo $field_1_image_altText; ?>”><img src=”<?php echo $field_1_image->src; ?>” width=”80″ height=”60″ alt=”<?php echo $field_1_image_altText; ?>” /></a>

<?php endif; ?>

<script>
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(“.group1”).colorbox({rel:’group1′});
$(“.ajax”).colorbox();
$(“.youtube”).colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(“.vimeo”).colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(“.iframe”).colorbox({iframe:true, width:”80%”, height:”80%”});
$(“.inline”).colorbox({inline:true, width:”50%”});
$(“.callbacks”).colorbox({
onOpen:function(){ alert(‘onOpen: colorbox is about to open’); },
onLoad:function(){ alert(‘onLoad: colorbox has started to load the targeted content’); },
onComplete:function(){ alert(‘onComplete: colorbox has displayed the loaded content’); },
onCleanup:function(){ alert(‘onCleanup: colorbox has begun the close process’); },
onClosed:function(){ alert(‘onClosed: colorbox has completely closed’); }
});

$(‘.non-retina’).colorbox({rel:’group5′, transition:’none’})
$(‘.retina’).colorbox({rel:’group5′, transition:’none’, retinaImage:true, retinaUrl:true});

//Example of preserving a JavaScript event for inline calls.
$(“#click”).click(function(){
$(‘#click’).css({“background-color”:”#f00″, “color”:”#fff”, “cursor”:”inherit”}).text(“Open this window again and this message will still be here.”);
return false;
});
});
</script>

サンプルのHTMLで読み込んでいるこのJSはcommon.jsなどの共用JSファイルの中かブロック内に直接ぶち込んでおくと良い。

本家ではコレとは別にjQeryを読み込んでいますが、concrete5がデフォルトで使用しているjQueryでも動作するのでheader.phpやブロック内で改めて読み込む必要はない。

ここではJSとCSSをテーマ内に保存しているが、ブロック内に保存するのも良いだろう。

 

ではview.phpの個々の解説

<?php if (!empty($field_1_image)): ?>
****
<?php endif; ?>

これは最初の画像登録エリアにデータがある場合に処理を実行すると言う意味。
最初にデータ登録がなかった場合に余計なHTMLが吐き出される心配ないとか言ったが、これはそう言う意味。

<a class=”group1″ href=”<?php echo $field_1_image->src; ?>” title=”<?php echo $field_1_image_altText; ?>”>

colorboxは<a>タグ内に埋め込まれた情報を読み取ってrightboxを生成する。
colorboxの詳細な使い方は本家や別のページに任せるとして必要な情報はその画像のタイトルと画像のパス。それは以下の通り。

<?php echo $field_1_image->src; ?>
は画像エリアに登録された画像のパスを取得する。

<?php echo $field_1_image_altText; ?>
altエリアに登録されたテキストを読み取る

と言う意味。これによって画像へのパスを<a>タグ内に画像へのパスを埋め込む事が可能になり、タイトルの入力とaltタグの入れ忘れに対応できると言う訳である。

実際の挙動がこちら。

スクリーンショット 2014-07-06 13.34.01

 

ブロックを追加でたった今追加したブロックを追加する。

スクリーンショット 2014-07-06 13.39.32

画像をファイルマネージャーに登録してAltを設定。

スクリーンショット 2014-07-06 13.39.50

ブロックを追加するとしっかりリンクが設定されたサムネイルサイズの画像がブロックとして追加されました。

http://airforce-x0.com/index.php/main_galley/nissan/nanogtr/

この記事でスクリーンショットを取ったページはこちら。

この間concrete5の勉強会に参加してきたが、Designer Contentは単純に決まったHTMLを吐き出してくれると言う点でも非常に便利で、CSSが絡んで、特定のHTML以外を特定のエリアに入れられたくないときにも使えるようだ。

 

色々と応用の利くアドオンなので開発の際には入れておいて間違いはないだろう。

悲報
5.7系のconcrete5にこのDesigner Contentはリリースしないそうで。
一応これに相当するアドオンはあるにはあるが、有料。
内政で作るもんなら兎も角、外注されて作るものに有料アドオンを入れるのはちょっと憚られる。

関連記事

no image

concrete5の使用感

最近巷で有名なconcrete5で、このサイトもブログページ以外はconcrete5で作ってある。

記事を読む

no image

Concrete5の凡ミスとその対処

concrete5 テーマ変更で反映されない というキーワードで検索されたことがある様子。

記事を読む

no image

サブドメインをとったのでサイトのディレクトリを移動した。

最近になってサクラサーバー上で独自ドメインに近いサブドメインを無料で取れる事に気がついてコレを取得し

記事を読む

WordPressのサイトパスを変えたときの対処法

Wordpressのインストールをした時、例えばデフォルトのフォルダ名でアップロードしちゃったなんて

記事を読む

no image

Concrete5で編集モードのときだけ記述しない。

いつだったかの記事でjQueryがConcrete5の動作を邪魔するからリリース時までコメントアウト

記事を読む

WPプラグイン SyntaxHighlighter Evolvedを試す

このブログは自分がCMSとかPHPを触る時の備忘録も兼ねているのだが、ここに書いたコードが読みづらい

記事を読む

[第4回] G/Afをコンクリ5.7に改造する[Concrete5]

このホームページの根幹、ギャラリーページを作りこんでみよう。 なんのギャラリーなのかを明示してその

記事を読む

no image

PHPでRSSを取得して記事一覧を表示

concrete5でWordpressの記事一覧を表示してくれって言われたからなんとかできないか模索

記事を読む

移転した時のCMSの設定いろいろ

前回はリダイレクトの重要性と設定を紹介した。 今回はCMSでやんなくちゃいけない事を紹介したい。(

記事を読む

no image

[第2回] G/Afをコンクリ5.7に改造する[Concrete5]

ってことで前回の記事から引き続き作業を続ける。 今回は前編と後編に分けてテーマの基本を作成する。

記事を読む

Message

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

閃刀入門

チラ裏に近い記事は書かない・書いていても公開しないつもりだっ

MD魔術師S23レポ

前回の記事を書いた時からデビューしたマスターデュエル。ただ、

マスターデュエルにてやっとプラチナに上がれた話

ネットの友人にモチベを掛けられてマスターデュエル参入。リンク

太陽の帝国、大鷲の群れに挑まんとす(ゲームジャーナル39号 真珠湾強襲リプレイpart:1)

初め半年や1年の間は随分暴れてご覧に入れる。然しながら、2年3年と

ダンジョンダイスモンスターズ レビュー

「クソゲーをプレイするのです。」以前この俺にクソゲーをレビュ

→もっと見る

PAGE TOP ↑