Images not changing on some computers - html

I'm having a little challenge here. After changing banner images on some part of my homepage, it the new images don't show even after clearing cache and re-indexing. Can someone please advise me.

You could try adding a version number to the image path in your code, as detailed in this answer: Is there a way to force browsers to refresh/download images?
You just need to add ?1 at the end of the url like so:
<img src="image.png?1"/>

This normally happens because you need to clear your browser cache on whatever machine you're viewing the site with - a fast and easy way to find out if this is the case would be to throw your browser into private/incognito mode and refresh the page.

Related

Do I need to update CSS to upload new images?

I want to start by saying that I did not build said website. I was given FTP access to the site and can download it's entirety.
What we are interested in is replacing the images as they are rather outdated.
If I replace the images (naming them as the ones that exist as of right now), they update just fine.
But adding more does not. Lets say that files are numbered 1-6. If I replace those with the same name, they change. If I add 7.jpg, for example, it does not show in the gallery.
Do I need to update the CSS code or upload it again?
I can provide the code in turn.
Without further details it's hard to tell what the problem is, but it looks like either someone hard-coded CSS or hardcoded HTML. But I would really need to see the code.
Please try to copy/paste at least the code for file that should render the images.
Your gallery should contain new images' name.
if you upload 7.jpg, this one is not in your gallery I guess.
I think it will not matter if you update the CSS.
A priori, to clear any doubt if the images are in cache, I suggest you refresh the page by typing ctrl + R or open a tab in incognito mode.

Web preview when posting on Facebook/Linkldin

I got a little issue,
when I share my portfolio in Facebook or Linkdin I get a preview of the web as an image but with a wrong image(one of the images included in the code itself).
how can I fix that so that the preview image will be the the web image?
thanks
If you've already generated the image, I think you need to use this: developers.facebook.com/tools/debug to rescrap it and try and get FB to pull in the correct image.
There's a section, in the screenshot, that allows you to bulk clear FB caches if it's more than one URL you're having issues with, if it's just the one, the first tab should be what you need.

disable downloading of image from a html page

Suppose there is a html page containing some images.
we want to disable the downloading of the images from user side.
Is that possible?
Should I need to use any javascript or add some attributes in <img> tag?
My current code is
<td><img src="images/handmade (1).jpg" class="img-responsive" alt="" /></td>
</tr>
</table>
Is there any technique to prevent image from downloading?
No, it cannot be done. Explanation here: https://graphicdesign.stackexchange.com/a/39464/24086
For all intents and purposes, this is downright impossible.
You can disable right click, but people can still view the source code of your page (by adding view-source: to the URL in Chrome, or just using a browser menu) and find the URL.
You can use a CSS background-image instead of HTML , but people can still use their browser's inspector (F12 for most browsers) and find that element's CSS properties.
You can engineer some crazy thing that you think will work, but at the end of the day, the user has to download the image in some way to see it. If the user is completely unable to download the image, he/she won't even be able to see it in the first place! No matter what you do, nothing will prevent a simple glance at a network traffic monitor or the "Network" tab of your favorite browser's developer tools.
Depends what you mean by downloading, really.
The user has to be able to download the image (i.e. retrieve the image onto their computer) in order to display the image in their browser. I suspect what you mean is that you want to stop them saving that specific image onto their computer. Any attempt to try and stop them doing this is pretty pointless, as they can always take a screenshot, or just access the image directly using the URL.
I've seen various attempts using javascript to try and stop users from saving images, but they are all easily worked around.
Cut up the image server-side and store them that way, then assemble them as one image in javascript client-side. The user could download each segment via URL and assemble them manually, but that is much more work than most users are willing to do.

Unable to Change Facebook Icon for My Website on Status Updates

