メディア・ギャラリー関連のカスタマイズ
※[ ]内は各プラグインのID名
メディア関連
メディア機能に関するもの
- メディア機能を使いこなそう(Freo Template Gallery/freoはじめて物語)【2014/07/05追加】
メディア管理についての解説 - freoに登録した透過PNGの背景が黒色になるのを防ぐ方法(I'll be NET BLOG)【2016/06/04追加】
freoのメディア管理などで透過PNGを登録しようとすると、背景が黒色になってしまうのでその対処方法 - 閲覧制限関連についてはサイト全体の閲覧制限関連を参照すること
イメージに関するもの
- freo改造:イメージ画像を自動縮小(freo&WebDiaryProメモ)【2014/12/09追加】
ファイルのイメージの縮小を自動化。GD、ImageMagickどちらでもOK - freo改造:イメージ画像縮小加工+画像に透かしを入れる(freo&WebDiaryProメモ)【2014/12/09追加】
ImageMagickを使用。イメージ画像を縮小加工し、イメージ、添付画像とサムネイル、メディア投稿画像とサムネイルに透かし(ウォーターマーク)を入れる改造 - 添付画像やイメージに更に大きい画像等をリンクする(青空のドン底は)【2014/03/02追加】
表示の画像をクリックしたらより大きい画像を表示するのをオプションを利用して実現
サムネイルに関するもの
- サムネイル画像の自動作成について(freo.jp)
アップロードされた画像ファイルのサムネイルを自動作成する - ImageMagickについて(freo.jp)
サムネイル画像の作成などに、GDではなくImageMagickを使用 - サムネイル画像の手動登録について(freo.jp)
エントリーやページにファイルを添付する際手動で作成したサムネイルを登録する
※これ以外にも管理画面のメディア登録・挿入関連も参照
メディアに関するプラグイン
- 漫画表示プラグイン[media_comic](freo.jp)
メディア管理でアップロードしたファイル(複数枚の画像)を漫画形式で表示- 漫画表示プラグインを使ってみる(Freo Template Gallery/プラグイン解説)【2014/08/27追加】
プラグインの設置方法や使い方についての解説 - アップロード画像に漫画表示プラグインのリンクをつける(夏草生産農家)
- 漫画のサイズを揃えなくても綺麗に表示されるようにする方法(freo.jpサポート)【2014/09/15追加】
- 漫画表示プラグインの別ウィンドウについて(freo.jpサポート)【2015/01/11追加】
最終ページ(end.html)の「戻る」の部分を「開いたウィンドウを閉じる」仕様にする
- 漫画表示プラグインを使ってみる(Freo Template Gallery/プラグイン解説)【2014/08/27追加】
漫画表示プラグイン、配布されたままだとブラウザの表示領域の縦を超えるサイズの画像表示したとき途中で途切れちゃうな。とりあえずの対象法としてはdiv#media_comicとdiv.media_comicのheight:100%をmin-height:100%にしたらいいっぽい
- イラスト投稿プラグイン[paint](freo.jp)
しぃペインターやPaintBBSで、イラストを投稿- 【注意】パスワード認証プラグインと併用する場合は、libs/freo/plugins/config.password.phpのbeginファイルの読み込み設定にpaint/saveを追加する必要がある(追加しておかないと、Javaアプレットからのアクセス(イラストの投稿処理)が制限される)。
- 【重要】Java最新版(1.7.0_51以降)でしぃペインターが使えない場合の対処法(モナー板お絵かき掲示板のブロマガ)【2014/06/09追加】
Windowsのコントロールパネル⇒Javaコントロール・パネル⇒セキュリティ⇒サイト・リストの編集で例外サイトにfreoのイラスト登録のURL(/paint/admin_canvas)を追加するとOK - freo改造:イラスト投稿プラグインで画像編集(freo&WebDiaryProメモ)【2014/12/09追加】
メディアに保存した画像をイラスト投稿プラグインで読み込むように改造する方法
- メディア映像表示プラグイン[media_movie_gallery](freo&WebDiaryProメモ)【2015/04/14追加】
メディアの特定のフォルダにアップされた映像、音声ファイル(FLV,MP4,MP3)を参照し、プレイリストを再生(FLAVER 3.0使用)
他社メディア提携関連
- pixivイラスト表示プラグイン[pixiv_illust]
pixivに投稿したイラストを一覧表示- pixivイラスト表示プラグイン(Freo Template Gallery/プラグイン解説)【2014/09/15追加】
プラグインの設置方法や使い方についての解説
- pixivイラスト表示プラグイン(Freo Template Gallery/プラグイン解説)【2014/09/15追加】
- pixiv小説表示プラグイン[pixiv_novel]
pixivに投稿した小説を一覧表示 - Tumblr on freo[tumblr_on_freo](夏草生産農家)
ミニブログ「Tumblr」の自アカウントの新着情報をfreo上に掲載できる- Tumblr on freo(Freo Template Gallery/プラグイン解説)【2014/09/15追加】
プラグインの設置方法や使い方についての解説 - 「Tumblr on freo」表示サンプル(夏草生産農家)【2014/03/16追加】
「Tumblr on freo」で使えるテンプレート集
- Tumblr on freo(Freo Template Gallery/プラグイン解説)【2014/09/15追加】
ギャラリー・イメージ関連
エントリーに関するもの
- エントリーギャラリー表示プラグイン[entry_gallery](標準装備)
エントリーに添付された「ファイル」や本文の画像をもとに自動的にギャラリーを作成
記事本文に絵文字が入っているとそれもギャラリーに入れられてしまうのが難点- エントリーイメージ/ギャラリー表示プラグインでカテゴリ絞り込み(青空のドン底は)
ユーティリティ形式でカテゴリ絞込み欄を作る - freoのエントリーギャラリー表示のメディアファイルを限定する(Web Liberty&freoカスタマイズ集)【2013/09/02追加】
エントリーギャラリーに表示される記事内の画像ファイルをメディア挿入されたファイルに限定する(絵文字などを出さないようにする) - エントリーギャラリー表示プラグインをサイドメニューに表示する方法(虹色ミツバチ/freoTIPS)【2013/11/17追加】
サイドメニューでエントリーギャラリー表示プラグインを表示する方法 - エントリーギャラリー表示プラグインで画像以外のファイルを表示させない方法(虹色ミツバチ/freoTIPS)【2014/03/02追加】
エントリーに登録されているファイルが画像の場合のみ表示させる
- エントリーイメージ/ギャラリー表示プラグインでカテゴリ絞り込み(青空のドン底は)
- エントリーイメージ表示プラグイン[entry_image](freo.jp)
エントリーに添付された「イメージ」をもとに自動的にギャラリーを作成
ページに関するもの
- ページイメージ表示プラグイン[page_image](freo.jp)
ページに添付された「イメージ」をもとに自動的にギャラリーを作成- ページイメージ表示プラグインの活用方法(freo&WebDiaryProメモ)【2015/02/14追加】
新着イメージをトップページとページカテゴリトップに表示する方法 - ページを更新昇降順に表示する:ページイメージ表示プラグイン改造版(freo&WebDiaryProメモ)【2015/02/14追加】
新着ページリストをトップページとページカテゴリトップ、専用ページに表示する改造プラグイン
- ページイメージ表示プラグインの活用方法(freo&WebDiaryProメモ)【2015/02/14追加】
- ページイメージ分類別表示プラグイン[page_image_categorized](freo.jp)
ページに添付された「イメージ」をもとに自動的に分類別ギャラリーを作成- ページイメージ分類別表示プラグイン用のページ登録についてのまとめ(【freo】Web Liberty総合2【Web Diary Pro】@2ch)
- ページ一括表示プラグインを利用した多階層イメージギャラリー(freo&WebDiaryProメモ)【2015/02/14追加】
ページ一括表示プラグインとオプションを利用した、多階層イメージギャラリーの作り方 - ページ一括表示プラグインを利用した多階層イメージギャラリーその2(freo&WebDiaryProメモ)【2015/02/14追加】
ページ一括表示プラグインと分類名を画像化したイメージ画像を利用した、多階層イメージギャラリーの作り方
メディアに関するもの
- メディア一括表示プラグイン[media_all](freo.jp)
メディアをツリー状に一括表示する- トップページとかでもメディア一括表示プラグインを利用するためのdisplayプラグイン(虹色ミツバチ)
メディア一括表示プラグインをデフォルト画面・エントリー画面(エントリー一覧表示画面・カテゴリー画面・記事個別表示画面)・ページ画面で利用するためのdisplayプラグイン
- トップページとかでもメディア一括表示プラグインを利用するためのdisplayプラグイン(虹色ミツバチ)
- スライドショーをメディア機能で管理する方法(虹色ミツバチ/freoTIPS)【2013/09/13追加】
サイトに表示するスライドショーなどをメディア一括表示プラグインで利用する - メディア一括表示プラグインでメディアをファイル名の降順で表示する方法(虹色ミツバチ/freoTIPS)【2014/03/12追加】
- 一括表示,ページ表示,新着系,過去ログの表示を逆順に(freo&WebDiaryProメモ)【2014/12/10追加】
メディア一括表示プラグインをテンプレート編集でファイル名の降順にする方法 - メディア一括表示プラグインで複数の特定ディレクトリを表示する方法(freo.jpサポート)【2014/08/05追加】
メディア一括表示プラグインで複数の特定のディレクトリ以下のみを表示させる(テンプレート内で条件分岐を利用) - メディア一括表示プラグインでメディアを登録日順に表示する方法(freo.jpサポート)【2014/08/15追加】
- メディア一括表示プラグインのメディア一覧をtemplates/internals/default/default.htmlに記述する方法【2016/07/09追加】
templates/internals/default/default.htmlに
<div id="media_all"><p>Now Loading ...</p></div> を追加して、
直後の行に <script>$("div#media_all").load("{$freo.core.http_file}/media_all div#media");</script>
を書くとメディア一覧が表示されます。
…でOKか思ったのですが、表示はされるものの、これだとLightbox系のJavaScriptが動作しなくなる可能性がありますね…。jQueryでclickイベントをliveに変更すれば大丈夫そうですが、JavaScriptが解らないと自力での対処は難しそうです。参考:http://okwave.jp/qa/q7349592.html
代わりに、テンプレートに
{fetch file="http://~設置URL~/media_all"}
と書けば、PHPでメディアページを読み込んで表示できます。ただ、この場合は余計なヘッダとフッタも読み込んでくるので、templates/plugins/media_all/default.htmlにある
{include file="header.html"}
と
{include file="footer.html"}
を削除してヘッダとフッタを読み込まないようにしておく必要があります。
また、PHPのバージョンによっては「Function split() is deprecated」という警告が表示されることがあります。調べてみたところ、これはSmartyが非推奨な命令を使用しているからですが、libs/smarty/plugins/function.fetch.phpの184行目あたりにある「split」を「explode」に書き換えれば対処できます。PHP版は最初のJavaScript版よりも若干表示が遅く感じるかもですが、JavaScript版が難しければお試しください~。
- メディア表示プラグイン[media_list](freo.jp)
特定のディレクトリ内にあるメディアを一覧表示- freoでちょっとかっこいいページネーション~メディア表示プラグイン編(虹色ミツバチ/freoTIPS)【2014/04/04追加】
- メディア表示でメディアをクリックしたとき任意で関連付けたURLに飛ばす方法(freo.jpサポート)【2015/06/13追加】
ファイルの説明部分に関連付けたいURLを入力してリンクさせる方法 - メディア表示プラグインで表示させる文字をディレクトリごとに変更したい(freo.jpサポート)【2016/06/04追加】
メディア表示プラグインで表示させたい文字をディレクトリごとに変更する方法
- メディア文章表示プラグイン[media_document](freo.jp)
メディア内の文章ファイル(テキストファイルやHTMLファイルなど)を一覧表示・個別表示する - メディアランダム表示プラグイン[media_randam](虹色ミツバチ)【2015/08/08追加】
freoのメディア機能で登録したある階層のディレクトリのメディア(画像)をランダムで1枚のみ表示するプラグイン
その他のプラグインによるもの
- アルバムプラグイン[album](虹色ミツバチ)【2014/08/05追加】※データベース作成のためプラグインのセットアップが必要
複数の画像が掲載可能でキャプションもつけられるギャラリー用プラグイン- アルバムプラグインをバージョン2_0_0にアップデートする方法(虹色ミツバチ/freoTIPS)【2014/08/15追加】
バージョン2_0_0でデータベースのフィールドが増えたので、旧版の利用者向けにデータベースを書き換える方法 - アルバムプラグインでサブカテゴリーを設定する方法(虹色ミツバチ/freoTIPS)【2014/08/15追加】
アルバムプラグインでオプションを使ってサブカテゴリー(種類)を設定してアルバムの種類でも検索できるようにする - アルバムプラグインで漫画を表示してみるカスタマイズとテンプレート(虹色ミツバチ)【2014/08/15追加】
アルバムプラグインで漫画を表示してみるカスタマイズ例とテンプレート
- アルバムプラグインをバージョン2_0_0にアップデートする方法(虹色ミツバチ/freoTIPS)【2014/08/15追加】
- アルバムアーカイブ表示プラグイン[album_archive](虹色ミツバチ)【2014/08/05追加】
アルバムを作成月別に表示するプラグイン - アルバムタグクラウド表示プラグイン[album_tagcloud](虹色ミツバチ)【2014/08/05追加】
アルバムプラグインのデータをもとにタグクラウドを表示 - 新着アルバムプラグイン[album_recently](虹色ミツバチ)【2014/08/05追加】
新着アルバムを表示できるプラグイン - アルバムレスポンスプラグイン(虹色ミツバチ)【2015/09/25追加】
アルバムプラグインにレスポンス(コメント)をつける
※アルバムレスポンスプラグイン[albumres](※データベース作成のためプラグインのセットアップが必要)、アルバムレスポンス件数表示プラグイン[album_count]、新着アルバムレスポンスプラグイン[albumres_recently]が同梱- アルバムレスポンスメール通知プラグイン[albumres_inform](虹色ミツバチ)【2015/09/25追加】
アルバムレスポンス記事が投稿された時に指定されたメールアドレス宛にメール通知を行う - アルバムレスポンススパム対策プラグイン[albumres_spamfilter](虹色ミツバチ)【2015/09/25追加】
アルバムレスポンスプラグインにスパム対策機能をつける
- アルバムレスポンスメール通知プラグイン[albumres_inform](虹色ミツバチ)【2015/09/25追加】
- アルバムアーカイブ表示プラグイン[album_archive](虹色ミツバチ)【2014/08/05追加】
モーダルウィンドウ(画像拡大表示)関連
Colorbox関連
- Colorbox - a jQuery lightbox
freoに標準で搭載されているColorboxの公式サイト(英語)
- freoの画像表示でColorBoxを画面からはみ出さないよう設定するには(Web Liberty&freoカスタマイズ集)
モバイルだとうまくいかないかも? - freoのentry(またはpage)で複数画像をcolorboxで表示する場合(Web Liberty&freoカスタマイズ集)
- freoのentry(またはpage)で複数画像をcolorboxのスライドショーで表示する場合(Web Liberty&freoカスタマイズ集)
- freoのColorboxを最新版にする(Web Liberty&freoカスタマイズ集)【2013/07/19追加】
- freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法(虹色ミツバチ/freoTIPS)【2014/01/20追加】
サイドメニューでエントリーギャラリー表示プラグインを表示する方法- freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法(freo.jpサポート)【2014/01/20追加】
上記の方法を応用して/js/default.jsに
- freoのcolorboxで表示される画像に自動的にrel="lightbox"を付与する方法(freo.jpサポート)【2014/01/20追加】
$(function(){
$('a[href$=".jpg"],a[href$=".jpeg"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".png"],a[href$=".PNG"],a[href$=".gif"],a[href$=".GIF"]').attr({ rel: "lightbox-atomium" });
});
を追加する。
- colorboxの効果を変更する(freo&WebDiaryProメモ)【2015/01/11追加】
freoで画像表示に使われているcolorboxの効果を変更する方法 - 画像クリックでも閉じる(freo&WebDiaryProメモ)【2015/01/11追加】
colorboxを画面外だけでなく画像クリックでも閉じるように変更するためのJavascript
Colorbox以外のプラグイン関連
- freoでfancyBox2を導入するには(Web Liberty&freoカスタマイズ集)
Colorboxをレスポンシブに対応しているfancyBox2に変更 - freoでHighslide JSを導入するには(基本編)(Web Liberty&freoカスタマイズ集)
- freoでHighslide JSを導入するには(応用編)(Web Liberty&freoカスタマイズ集)
- freoでSlimbox2を導入するには(Web Liberty&freoカスタマイズ集)
Slimbox2はモバイルやインラインフレームには未対応
※ここに載っていない情報が何かあれば...情報を追加・編集する
※編集は面倒・やり方が分からない場合は、コメント欄に書いていただければ有志の方で編集します。
- 最終更新:2018-12-16 20:53:56