この記事は、そのようなアイコンを見たレイアウトデザイナーに捧げられています。
充填のためにコンテンツマネージャーに提供された後のサイトで。
もちろん、同僚に行って、彼/彼女が写真を置くことを不注意に忘れたと言うことができますが、これは私たちの方法ではありません。
ストーリーは、私が組版しているページがひどく見え、画像がなければページとやり取りする能力を本質的に失ったことを見たときに始まりました。
サイトのコンテンツはサイトの管理エリアから入力され、設定する場所を探すのが面倒なので、考えが思い浮かびました。 私たちは彼を無駄に食べさせていますか？ 「。
わかりました、わかりました、私は悪人ではありません。他の人が貧しい仕事をしているとき、私はただそれが好きではありません。 一般的に、このような小さなスクリプトが生まれました。
HTML<img id="lostPhoto" src="" alt="mainPhoto"> <div class="bl_wrapper"> <img class="bl_image" src="" alt="photo"> <img class="bl_image" src="https://github.com/BlackStar1991/Pictures-for-sharing-/blob/master/code.jpg?raw=true" alt="Photo by Zirka Andry's"> <img class="bl_image" src="" alt="photo"> </div>
CSS .wtfWhereIsPhoto{ max-height: 60vh; } .bl_wrapper { width: 100%; text-align: center; } .bl_image { max-width: 20vw; }
Javascript <script> window.onload = function () {
ここでどのように機能するかを見ることができます：CodePenの Andry Zirka（@ BlackStar1991）によるPen Inattentive Content Managerを参照してください。
スクリプトは、「コンテンツが見つかりませんでした-写真を挿入しました」という原則に基づいて動作します。私自身はJSのドックではないので、ここではすべてが非常に簡単ですが、それでも使用することに決めた人のためにコメントをいくつか書きます。- 最後のbody終了タグの前にスクリプトを追加します。サイトがテスト段階からインターネットにアクセスする段階に移行したときにスクリプトをすばやく削除できます。余分な70kBをダウンロードする必要はありません
- 関数を開始するには、5つの関数パラメーターを設定する必要があります
。wtfWhereIsPhoto（checkItem、pictureWidth、pictureHeight、smartPhrase、doYouNeedPicture）;
- checkItem-空のタグを持つ画像を検索する識別子の責任
- pictureWidth-目的の画像の幅をコンテンツマネージャーに指定します
- pictureHeight - 〜n〜彼に高さを伝えます
- smartPhrase-請負業者に良いメッセージを書いています
- doYouNeedPicture-やる気を起こさせるsvg画像を追加するか、単純なメッセージで行うことを指示するブール値パラメーター。
ブラウザの画面サイズが<450pxの場合、画像を削除します。
Old Believers、またはjQueryは彼らのためではないとイデオロギー的に信じる人々のために、純粋なJSに同じことを実装しましたCodePenの Andry Zirka（@ BlackStar1991）によるPen Inattentive Content Manager（Pure JS）を参照してください。
実際には、それだけです。
ほとんどの時間は、SVG画像のレンダリングとそれに続く最小化に費やされました。誰かが役に立つといいのですが。警告！スクリプトは、コンテンツマネージャーとの関係を悪化させる可能性があります。思慮深く使用してください。