CODEWITHSUNDEEP
htmlcss
Roland Soós
Roland Soós

Reputation: 3290

How to set img size if image not loaded

I'm create a custom wysiwyg editor, with custom variables which are filled in from PHP after the content is saved.

For example {image} is a placeholder, which will be filled from PHP after the content saved.

In this case my content template in the HTML code looks like this

<img src="{image}" />

As this is some kind of drag and drop system, I should be able to drag this item on the wysiwyg canvas, but as that {image} placeholder can't be filled with javascript, the browser won't be able to load any image. As I know in this some old Internet explorer versions give some default "image broken" image into those img's, but modern browsers simply doesn't display it.

So is there any way to make those unloaded images visible(by giving some width and height value and some magic)?

I would like to make this with simple CSS rules without using javascript.

One solution what I have found is to give alt attribute to the images and then that text gives with and height for that element.

Upvotes: 1

Views: 3934

Answers (3)

YD1m
YD1m

Reputation: 5895

Use width, height properties and background. Look at sample

Upvotes: -1

DannyTheDev
DannyTheDev

Reputation: 4173

You should use onerror.. so the image will fail to load, but you can then display a 'holding image' to show the end-user that it will be replaced with their real image when published..

<img src="{image}" onerror="this.src='http://www.mnit.ac.in/new/PortalProfile/images/faculty/noimage.jpg';" width="100" height="100" />

Change the URL to yours.. so something like

<img src="{image}" onerror="this.src='/images/temp_image.jpg';" width="100" height="100 />

Example: http://jsfiddle.net/7FtfX/

Upvotes: 4

Ennui
Ennui

Reputation: 10190

Setting the width and height attributes directly on the img element to some modest placeholder size is probably the way to go. You can also do it CSS, i.e:

.wsyiwyg img {
    width: 100px;
    height: 100px;
    background-color: #787878;
    margin: 5px;
}

Another idea which might be better is to use JS to check on all img elements and parse the src attribute, then replace any with the {image} format with a placeholder image src (but save the original data and switch it back on save/submit).

Upvotes: 0

Related Questions