I am having trouble getting the proper image to show up when I a link to my website in a status update. It is either grabbing an image from the front page which I don't want it to use (links to the front page) or no image at all (links to specific pages).
I found several tutorials that all gave the same advice about using a meta tag to specify which image to use, which I have done. Example Tutorial. Example:
<link rel="image_src" href="http://URL-TO-IMAGE" />
This had no effect. The article mentions that Facebook caches these lookups and provided a link to a URL Debugger, which was supposed to scrub that cache for me. I used it to verify that my meta tag was inserted properly (it was), but it had no effect on new status updates. Am I missing something? The way the tutorials talk gives me the indication that using this debugger will clear the Facebook cache for the page so that the next lookup will load and re-cache the proper image. Instead it seems that all this does is bypass the cache this one time for the purposes of testing.
Is there a way to actually force clear this cache, or do I just need to wait? It's been several days. How long does this cache take to expire?
Steps to Reproduce:
Visit Facebook News Feed or Timeline
Enter URL of my website in status update (can provide if neeeded)
Expected Outcome
The Favicon of my website is loaded as the icon for the status update
Actual Outcome
An image of a person (appears in the sidebar of our site) is used as the icon (for links to the front page. Links to the inner pages of the website load no icon at all.)
Further:
Visit the URL Debugger
Enter URL for website
Verify proper icon is loading
Post link in new status update.
Expected Outcome
FB's cache will be updated and the Favicon will now be used.
Actual Outcome
Nope... still the person from the sidebar on front page links and no icon at all for inner page links.
UPDATE 2/22/2013:
The image that loads when I post my URL to Facebook has changed! But it's still wrong :(.
I went to test it this morning and I now have an additional image as an option, which means Facebook did update what it's loading from the site, but it's still not the image that I specified in my tag. It's just grabbing another image from one of my other side bars, and I'm still not getting an image at all for my inner page.
It's weird.... the URL Debugger tool grabs the correct image, so I don't think the problem is my Meta tags. That's what the URL Debugger is supposed to help me identify. I think there's some disconnect between the lookup and what Facebook actually posts. I think this is a problem with Facebook, unless I'm missing something huge, but I don't see it....
UPDATE 2/25/2013:
I've made progress, but there's still something weird going on. Martey set me straight on the using the og: meta tags rather than just the tag. The tutorial I had been following said to ignore the Open Graph warnings, but once I started paying attention to them, I got some good information. Like, it actually said that my image is too small and that it will use another image instead. Guess I should have paid attention :)
Anyway, so the issue was that the favicon is too small. According to the Open Graph warning, it needs to be 200 pixels in both directions. So I grabbed the actual header logo and tried to use that. It's 340 pixels wide. Oops, it was only 164 pixels tall.
So I used The GIMP to set it onto a transparent background that was 200 pixels tall and tried again, but it's still telling me it's too small. It's no longer telling me that it needs to be 200 pixels. It just says that it's too small.
I'm stumped again...
Update 2/25/2013: Issue Resolved
The problem was transparency. I filled the background in white and tried again and now it's loading fine.
Thanks for your help, Martey!
Instead of using a third party tutorial, you should refer to Facebook's official OpenGraph documentation. They recommend using an og:image metatag to refer to document images.
As I noted in my comment, issues with data not updating on Facebook is likely to be the result of misformatted or wrong OpenGraph metatags. Without the URL of the troublesome page, or information on the URL Debugger's warnings, it is difficult to recommend solutions.

Is it possible to prevent saving images from my site?

I have restricted the right click option in my web page, but in IE it shows icons to Save Image, Print, Mail etc . I want to remove all of these. Is this possible?
It seems like everyone else who answered here didn’t read the question.
I have restricted right clicking option in my web page , But IN IE it shows Icons to Save Image, print , mail etc . I want to remove all of these . IS it possible ??
Yes, it is possible to remove these icons. Just put the following in the <head> of your document.
<meta http-equiv="imagetoolbar" content="no" />
As mentioned in the other answers, users will still be able to get the images if they really want to, no matter how hard you try to prevent it. If you don’t want the images to be copied, you shouldn’t use them on a website.
It sounds like you're talking about the Image Toolbar in Internet Explorer. You can disable it with this code:
<html>
<head>
<meta http-equiv="imagetoolbar" content="no" />
</head>
</html>
Or, directly applied to an image:
<img src="test.gif" galleryimg="no" />
No it's not possible. The user can see the image in the browser and thus the browser (and the user) has a copy. You can try and restrict that with nasty (and ill-advised) right-click JS hacks and the like but ultimately if you send something to someone to see or read, what they do with it is beyond your control when you don't control the device they're using.
You can only do so much to prevent some users. To be near 100% foolproof, it's probably impossible. Even if you packaged the images in say, flash, java applet, it doesn't stop users from doing screencapture too.
There are few passive alternatives, e.g. using watermarks, putting up discalimers/warnings.
Here are some related SO posts:
How to disable right-click save on one specific image only
Disable “Save Target As” option in the right click menu
Prevent Save As Functionality
Prevent users from downloading images it's a waste of time because even if they cannot download the image, they always could do an screenshot :-(
if you are using Apache server, you can disable accessing the image through absolute url
the images can be access only with relative url with this htaccess code :
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourdomain.com [NC]
RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]
in addition, disable the right click context using JavaScript, and add a watermark to protect the copy rights
this will reduce the chance of saving the images
You cannot prevent the downloading of your images. Just by viewing them, the browser caches them.
If the browser can get it, then the user can somehow get it.
You could investigate using an HTML5 canvas or even (gasp) pixelized tables to render client-side.
.show_IMAGE
{
background-position : 0 -100px;
background-image : url('/images/flower.png');
background-repeat : no-repeat;width:50px;height:50px;
}
and add this class to DIV
< div class="show_IMAGE"></ div>
you cannot copy the image alone. if you get image from CSS.
You may try following steps:
Disable right click function on your website.
Disable image dragging on the image you want draggable="false"
Now your website is image theft protected!