アップロード画像に漫画表示プラグインのリンクをつける

漫画表示プラグインの標準機能では編集本文にテキストリンクを挿入する形で掲載しますが、これを添付ファイル機能でアップロードした画像リンクとして掲載するカスタマイズです。 表紙や一ページ目をクリックすると本文ページに遷移する、という誘導もできます。

更新履歴

動作デモ

当サイトの同人活動で稼動しています。

前提

以上が正常に動作している状態で導入してください。今回はページに導入します。エントリーは未開発……。

導入方法

オプション管理で新規にオプション登録します。ここでは仮にオプションID「comic_page」とします。オプション名はわかりやすいもので、利用対象「ページ」、種類「一行入力」、必須「任意」、検証は「なし」か「英数字のみ」、それ以外は適宜調整してください。 ページの標準テンプレートtemplates/internals/page/default.htmlの15行目あたり、

   <!--{if $page.file and $page.image}-->
        <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_images/{$page.id}/{$page.image}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_image.width}" height="{$page_image.height}" /></a></p>
    <!--{elseif $page_thumbnail}-->
        <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_thumbnails/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
    <!--{elseif $page.file and $page_file.width and $page_file.height}-->
        <p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_file.width}" height="{$page_file.height}" /></p>
    <!--{elseif $page.file}-->
        <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}">{$page.memo|default:$page.file}</a></p>
    <!--{/if}-->

↑を↓に書き換えてください。

   <!--{if $page_associate.option.comic_page}-->
        <!--{if $page_thumbnail}-->
        <p><a href="{$page_associate.option.comic_page}" target="_blank">漫画を読む<br /><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_thumbnails/{$page.id}/{$page.file}" title="{$page.memo|default:$page.file}" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
        <!--{elseif $page.file and $page_file.width and $page_file.height}-->
        <p><a href="{$page_associate.option.comic_page}" target="_blank">漫画を読む<br /><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
    <!--{/if}-->
    <!--{elseif $page_thumbnail}-->
        <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}"><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_thumbnails/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_thumbnail.width}" height="{$page_thumbnail.height}" /></a></p>
    <!--{elseif $page.file and $page_file.width and $page_file.height}-->
        <p><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}" alt="{$page.memo|default:$page.file}" title="{$page.memo|default:$page.file}" width="{$page_file.width}" height="{$page_file.height}" /></p>
    <!--{elseif $page.file}-->
        <p><a href="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}page_files/{$page.id}/{$page.file}">{$page.memo|default:$page.file}</a></p>
    <!--{/if}-->

comic_page部分はオプション管理でつけたIDをいれてください。またテキストで「漫画を読む」と説明をいれてますが不要な場合は消しても動作します。

変更したファイルをアップロード、上書きしてください。以上でテンプレートの準備は完了です。

ここからは管理画面のページ登録に移動します。

メディア管理で漫画表示プラグインの動作どおりにディレクトリ作成→ファイルをアップし、いったんは通常通りテキストリンクを入力フォームに挿入。そのリンクURLをオプション管理の入力フォームにコピーペーストしてください。

あとは添付ファイル機能を使って任意の画像を選択、ページ登録してください。ページ確認でアップロードした画像ファイルをクリック、漫画表示ページが表示されたら完了です。

ちょっとややこしいですが、このような条件分岐で表示されるはず。

注意点

ページ設定のサムネイル画像の自動作成機能を利用していた場合、添付ファイルが大きすぎると漫画表示リンクより拡大表示が優先されます。自動作成を利用しないか、このカスタマイズで漫画表示する場合は設定値より小さい画像を使うようにしてください。

ソースを見直し、サムネイル使用時にも使えるようにしました。

今後の課題

不具合、課題点の解消方法などあればウェブ拍手、メール、Twitterなどからお知らせいただけると助かります。

TOP