I am building a simple HTML page with some images, my FireFox has Adblock Plus—recently installed— and it blocks these images. I look at other similar pages on the net and they are not blocking images so why is it blocking mine?
I do not want visitors to my page to not see images if they happen to have Adblock installed in FireFox.
Some advice to allow images to show whilst ab block is on would be great. I don’t want to write exceptions or anything for my own viewing I want to set my page so that Adblock doesn’t block the images.
I'm assuming that you're not talking about Adsense here but images hosted on your server and hard coded into your page.
If so they're probably being blocked because of the file name and/or path.
Adblock will block images
with common ad dimensions in the file name, e.g. 'myimage_720_90.png' or 'myimage_300x250.jpg'.
with common ad keywords in their path (and file name), e.g. banners, adv, ad.
maybe other filters that analyse CSS or HTML
Check your image file names and rename some to see how it goes, try something generic like 'topwide.png or similar to avoid the filters.
I had a very similar issue, I had some banners to display on an eCommerce site, put them im a folder called banners/size. After the page rendered, the banners would disappear in Chrome. I thought something was going crazy in JavaScript somewhere, I tried in Firefox and everything worked. Only difference, no AdBlock enabled in Firefox!
Inspecting the image statements, it had appended this to every image in the banners folder:
style="display: none !important; visibility: hidden !important; opacity: 0 !important; background-position: 1px 1px; width="0" height="0"
I renamed the banners folder to img_bnr, sorted!
I had similar issue with filename like this:
adv_s_imagesName.png <-- Blocked by adblock because of "adv" in filename
for me "adv" mean "advanced" but for adblock it's "advertising"!
File renamed, no more block.
Same here - had an image with 'adtech' in the name (abbreviation for advertising technology). Took me ages to figure out that adblocker was blocking because of the filename. Adtech being AOL's ad-serving platform. Understandable keyword to look out for, frustrating chasing you tail for ages trying to figure out why your content image is being blocked.
Related
Why images not showing when I paste from MS Word.
Ckeditor show that source
<h1><img src="file:///C:\Users\user\AppData\Local\Temp\msohtmlclip1\01\clip_image002.jpg" style="height:88px; width:1005px" /></h1>
This file exist.
Ckeditor version is for AspNet.
Tested on Chrome, IE 10 and IE 11
Your CKEditor is presumably running on a web page, with a http:// address.
Modern browsers don't support embedding images (or anything else) from file:// URLs in http:// pages (or https://, or any other protocol) for security reasons.
This is because there'd be the danger of a malicious site embedding something from your private files (like a document), and then using some security hole to read and upload it elsewhere.
But even if this worked, it wouldn't do you much good: the image isn't uploaded into CKEditor so the image would show up on your computer only. Anyone else watching the page you're editing would see a broken image link.
As far as I know, there's currently no way around uploading the image separately.
Probably a weird question and after your answers I might be ashamed for asking this.
I have a specific font embedded on my website (via #font-face) this font is used for a section that is only visible on wider resolutions (desktops). On Smartphones for example, this section is not visible (display:none).
The #font-face rule is not defined within a media-query but right at the beginning of my stylesheet.
I wonder now if it would be possible to avoid loading this embedded font-file if I'm viewing the site on a mobile device.
You know. The font-file has a view kb and I want my site to be as fast as possible. Since the font wouldn't even be needed on my mobile version I wonder if
1.) the font is even loaded at the moment? I have no idea how to test this on my iPhone. Since the section where it is used is set to display:none I don't get any feedback.
2.) If it is loaded (and I guess so) would it be possible to set this #font-face declaration inside a media-query with max-width : 640px (e.g. iPhone) and the files wouldn't be loaded in this case?
Any ideas on that matter?
thank you in advance.
1) Images with display:none are loaded in some browsers and in some others not. So i guess it's the same for fonts.
2) There is a bug in FF 3.6, but they probably have fixed it nowadays. As far as i know, browsers supporting both media-queries and #ff should render it correctly.
CSS standards dictate that At-rules inside #media are invalid in CSS2.1, but according to this post you can load an external file with #import and a media-target declaration, i guess this way:
#import url("fonts.css") screen and (min-width:800px);
But you know, #import doesn't work that well. So i just wouldn't care about CSS2 and pretend to be writing CSS3 ;-)
This guy says that it's ok to just move #ff inside a media query.
I believe the best solution is to put it inside a min-width media query (don't forget to use the only keyword, which is intended to hide media queries from older browsers).
Using min-width is definitely more suitable than max-width for a progressive enhancement approach, and if your site is designed for mobile devices too it's probably what you want to use.
But as others said, testing is a must-do ... and sharing the results too ;-)
It seems to work. Didn't test it in older Versions of IE (I'm using modernizr, etc. for media-query support in older brosers) but it might work.
I'm defining the #font-face rule directly inside the mediaquery where it is needed. I tested it with all modern browsers. There is no request if the browser window is very small and the media-query isn't triggered. Once I resize the window to a larger with (where I need the font) it is loaded.
Just what I wanted.
I am designing a splash page for a public wifi access point and Firefox refuse to display my custom font, while it work in every other browser (well, not IE < 9 but that was expected).
The page need to work in the following constraint :
No access to the Internet : This page is displayed before the user accept the term and condition, so everything is blocked
The page is stored on the access point : That mean an embedded server probably written in C, and I can't really add additional header or something. Well its open source so it may be possible, but I am most certainly not an embedded developer!
The WiFi is used to advertise the small town in which it is offered, so it should be as pretty as possible.
To meet those constraint I used the #font-face with a data uri, like so :
#font-face {
font-family: Lato-Light;
src: url(data:application/font-woff;base64,<large base64 string>)
format('woff');
}
h1{
font-family: Lato-Light, Helvetica, sans-serif;
}
It work like a charm... Except in Firefox. Now I understand that it won't work in older IE, but I am ready to work with that. But it seem strange to me that a so-called modern browser would not offer that feature. Why isn't this working?
EDIT : Of course, I have a lot of idea for fallback, but my question here is more : Why does firefox have this behavior that is not the same as the other browsers? Is it a security setting? A bug in the data-uri implementation? A size limit for the data-uri?
In the end, the problem was that I used a woff font generator that produced an incorrect font. Safari and IE were able to read it, but Firefox and the latest version of Chrome rejected it since it contained some errors. By using a more recent woff font generator, I was able to make it work across all browser.
The correct woff font generator
http://people.mozilla.org/~jkew/woff/
For more detail, check that bugs report :
https://bugzilla.mozilla.org/show_bug.cgi?id=735556
I'd like to thank Jonathan Kew of Mozilla for providing the answer.
To cut down on HTTP requests, I subset and Base64 embedded a couple webfonts into my CSS (Font Squirrel #font-face generator, advanced settings, and for icon fonts I used icomoon.io).
Thinking I was really clever I served them from a static subdomain...No go in Firefox.
Turns out it was a restrictive cross-domain resource setting that is apparently unique to Firefox. When I uploaded the HTML5 Boilerplate 'standard' .htaccess file, it specifically permits it and it took care of the problem.
Hope it helps future readers, it stumped me for a while...sorry if my terms lack precision, I'm still pretty new at this (it is well explained in the H5BP .htaccess comments and docs).
ive been finally polishing off a website i was building but to my dismay i recently checked the website in Internet Explorer and found the images weren't loading fully.. you can see can the borders for the image but nothing loads in between. i thought it might something i altered on wordpress, but the main page has images from from non wordpress html files and they don't load either.. everything works fine on every other browser except Internet Explorer.. any ideas why? probably a simple fix
here's the website.. . all the code and css is viewable there, if you want my wordpress code let me know
maybe the code just needs to rearranged to make window browsers happy?
any help would be great
Looking at the source for the shop.html, it looks like you are specifying the height of the images, but not the width. Opera, and Firefox are ignoring the width="" and using the default width, but IE is setting it to width="1." I don't know how to change this in Wordpress but if you remove the width="" or add a value it will show correct.
You can see this if you r-click the image line in IE and select properties: it shows as 1X290px.
img src="images/shop/julianduron.jpg" width="" height="290"
hope this helps
I am wondering how to prevent people from Save image as.. by right-click images on my webpages.
I was thinking about disable right-click, but it seems I have to write javascript code. Is there a easy way to do this?
The simple answer is "you cannot do that". You might be able to put something on the server side that will check the referer before serving the image, but even that is not 100% guaranteed. Moreover, even if you did manage somehow to prevent this, nothing would prevent somebody from taking a screenshot of the browser page and then cropping the image out of it.
I think a much better approach would be to have a server-side url rewriting and processing of the images to add some sort of a visible watermark identifying the images as owned by you and saving a proper copyright information in the EXIF information.
You can make a div that is the same size and height as the image and then you can set the image as the background for that div. That will prevent people from directly downloading the image but they can still enter the url and download it from there. I made a tutorial on this myself right here: http://www.andytechguy.com/tutorials/html/how_to_nodownload/
There's an easy solution for this which I used in my website. Just add oncontextmenu="return false;" attribute to the Image tag and you are done with it!
<img src="https://source.unsplash.com/random" alt="Random image" oncontextmenu="return false;">
This is my first question to be answered on stackoverflow, so please fair with me if I didn't use the right tools...
As long as the image URL is in the source code, the image is downloadable using the unix command wget, or anything similar. I'm not a javascript expert however, but I believe you could read the location of the photo from a text file instead of the URL being hard coded in the HTML. Then you could configure that text file to return a 403 (Permission denied) when attempted to view with whatever web server you are using. This still wouldn't stop screenshots though.
Something like this:
<img src="some javascript to read text file">
Then have the text file contain:
/path/to/obscurely/named/photo.png
Ya, this isn't really possible. Another option is to use Lightroom or something else to batch add watermarks. Watermarks are the only option that I'm aware of that will almost completely protect you, because even the screenshot idea is not really possible unless they are a wizard in Photoshop.
In conclusion I think Lightroom or something else is your best and easiest shot of getting what your looking for.
You can do this by converting the image format from jpg to svg...there are alot of converters online i.e https://convertio.co/jpg-svg/
After this you copy and paste the svg code into your html code to replace the jpg.