Horic Design

a-blog cmsやJavaScriptなどの情報を発信しています。

a-blog cmsでポートフォリオページを作ってみた


今までの自分の作品や、やってきたことをこんな感じでWebページ上で、並べられたらすてきじゃないですか??
さらに、下のようにその作品を管理するページがあれば、もっとすてきですよね??


カスタムフィールドグループ

a-blog cmsでは、そういうことが簡単にできちゃいます!!
では、どうやって自分の作品一覧を並べる仕組みを作ったのか、一から解説していきたいと思います!!

カスタムフィールドグループ

私がこれを実現するために着目した機能はカスタムフィールドグループでした。
カスタムフィールドとはユーザが独自のデータ形式を作成して保存し、表示するための機能で、カスタムフィールドグループとはそれをグループ化したものです。
カスタムフィールドグループを使えば、上のような入力フィールドを作成することが出来ます。
くわしくはこちらをご覧ください。http://developer.a-blogcms.jp/document/customfield/

field.html

私は、ブログのカスタム情報にカスタムフィールドを導入したかったので、field.htmlを次のようにthemeフォルダのbootstrap->admin->blogの中に導入しました。
また、bootstrap->admin->userの中にfield.htmlを作成すると、ユーザのカスタムフィールドが作れます。


カスタムフィールドメーカー

カスタムフィールドメーカーというものもa-blog cmsには用意されていて、これを使うと、簡単にfield.htmlを生成し、カスタムフィールドをつくれます


下の動画を見ると、便利さが伝わってくると思います


すると、下のようなフィールドが自動で作成されていると思います


Blog_Fieldモジュールの導入

あとは、上のカスタムフィールドで登録したデータをテンプレートに反映するだけです。
登録されたデータは、Blog_Fieldモジュールから呼び出すことができます。
私は、以下のようにポートフォリオを表示するテンプレートを作成しました。

<!-- BEGIN_MODULE Blog_Field -->
<!-- BEGIN portfolio_group:loop -->
<div class="row bs-examples" id="thumbnails">
<div class="{portfolio_class}">
	  <div class="thumbnail">
		  <!-- BEGIN portfolio_image:veil --><img class="img-responsive" src="%{ARCHIVES_DIR}{portfolio_image@path}"/><!-- END image:veil -->
		  <!-- BEGIN noimage -->
		  <img src="/images/noimage.png" alt="No image" />
		  <!-- END noimage -->
		  <h3>{portfolio_lead}</h3></a>
		  <p>{portfolio_summary}</p>
		  <hr/>
		  <a class="btn btn-primary btn-lg" target=_blank href="{portfolio_url}">詳しく見る</a>
	  </div>
</div>
<!-- END portfolio_group:loop -->
<!-- END_MODULE Blog_Field -->

表示されましたね。これで、カスタムフィールドグループの項目を、テンプレートに反映することができました。

Mansory.js


ちなみに、パネルの配置にはレンガ上に要素を敷き詰めてくれる、JavaScriptライブラリ、
Mansory.jsをつかいました。
導入方法は簡単で、下のようなソースコードを書くだけでOKです

$(document).ready(function() {/*for mansory.js*/
    var $container = $('#thumbnails')
    $container.imagesLoaded( function() {
    $container.masonry({
        columnWidth: '.thumb',
	itemSelector: '.thumb'
    });
    });
});

この場合、レンガ上に敷き詰めたい要素がthumbクラスの要素
それをかこっているのがthumbnailsというidの要素です


堀 悟大

有限会社アップルップル マークアップエンジニア。2014年高知大学理学部卒業。学生時代にHTML5のCanvas要素を使ってゲームを作っていたことでWeb全般に興味をもつ。アップルップル入社後はa-blog cmsを便利に使うための機能の実装や、HTML5の技術を使ったデジタルサイネージの実装を行う。趣味は英語。読むことも話すことも好き。

エントリーリスト

カテゴリーリスト

タグクラウド