印刷屋でWebサイトを作ってる自分用メモ的なもの

concrete5 5.7用の画像と記事のブロックを作ってみた。

Pocket

画像と文章を横並びにして表示するブロックの5.7版が見つけられなかったので作ってみました。

bootstrap3のグリッドシステムを使用しているので、その部分を読み込んであるテーマであればつかえます。

ファイルマネージャーとの連携?やビジュアルエディタ部分などは既存の画像ブロックや特色ブロックなどを参考にしました。

GitHubの練習としてあげてみたのでよろしくお願いします。

https://github.com/hayaka26/Image-Content/

問題があったら教えていただければ幸いです。

以下、現時点での仕様詳細です。

パッケージにはなっていないのでapplication/blocksに入れてください。

  • 見出し(h4)
  • 本文(ビジュアルエディタ)
  • 画像
  • 画像の位置(左右)
  • 画像のサイズ(特大、大、中、小)

が設定できます。

画像のサイズによってグリッドシステムの数字を変更しています。
なので、imgにmax-width: 100%;の指定が無いと表示が崩れるかと思います。

追加・編集画面

2

表示

1

スマホでの表示

画像が下にくるようにしています。

3

Bootstrapなのでレスポンシブ対応です。

今のところはこんな感じです。

Pocket