How to set img size if image not loaded - html

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.


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/


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).


Use width, height properties and background. Look at sample

Related

width:auto overwrite inline width of image

A client asked me to look into a problem he is having on his WP site.
When adding an external image into a post, with an original size of 800x640.
You can resize the image via the Wordpress wysiwyg editor to, say 400x320.
the html part will look something like this when inspecing the element with firebug on front end or in the text tab of the editor:
<img class="" src="http://xxx.nl/images/externalimage.jpg" alt="" width="400" height="320" />
But on the front end the image is shown at its original 800x640 size.
When inspecting the element with firebug it shows:
img {
height: auto;
max-width: 100%;
vertical-align: top;
width: auto;
}
If I disable the 'width' line in firebug
The image resizes to 400x320.
How can I resolve this issue, so that the client can just do his thing with the images in the editor.
I can solve it myself on a individual case basis by adding a width to the containing span/p tag, but the client doesn't know css or html and I can't manually edit all the widths of the containing tags every time he posts something new.
The images will always be inside the 'post' wrap container, which has its own class. But apart from auto, I only set it to 'inherit' but this yields the same result as auto. (I guess it will inherit -> auto from the img {})
I don't know what I'm doing wrong here, seems quite an easy question.

how come image wont load on website as href?

im really new to this but heres my problem. I need to upload a pic onto my website (im using aptana studios 3). So i save my image as jpeg and use the code:
now it acknowledges that I am uploading the picture but it won't load. Do i have to convert the image or save it a certain way?

Oh buddy, make sure to post the code you're having issues with. In any case, it doesn't really matter what file extension you use (though .png may be the best for web). I'm assuming this is hard-coded HTML, if that is the case, I would use a simple <img /> element to display a picture. Make sure the image is saved in a nearby directory.
<div>
<div class="item"><img src="./example.png"/></div>
</div>
In the example above, example.png is located in the same folder as my index.html file. We use the attribute src, not href. An href attribute dictates what page is to be loaded when an element, e.g. an <a> element, is clicked on. If you have a CSS stylesheet, it might be preferable to load the image as a background-image to a <div> element, so that it would be easier to manipulate image properties like height and width. An example of that would be:
<div>
<div class="item"/></div>
</div>
..and the CSS:
.item {
background-image: url("boxes.png");
width: 800px;
height: 600px;
background-size: contain;
}
Here, I set the image's height and width, and tell my styles that I want the whole image to be show with background-size: contain;.
I hope this helps.

Change 'src' value by css for input tag with type="image"

Is it possible to change the value of src attribute of <input type='image' alt="Text will be shown if pics are disabled" src='somepic.png'../> by css?
The problem is:
I want to specify which pic will be shown as submit button just using css (so the design team will change only css files!).
If I use the alternative way like <input type="submit" class="cssclass" value=" " alt="Text will be shown if pics are disabled"/> and specify the background of this element in css - it doesn't work well if pics are disabled. - No any alternative text is shown instead of pic. However the first way solves this situation...
Please advice something
Thanks.

Here it is: http://jsfiddle.net/kizu/66JXn/
Some notes about this solution:
Use <button></button>, 'cause it can include other blocks.
You'll need a bit of extra code to make all these work in Fx and IE:
For Fx you need an extra wrapper inside (there are positioning bug) and some extra -moz- properties reset.
For IE you must shrink the original button, 'cause there are some extra padding that is hard to remove.
You place the text and another element inside, that would overlay the text. So when the images would absent, the text would be accessible.
That's it :)

No, and this is bad practice. CSS is for static content only.
What you should do, is define a template file with variables in it such as:
template.js
my_backgroundImage = "url('somepic.png')";
then your file would load
x = document.createElement('image');
x.src = my_backgroundImage

Attribute selectors might work, but they aren't very flexible. Try this one:
img[src=""] {
background-image: url('none.png');
height: 100px; /* Height of BG image */
width: 100px; /* Width of BG image */
}
It doesn't change the image's src= attribute, but it performs the same function.
Here's my idea.
You can use JavaScript to read the stylesheets of <img> tags, and modify them accordingly.
I'm talking about a class whitelist, like big, small, center and all other classes applied to the images are interpreted via JavaScript. The design team could use CSS, but it would not render in the expected manor, like this (Python + JavaScript):
for every <img> tag:
if tag.classes contains class not in whitelist:
for every class not in whitelist:
this.src = newClass.backgroundImage;
this.removeClass(newClass)
It reads the CSS for the background-image property, but it just steals the URL of the image and sets the src= attribute using that URL. Then, the JavaScript would delete that class, causing it not to render.

(This is a problem for which JS is the solution, but ignoring that:)
One option is to wrap the button and an extra div (lets call it div.overlay) in a parent container.
Set the container to to position:relative.
Set the button to only display text, as usual. Set the div.overlay to position:absolute, width and height to 100%, and left and top to 0, and a z-index higher than the button. Set the image you want to display as the background-image of div.overlay.
With images enabled, the user sees the image, and the image can be changed using only CSS.
With images, or CSS disabled, the user only sees the plaintext submit button.
You might have to do some trickery to get clicking div.overlay to submit the form, perhaps just make div.overlay a duplicate submit button. Also, who knows what Googlebot makes of overlay techniques like these.

