I am creating a block and using the FCKEditor rich text input box. I switch to Source mode and enter in the following HTML:
<img src="http://test.com/image.png" alt="an image" />
I check to confirm that input format is set to "Full HTML" and press Save. Upon loading my site, I discover that the HTML in FCKEditor's Source view is now:
<p><img alt="\"an image" src="\"http://test.com/image.png\"" /></p>
Obviously that prevents the image from rendering properly since the browser sees the path to the image as:
"http://test.com/image.png"
Does someone know how to help?
Quick workaround could be to not use the quotes since it seems to be adding them in anyway.
Example:
<img src=http://site.com/image alt=alt text>
Have you changed or selected a suitable text format?
If you go to admin/config/content/formats, you can update or even create a new text format.
Select the one you're currently using that is resulting in this problem, and check if one of the filters is creating this problem. There are some that can influence or generate the problem you're experiencing.
"Correct faulty and chopped off HTML" filter
"Convert URLs into link" filter
"Limit allowed HTML tags" filter
Also, check in the FCKEditor's config page if any auto-correction filter is activated.
In any case, if the problem is inserting images, I think you should be better off with a dedicated module, like IMCE (http://drupal.org/project/imce).
Hope it helps.
I have a file having some URLs per line. I need to extract the "keywords" present in the tags i.e. if there is meta tag for "keywords" then i want to get "content" value for it.
Example: if the web-page has this meta-tag:
<meta name="keywords" content="wikipedia,encyclopedia">
then for that URL i want "wikipedia,encyclopedia" to be extracted.
One approach is to download the web-page using "wget" and then parse it using some standard HTML parser.
I was wondering is there any better way to do this without downloading the entire web-page.
No -- you have to download the whole page .. or interrupt downloading after receiving some amount of data (which is even worse and much more complicated to do as AFAIK it cannot be done with wget and you will have to code your own wget).
If you're comfortable with some PHP, you should be able to put something together pretty easily by wrapping a loop around QueryPath.
Swiping an example from the docs, this:
require 'QueryPath/QueryPath.php';
$url = 'http://example.com';
print qp($url, 'title')->text();
...will go out and get the document at example.com, extract the text of the title tag and output it.
It'd only take a little more work to make that look for meta keywords tags and extract the content attribute, especially if you're already familiar with jQuery. (It's a bit of a simplification, but a large chunk of QueryPath is more or less implementing a "server-side jQuery.")
If you pursue this programmatic method and have further questions, they should probably go on the main Stack Overflow site where there's also an active querypath tag.
Here you have another solution:
http://simplehtmldom.sourceforge.net
I didn't try it yet!
i have 2 errors coming up on firefox. Theses errors are shown below.
1-there is no attribute "property". This refers to the line below:
<meta property="og:title" content="blahblahblah"/>
This is to do with linking it to social networks i.e facebook etc
2-there is no attribute onerror. This refers to the line below:
<img src="281.jpg" width="125" height="125" onerror="onImgErrorSmall(this)"/>
This basically displays a default image if the actual image dose not show up.
the question really is, i know these are not valid attributes but how can i get around them, if anyone has any ideas id be grateful.
For the meta tag there is no property attribute
For the img tag there is no attribute called onerror
No way to get around them as they are not part of the html markup
Live with them or remove - they will never validate against a web standard
You pasted stuff into a wysiwyg editor directly from Microsoft Office or OpenOffice document.
These properties are proprietary.
You should clean up or remove the markup before pasting. (Most of wysiwyg editors in use today have this function (a.k.a. paste from Word))
This link may be able to help you out.
onerror is only supported by the "browser" that Microsoft makes.
I have an image that I will dynamically populate with a src later with javascript but for ease I want the image tag to exist at pageload but just not display anything. I know <img src='' /> is invalid so what's the best way to do this?
Another option is to embed a blank image. Any image that suits your purpose will do, but the following example encodes a GIF that is only 26 bytes - from http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever
<img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" width="0" height="0" alt="" />
Edit based on comment below:
Of course, you must consider your browser support requirements. No support for IE7 or less is notable. http://caniuse.com/datauri
While there is no valid way to omit an image's source, there are sources which won't cause server hits. I recently had a similar issue with iframes and determined //:0 to be the best option. No, really!
Starting with // (omitting the protocol) causes the protocol of the current page to be used, preventing "insecure content" warnings in HTTPS pages. Skipping the host name isn't necessary, but makes it shorter. Finally, a port of :0 ensures that a server request can't be made (it isn't a valid port, according to the spec).
This is the only URL which I found caused no server hits or error messages in any browser. The usual choice — javascript:void(0) — will cause an "insecure content" warning in IE7 if used on a page served via HTTPS. Any other port caused an attempted server connection, even for invalid addresses. (Some browsers would simply make the invalid request and wait for them to time out.)
This was tested in Chrome, Safari 5, FF 3.6, and IE 6/7/8, but I would expect it to work in any browser, as it should be the network layer which kills any attempted request.
These days IMHO the best short, sane & valid way for an empty img src is like this:
<img src="data:," alt>
or
<img src="data:," alt="Alternative Text">
The second example displays "Alternative Text" (plus broken-image-icon in Chrome and IE).
"data:," is a valid URI. An empty media-type defaults to text/plain. So it represents an empty text file and is equivalent to "data:text/plain,"
OT: All browsers understand plain alt. You can omit ="" , it's implicit per HTML spec.
I recommend dynamically adding the elements, and if using jQuery or other JavaScript library, it is quite simple:
http://api.jquery.com/appendTo/
http://api.jquery.com/prependTo/
http://api.jquery.com/html/
also look at prepend and append. Otherwise if you have an image tag like that, and you want to make it validate, then you might consider using a dummy image, such as a 1px transparent gif or png.
Use a truly blank, valid and highly compatible SVG, based on this article:
src="data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%3E%3C/svg%3E"
It will default in size to 300x150px as any SVG does, but you can work with that in your img element default styles, as you would possibly need in any case in the practical implementation.
I haven't done this in a while, but I had to go through this same thing once.
<img src="about:blank" alt="" />
Is my favorite - the //:0 one implies that you'll try to make an HTTP/HTTPS connection to the origin server on port zero (the tcpmux port?) - which is probably harmless, but I'd rather not do anyways. Heck, the browser may see the port zero and not even send a request. But I'd still rather it not be specified that way when that's probably not what you mean.
Anyways, the rendering of about:blank is actually very fast in all browsers that I tested. I just threw it into the W3C validator and it didn't complain, so it might even be valid.
Edit: Don't do that; it doesn't work on all browsers (it will show a 'broken image' icon as pointed out in the comments for this answer). Use the <img src='data:... solution below. Or if you don't care about validity, but still want to avoid superfluous requests to your server, you can do <img alt="" /> with no src attribute. But that is INVALID HTML so pick that carefully.
Test Page showing a whole bunch of different methods: http://desk.nu/blank_image.php - served with all kinds of different doctypes and content-types. - as mentioned in the comments below, use Mark Ormston's new test page at: http://memso.com/Test/BlankImage.html
As written in comments, this method is wrong.
I didn't find this answer before, but acording to W3 Specs valid empty src tag would be an anchor link #.
Example: src="#", src="#empty"
Page validates successfully and no extra request are made.
I found that simply setting the src to an empty string and adding a rule to your CSS to hide the broken image icon works just fine.
[src=''] {
visibility: hidden;
}
if you keep src attribute empty browser will sent request to current page url
always add 1*1 transparent img in src attribute if dont want any url
src="data:image/gif;base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA="
I've found that using:
<img src="file://null">
will not make a request and validates correctly.
The browsers will simply block the access to the local file system.
But there might be an error displayed in console log in Chrome for example:
Not allowed to load local resource: file://null/
Building off of Ben Blank's answer, the only way that I got this to validate in the w3 validator was like so:
<img src="/./.:0" alt="">`
I personally use an about:blank src and deal with the broken image icon by setting the opacity of the img element to 0.
<img src="invis.gif" />
Where invis.gif is a single pixel transparent gif. This won't break in future browser versions and has been working in legacy browsers since the '90s.
png should work too but in my tests, the gif was 43 bytes and the png was 167 bytes so the gif won.
p.s. don't forget an alt tag, validators like them too.
I know this is perhaps not the solution you are looking for, but it may help to show the user the size of the image before hand. Again, I don't fully understand the end goal but this site might help: https://via.placeholder.com
It's stupid easy to use and allows to show the empty image with the needed size.
Again, I understand you did not want to show anything, but this might be an elegant solution as well.
<img src="https://via.placeholder.com/300" style='width: 100%;' />
Simply, Like this:
<img id="give_me_src"/>
In the past I was using iframe but it displayed all the webpage urls contents in full.
For example: I have saved the following code in a file named "trial.html" :
<iframe src="http://stackoverflow.com/unanswered" width=1100 height=1500></iframe>
<iframe src="http://stackoverflow.com/questions" width=1100 height=1500></iframe>
When I load my file "trial.html" in firefox it shows the two urls properly. ;)
But, for instance, I would like that my webpage show me only the top right "vote" part (gray color) for the first url. I notice that it has the following code :
<div class="module">
<div class="summarycount" style="text-align: left;">11,308</div>
<p>questions with <b style="color: maroon;">no upvoted answers</b></p>
<p>The highest voted unanswered questions appear first, then the most recent ones. </p>
</div>
Is it possible to display only the part <div class="summarycount" or the <div class="module"> part?
Thanks in advance ;)
Frames are just another viewport, same as your basic browser window, and all a viewport does is provide a place to display documents. Whole documents.
If you want to parse a document, or indeed many documents, to pick and choose sections of them and merge into another document, you'll have to engage a server-side language to load those documents up and do the surgery for you. As always, I recommend XSLT for this where the documents are well formed, but every language is capable of doing this.
If you really really wanted a guerilla option, IF you have control over the documents AND you don't have x-domain worries, you could do some JS DOM manipulation to read from iframe loaded documents and copy the important nodes into the parent document, deleting the iframe as you go, but it's nothing like as clean or reliable.
I think this can also do the trick (but it won't do it imho for robot-no-follow html file websites):
Build a Web Page Monitor with Google Docs and Track Changes Automatically
http://www.labnol.org/internet/monitor-web-pages-changes-with-google-docs/4536/