web-dev-qa-db-ja.com

最大の柔軟性で正確に画像を配置する方法

私はWordpressで次のデザインを開発するように依頼しました： http://imm.io/DLrl （デザインはプライバシーのために私がピクセル化しています）.

ご覧のとおり、画像の配置にはかなりランダムな構造があり、Webマスターは画像の配置方法、サイズ、サイズを自由に決めることができます。そのため、ウェブマスターが決定するたびに、今見ているデザインが変わります。写真の新しいコレクションがウェブサイトに追加されるとき、ウェブマスターはメインページでハイライトされるそれらのうちの2つを選ぶことができるはずです。

このデザインでは、1つの画像はアルバムまたは写真のコレクションを表します。そのため、これらの画像の1つをクリックすると、ライトボックスがポップアップ表示され、訪問者はそこに含まれているすべての画像を参照できます。

私はどのようにワードプレス内でそのようなデザインを実装するのかわからない。可能性に関するヒントやアイデアはありますか？見て価値がある任意のプラグイン？

（ps：私にとってデザインはやや紛らわしく、使いやすさと構造の点ではあまり明確ではありませんが、それは別の問題です）

pluginsimagesgallerydesign
1
grrrbytes

そのために、 "Dynamic Image resize" という名前のプラグインを書きました。それはテンプレートタグとショートコード（それは正確に同じ量の引数を取ります、テンプレートタグは取ります）を特徴とします。

// The args need to be an array
dynamic_image_resize( array(
     // The full path to the image in your uploads folder
     'src'     => 'http://example.com/wp-content/uploads/2012/03/some_image.png'
     // OR: the ID
     'src'     => 6

    ,'width'   => 60
    ,'height'  => 100
    ,'classes' => 'some classes to align and style the image'
) );

あなたはそれをさらに簡単にし、TinyMCEボタンを提供する "child"プラグインを追加することさえできます。

1
kaiser

私があなたの質問を理解したかどうかはわかりません。

あなたはそれらを記事やあなたのホームページやウェブサイトのどこかに埋め込んでいる人（例：注目のコンテンツ、サムネイル）がデザインが時間の経過とともに変化したとしても良く見えるように画像サイズを設定するベストプラクティスを探していますか？投稿はさまざまなスタイルを選択し、それに応じて画像に合わせることができますか？

これがあなたの望むことであれば、あなたのfunctions.phpファイルにadd_theme_support( 'post-thumbnails' );を追加することによってあなたのテーマのサムネイルを有効にして、それからあなたが望むサイズ変更されたサムネイルを設定することができます。例えば：

 add_image_size( 'square', 300,  300,  true ); 
 add_image_size( 'featured', 640,  480,  false ); 
 add_image_size( 'your_label', $width, $height,  $crop );

$ cropは、trueまたはfalseに設定できます。CSSで縮小したときに画像をトリミングするかサイズ変更するかによって異なります。

最終的に、あなたのデザインが正方形のサムネイルや固定比率の写真をたくさん使っているなら（それがあなたのリンクに現れる）、あなたは固定比率でもっと大きな画像を定義し、必要なら縮小することができます。小さいまたは大きいサムネイルを表示しますが、サイズの点でそれほど異ならないのであれば、別の画像サイズを正当化することはできないので、必要に応じて大きい方を縮小します）。

あなたが家のためにライトボックスやいくつかの機能を備えたコンテンツを生成することについて質問している部分にとっては、最良の方法はプラグインで行くでしょう。ギャラリーを管理し、次にライトボックスを処理するためのJavaScriptを管理するためのAdvanced Custom FieldsまたはNextgen Gallery。必要な画像（さまざまなサイズから選択するサムネイル）を入手したら、必要なものを完成できるはずです。

0
unfulvio