サポート » 使い方全般 » アップロードした画像のファイル名をカスタマイズしたい

  • 例えば image.jpg というファイルをアップロードすると
    image.jpg
    image-160×120.jpg
    image-320×240.jpg
    image-1024×768.jpg
    のような画像が uploads ディレクトリにできると思うのですが、これをファイルをアップロードした時点で、
    image.jpg
    image-thumbnail.jpg
    image-middle.jpg
    image-large.jpg
    のようにする方法はありますか?

    レスポンシブウェブにする際に、最初は thumbnail を読み込むようにしておいて、必要であれば大きいものを読み込むために jQuery でファイル名をリネームするということができないか?と思案中です。

    もっと言えば画像サイズは add_image_size で追加することもあるかと思いますので、$name を ファイル名-xx.jpg の xx にしてくれれば幸せになれるような気がします。

    画像サイズを決めておけば数字で…という方法もありますが、4:3 ばかりの画像ばかりではないと思いますのでこんな方法があればいいなと思った次第です。
    あんまりバカな質問ばかりしてると出禁になるような気もしますがよろしくお願いします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    テストしていませんが、フィルタで、変更できたと思います。
    http://tenman.info/labo/snip/archives/3243

    トピック投稿者 sanokoyuki

    (@sanokoyuki)

    nobita さん、ありがとうございます。
    このページ、実は見たのですがこれでいいのかどうかわからなくて…。

    1. image.jpg をアップロードする
    2. image.jpg が add_image_size で定義されたものも含め、image-name1.jpg image-name2.jpg image-name3.jpg …とサイズの名前が付加されて、 uploads ディレクトリに保存される
    3. サイト内で表示する際は jQuery で画面サイズに応じた画像ファイル名にリネームして使う

    とか便利かなぁ…と思った次第です。

    フィルタは実はよくわからなかったので今まで手を付けていなかったのですが、そちらに手を出す必要があるのかもしれませんね。

    nobita さん、ありがとうございます。
    このページ、実は見たのですがこれでいいのかどうかわからなくて…。

    あ、すみません みてくださっていたんですね。

    サイト内で表示する際は jQuery で画面サイズに応じた画像ファイル名にリネームして使う

    というあたりが、どのような事をやろうとしているのか、ちょっとわからないのですが、

    実例で行くと、

    https://wordpress.org/themes/raindrops/

    というテーマのテーマオプションページで、位置だとかbox-height という項目を、ファイル名を変更して、

    raindrops-item-header-style-norepeat-top-30-left-30-x-height-300-IMG00003.jpg

    という名前で保存して、表示する時にその画像の高さや位置をファイル名から検出するというのはやっていますけど、、、

    ( 動くことは動きますが、だれも使ってくれず、過去の遺物化してます )

    見当違いでしたら、忘れてください。

    トピック投稿者 sanokoyuki

    (@sanokoyuki)

    nobita さん、ありがとうございます。
    色々チャレンジしているのですが、動いてくれないのでお返事遅くなってすみません。

    サイト内で表示する際は jQuery で画面サイズに応じた画像ファイル名にリネームして使う

    今考えているのは

    1. ブラウザに表示する画像はあらかじめ最小のものを指定しておく
      ex) image-thumbnail.jpg
    2. jQuery を使ってブラウザのサイズを取得し、body タグにブレークポイントに応じた class ( sp/tb/pc etc.) を追加する
    3. ブラウザのサイズに応じて、jQuery の正規表現を使って -thumbnail 部分を -middle や -large 等に置換する
      大きい画像を読み込むよりも小さい画像を読み込んだ方が読込速度も向上し SEO 的にも有利かと…

    こんなイメージです。
    この時に、数字で -640×640 ( 1:1 ) -640×480 ( 4:3 ) -640×355 ( 9:5 ) -640×360 ( 16:9 ) 等バラバラになっていると jQuery で置換するのが大変なような気がしたのです。またこの例では正方形又は横長の場合ですが縦長になることもあり、計算で本来表示するサイズを求めるのは手間(不可能?)のように思えたからです。

    raindrops の件、ありがとうございます。
    また後で確認してみます。

    jQuery で置換するのが大変なような気がしたのです。

    全体として、シンプルなものにするために、たぶんそういう工夫は必要なんでしょうね。

    今考えているのは

    jQuery を使ってブラウザのサイズを取得し、body タグにブレークポイントに応じた class ( sp/tb/pc etc.) を追加する

    私も、そういうやり方もあるんじゃないかと思って、

    https://wordpress.org/themes/enough/

    というテーマで、試してみたんですけど、( enough-w-uxga …enough-w-vgaみたいなクラスをbodyに追加)
    実際にやってみると、スタイルの記述量がとんでもなく増えたりするので、使いどころを吟味するといいかも、

    レティーナディスプレイ等の対応なども、考慮してみるといいと思います。

    ワードプレスのテーマ回りだと、私がテーマを作り始めたころは、300×228だったスクリーンショットのサイズが、最新のルールでは、1200×900になっていたりします。

    また、

    http://alistapart.com/article/responsive-images-in-practice

    みたいなのも、今は使えないかもしれないですがみておくといいと思います。

    トピック投稿者 sanokoyuki

    (@sanokoyuki)

    nobita さん、お返事ありがとうございます。
    また、色々とご意見いただき感謝しています。

    無視しているわけでも、落胆しているわけでもなく、なんとかすべく奮闘しております。
    プラグインなども色々探しながらですので、お返事がいつになるかわかりませんが…。

    またうまくいけたらフィードバックします。
    本当はどなたか心の優しい方が、ホレ、と答えをさっと出してくれたらうれしいのですが…。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「アップロードした画像のファイル名をカスタマイズしたい」には新たに返信することはできません。