It's ugly, but the only pure CSS solution that immediately jumps to mind is a kind of image replacement with relatively poor support. That's using :after. It's kind of a poor practice due to the misuse of :after, and the support is pretty iffy, and I think it'd be iffier for an input element, based on the last time I tried to use :after on an input...
.cssclass,
.cssclass:after{
display:block;
width:100px;
height:100px;
}
.cssclass{ position:relative; }
.cssclass:after{
position:absolute;
top:0;left:0;
content:url("button.jpg");
}
See http://www.rachaelmoore.name/best-practices/css-image-replacement-ii/ for more.
Or setting the default src to a shim and always using CSS to set the desired button as a background image. Which I just noticed you've already thought of. I imagine that should work just fine.

Ok... So I hate it when I ask a specific question and, instead of answering it, they give me some crappy work-around instead of answering the original question that I asked... But for some reason, I've decided that I'm going to do it to you.
If I understand the problem correctly, you just want to have a form button with a background image and if the background image doesn't load, you want some sort of alt text displayed to the user with the caption of the button? If that's not right, stop reading and "down arrow" me.
In apps that I've made, I've always just styled the input with a background image, but left it up to the HTML control to insert text... It's good for three reasons... buttons can be styled, developers can change the value of the text on the button without having to bother me to make a new image, and if the background image doesn't load, the button is still readable.
So my html was like this:
<input type="submit" id="btnSearch" class="searchButton" value="Search">
then my class may read something like:
.searchButton {
backgorund-image: url('searchButtonImage.png');
font-family: sans serif;
font-size: 10px;
color: #808080;
padding-left: 50px 0px 0px 0px; // Assuming a magnifying glass icon or whatevs is on the left and is 20-ish pixels
width: 100px; // you can put this as in-line style if you make a more generic class
}
If you want to make the BG more generic, move the width of the button to make it in-line on the button, so the devs can change the width with the text value and make your generic bg image like 200px wide.
Depending on the browser, the text might not be as nice and ani-aliased as in others, but IMO, it's a small price to pay.
(Disclaimer: Please forgive me if you copy and paste this and it doen't work. I just hand-wrote it without testing it.)

Can you do it with javascript?
I have an image on my page that, when clicked, will show another button, and also change the src attribute of the first.
Here is what I use:
<script type="text/javascript">
function apps()
{
var element = document.getElementById("app_frame");
if (element.width != "0%")
{
parent.document.getElementById("frame").setAttribute("width","100%");
parent.document.getElementById("app_frame").setAttribute("width","0%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/show.gif");
parent.document.getElementById("wthrbutton").style.visibility="hidden";
}
else
{
parent.document.getElementById("frame").setAttribute("width","65%");
parent.document.getElementById("app_frame").setAttribute("width","35%");
parent.document.getElementById("appbutton").setAttribute("src","site/main/images/apps/hide.gif");
parent.document.getElementById("wthrbutton").style.visibility="visible";
}
}
</script>
What that says, is: set the "app_frame" as variable "element",
then check variable "element" for its width.
if its width is not 0, then it gets the element "frame",
by using getElementById, and then sets the attribute "width" to 100%
you can see slightly lower down that you use the same method, but use the SRC attribute rather than width, and set it to whatever you want, in my case, site/main/images/apps/show.gif
hope that helps

Images in web apps

I'm working on a web application and I'm using the img tag (<img...>).
When the src property is empty, it shows the red x figure indicating that there is no image.
Is there any way to hide that red X icon?

An <img /> tag without an src attribute is invalid HTML. If you do not want to display an image, do not output the <img />tag at all.
If you must output the image tag, thus breaking your html (I wouldn't encourage this), you can hide the [X] in most browsers with one of the following css styles:
<img style="visibility: hidden"/> which hides the image, but still has it taking up space in the page
<img style="display: none"/> which removes the image from the page, making it take up no layout space
The other alternative is to actually link to an image that won't be seen. The classic example of this is to use a 1 pixel transparent gif image. The image won't be visible, although it will effect the page layout.

There's no need adding img tags if you set src to empty string.

If you don't want to print the image, but show it on the screen you can use CSS media types:
<style>
#media print
{
img.noprint {visibility: hidden}
}
</style>
and then add a class to all the images you do not want printed
<img class="noprint" .../>

Is it possible to render image with html?

I have control in a page that gets html from text file and renders that html in webpage.
Right now it has to add image somewhere and reference that image src.
I was wondering if we can render image along with other html code, is it possible?

Yes, it is. You need a Data URI scheme:
<img src="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />
The same can be done in CSS:
ul.checklist > li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC') top left no-repeat; }

You can use inline SVG. See this article for mozilla and this one for IE.

You can also create images using CSS and different size characters and playing with z-indexes. Here's CSS Homer.

I've seen it done by creating a table with one cell for each pixel, setting the cell's background color to the pixel's color.