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.
I have a page set out similar to this:
My question is about mobile support and how should I go about doing the following:
When the user resizes the window to about the size of a smartphone screen, I want to remove the main content, which is everything below the header area/login, and keep only the header, the login form and the footer. So I have been using css media queries to do this. My problem is that my login form markup resides within the header area.
<div id = "header">
<div id= "logo"><img src =""/> </div>
+-------form markup here------+
|<div id= "login-form">..... </div>|
+ ----------------------------+
</div>
<div id= "main-content">
This is where I want to put the login form
</div>
So my question is, How should I do this?
should I just create another css file and link/apply that when the screen width-height is detected to be smartphone size ?
Should I create the markup block inside main-content, and set its css style display to none UNTIL the screen is resized to smartphone size, where a media query is set to change display attribute ?
What is the best way to accomplish this? I greatly appreciate any help and at least, some little explanation to justify that answer. Also links and other references are very welcome !
Cheers..
Use Media Queries to hide and show content based on device or device width/height.
Here's a good Media Queries Cheat-sheet:
http://stephen.io/mediaqueries/
I wouldn't position the form as 'absolute' and put it outside the header as another poster suggested. This is super sloppy and bad practice. What's the 'absolute' form going to be positioned too? The body? Aghh. You'd need a wrapper - and that's just more code. You can do it all via CSS. Just use Media Queries to change the CSS styles for the header, show/hide elements, and reposition.
OR
JQUERY (Not the best route, but for what you want you're a limited without a redesign). I kept it simple for easy explanation. Note, I haven't tested this:
$(window).resize(function(){
var maxwidth = $(window).width(); // get device window width
var form = $('#login-form'); // form
if(maxwidth <= 320) { // 320 px or whatever you want
form.clone().appendTo('#main-content'); // clone form and append to main content
form.eq(0).hide(); // hide first form, the one in the header
}
else {
form.eq(0).show(); // show initial form
form.eq(1).remove(); // remove cloned form, if set
}
});
I can see two ways you could go about accomplishing your goal:
Take your login-form out of the header div, put it in the main-content div and absolutely position it to make it appear inside the header when on a desktop screen, then use a media query to move it to below the header for viewing on mobile devices.
Use your idea of having two login-forms: one in the header, and one in the main-content area. Use media queries to change the display attribute so that the correct login-form is showing at the right time depending on the screen size. I'm not sure if duplicating the login-form is good practice, so I would try option 1 to start.
Let me know if this works out!
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
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
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" .../>