freoカスタマイズ集

freoで画像を拡大するのにcolorboxではなく、Highslide JSを使用する場合の設置方法です。

1. Highslide JS の左側のメニューにある「Download」を開いて「Get the zip package」の下にある「Download now!」ボタンを押して一番下にある「Do you accept the licence conditions above?」の「Yes」ボタンを押してダウンロードします。
2. ダウンロードしたものを解凍し、highlide フォルダ内の以下のファイルをfreoの次のディレクトリ内にUPします。
   • highslide.js ⇒ js/ へ
   • highslide.css と highslide-ie6.css ⇒ css/ へ
   • graphics/ ⇒ images/ へ

   freo
    ┣ js ━ highslide.js
    ┣ css ┳ highslide.css
    ┃     ┗ highslide-ie6.css
    ┗ images ━ graphics ～  （略）

3. templates/header.html の

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}colorbox.css" type="text/css" media="all" />

   の部分を、

   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}highslide.css" type="text/css" media="all" />
   <!--[if lt IE 7]>
   <link rel="stylesheet" href="{$freo.core.http_url}{$smarty.const.FREO_CSS_DIR}highslide-ie6.css" type="text/css" media="all" />
   <![endif]-->

   に、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}jquery.colorbox.js"></script>

   の部分を、

   <script type="text/javascript" src="{$freo.core.http_url}{$smarty.const.FREO_JS_DIR}highslide.js"></script>

   に変更（緑字を赤字に）し、

   </head>

   の手前に、

   <script type="text/javascript">
     hs.graphicsDir = '{$freo.core.http_url}images/graphics/';
     hs.outlineType = 'rounded-white';
   </script>

   を追加します。
4. メディア挿入 ⇒ 登録した画像（サムネイル使用）に適用する場合：templates/internals/admin/iframe_media.html の83、84行目あたりにある

   {if $file.thumbnail.width and $file.thumbnail.height}
   title="<a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/～略～/></a>"

   の部分を、

   {if $file.thumbnail.width and $file.thumbnail.height}
   title="<a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}medias/～略～/></a>"

   に変更（赤字を追加）します。
5. エントリーの添付ファイルで登録した画像（サムネイル使用）に適用する場合：templates/internals/default/default.html の101、102行目あたりにある

   <!--{elseif $entry_thumbnails[$entry.id]}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   の部分を、

   <!--{elseif $entry_thumbnails[$entry.id]}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   に、
   templates/internals/view/default.html の26、27行目あたりにある

   <!--{elseif $entry_thumbnail}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   の部分を、

   <!--{elseif $entry_thumbnail}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   に変更（赤字を追加）します。
6. ページの添付ファイルで登録した画像（サムネイル使用）に適用する場合：templates/internals/page/default.html の20、21行目の

   <!--{elseif $page_thumbnail}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/～略～></a></p>

   の部分を、

   <!--{elseif $page_thumbnail}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/～略～></a></p>

   に変更（赤字を追加）します。
7. エントリーの添付ファイルで登録した画像（サムネイル不使用）＆イメージに適用する場合：templates/internals/default/default.html の99、100行目あたりにある

   <!--{if $entry.file and $entry.image}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   の部分を、

   <!--{if $entry.file and $entry.image}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   に、
   templates/internals/view/default.html の24、25行目の

   <!--{if $entry.file and $entry.image}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   の部分を、

   <!--{if $entry.file and $entry.image}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_files/～略～></a></p>

   に変更（赤字を追加）します。
8. ページの添付ファイルで登録した画像（サムネイル不使用）＆イメージに適用する場合：templates/internals/page/default.html の18、19行目あたりにある

   <!--{if $page.file and $page.image}-->
     <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/～略～></a></p>

   の部分を、

   <!--{if $page.file and $page.image}-->
     <p><a class="highslide" onclick="return hs.expand(this)" onKeyPress="return hs.expand(this)" href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/～略～></a></p>

   に変更（赤字を追加）します。

キャプションを画像のタイトルにする方法や複数の画像をアップする場合にコントロールバーをつける方法は次の「応用編」で解説しています。