Picasaに置いた画像をWordPressで利用する : トイレのうず／ブログ

このサイト 3 年前の 7 月に独自ドメインに移転したんだけれど、その前はプロバイダが提供しているスペースでサイトと Blog をやっていた。移転の際、面倒だから blog の画像類は以前利用していたプロバイダのホームページスペースをに置いたままだった。クラウドへの写真データのバックアップを検討するにあたり、年間 2000 円弱（有料スペース 80 GB で $20 ）をどこかから捻出しなくてはと思い、白羽の矢が立ったのがメールアドレスを維持するためだけに以前利用していたプロバイダーの au one net に支払っている月 150 円。（ au 携帯と支払いを同じにしたら、まとめて請求で 250 円のところ 150 円になっている。） au one net に届くメールの大半がスパムだし、その他のメールもカタログ通販のものなので、思い切って 9 月いっぱいで解約しようかと。

画像ファイルをこのサイトを置いているサーバーにそのまま移して、 SQL でリンク先を変更するのが一番楽なのだが、サーバーの負担を減らすためとページの読み込みを早くするために、 Picasa ウェブアルバムに画像を置くことにした。

Picasa ウェブアルバムのイメージの URL とサムネイルサイズの指定

昨日一般公開された Google+ に登録すると、長辺が 2048 ピクセルまでの画像は容量無制限で Picasa ウェブアルバムにアップロードすることができる。これを機に公開している写真の画素数を少し大きくすることにした。 Blog 初期の画像は 120 × 160 ピクセルとかで今だと携帯でみても小さいから。

画像 URL は Picasa ウェブアルバムで写真を表示したとき、右側に表示されるメニューの「この写真へのリンク」をクリックすると表示される「画像を埋め込み」にある文字列中の URL である。下記の文字列の太文字部分。

<table style="width:auto;">
	<tr>
		<td><a href="https://picasaweb.google.com/lh/photo/8FJQ_ukVhC07cfrM2BgaAA?feat=embedwebsite"><img src="<strong>https://lh5.googleusercontent.com/-AXLiMtqVq1s/TnI0GeZll7I/AAAAAAAAqas/qiwrR7HupwM/s144/20110913_1.jpg</strong>" height="108" width="144" /></a></td>
	</tr>
	<tr>
		<td style="font-family:arial,sans-serif; font-size:11px; text-align:right">送信者 <a href="https://picasaweb.google.com/113249731657718795722/Blog_images_picasa?authuser=0&feat=embedwebsite">blog_images_picasa</a></td>
	</tr>
</table>

【表示例】

送信者 blog_images_picasa

表示される画像の大きさを変更することもできる。 Picasa ウェブアルバムはアップロードした時点でサムネイルがいくつか作成されるので、数値を指定してやればリサイズなしでブラウザでレンダリングされる。作成されるサムネイルの長辺サイズは下記。

72/144/200/288/320/400/512/576/640/720/800/912/1024/1152/1280/1440/1600

指定の方法はアルファベット＋サムネイルのサイズ。下記の URL の s144 の部分。

https://lh5.googleusercontent.com/-AXLiMtqVq1s/TnI0GeZll7I/AAAAAAAAqas/qiwrR7HupwM/s144/20110913_1.jpg

指定数値の頭につくアルファベットは 3 種類あり、「 s 」が長辺サイズ、「 w 」が横幅サイズ、「 h 」が縦幅サイズみたい。 s144 の部分を削除すると、アップロードしたオリジナルサイズの画像を表示することができる。

オリジナルサイズを表示する URL

https://lh5.ggpht.com/-AXLiMtqVq1s/TnI0GeZll7I/AAAAAAAAqas/qiwrR7HupwM/20110913_1.jpg

Picasa Express x2 : Picasa のイメージを WordPress に埋め込むプラグイン

Picasa Web にアップした画像を WordPress に貼り付けるプラグインはいくつかあり、 Picasa Image Express が有名みたい。でもこれ公開アルバムからしか写真を選択できないみたいなので、非公開アルバムからも写真が選択できる Picasa Express x2 を使うことにした。

しかし問題発生。 Picasa Express x2 をインストールして設定を行おうとしてもなぜか「変更を保存」のボタンが出てこない。それで Picasa Express x2 のソースをあたってそれらしきバグ？を見つけたので修正した。 picasa-express-2.php の 1394 行目あたり。バージョンは 1.5.2 。

【修正前】

$this->make_settings_row(
	__('Large image size', 'pe2'),
	'<label><input type="checkbox" name="pe2_large_limit" value="'.$option.'" '.checked(($option)?1:0,1,false).' /> '.__('Limit ','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="w" '.checked($mode[1], 'w', false).' '.disabled(($option)?1:0,0,false).' /> '.__('width','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="h" '.checked($mode[1], 'h', false).' '.disabled(($option)?1:0,0,false).' /> '.__('height','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="s" '.checked($mode[1], 's', false).' '.disabled(($option)?1:0,0,false).' /> '.__('any','pe2').'</label> '.
	__(' to ','pe2').
	'<input type="text" name="pe2_large_size" class="pe2_large_limit" style="width:60px;" id="pe2_large_size" value="'.$mode[2].'" '.disabled(($option)?1:0,0,false).' />'.
	__(' pixels','pe2'),
	sprintf(__('Value \'/%s\' will be used to limit large image'),"<span id=\"pe2_show-large-size\">$option</span>"),
	'',
	'id="large-limit-message" style="display:'.(($option) ? 'block' : 'none').';"'
);

【修正後】

$this->make_settings_row(
	__('Large image size', 'pe2'),
	'<label><input type="checkbox" name="pe2_large_limit" value="'.$option.'" '.checked(($option)?1:0,1,false).' /> '.__('Limit ','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="w" '.checked($mode[1], 'w', false).' '.($option?"":"disabled").' /> '.__('width','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="h" '.checked($mode[1], 'h', false).' '.($option?"":"disabled").' /> '.__('height','pe2').'</label> '.
	'<label><input type="radio" name="pe2_large_mode" class="pe2_large_limit" value="s" '.checked($mode[1], 's', false).' '.($option?"":"disabled").' /> '.__('any','pe2').'</label> '.
	__(' to ','pe2').
	'<input type="text" name="pe2_large_size" class="pe2_large_limit" style="width:60px;" id="pe2_large_size" value="'.$mode[2].'" '.($option?"":"disabled").' />'.
	__(' pixels','pe2'),
	sprintf(__('Value \'/%s\' will be used to limit large image'),"<span id=\"pe2_show-large-size\">$option</span>"),
	'',
	'id="large-limit-message" style="display:'.(($option) ? 'block' : 'none').';"'
);

どうも disabled(($option)?1:0,0,false) がうまく動いていなかったようなので、すべて ($option?"":"disabled") としました。画像の最大を設定する項目（ Large image size ）の箇所でバージョン 1.4 にはないので、 1.5 から付け加えられた機能みたい。

ちなみに、 Picasa ウェブアルバムの画像 URL のサブドメイン部分に規則性が発見できなかったため、（元ファイルから大きな画像を Pixelmater で再度作成しつつ）画像はすべて手作業で貼り直しだった。サムネイルは以前 120 × 160 ピクセルだったのだけれど、 PIcasa で自動的に生成されるサムネイルにそのサイズがなかったので、 s200 で指定できる 150 × 200 ピクセルのサムネイルにした。

暇を見つけて、 WordPress でアップロードした画像も Picasa ウェブアルバムに移そうかと思っている。 WordPress はデータベースにおいて、記事管理と画像管理を同じテーブルにて行っているので、画像を削除すればデータベース自体も少し軽くなるはず。