Context Menu: Facebook Home (News Feed) Images Are Not Recognized
You only see context menu items if they apply to the situation. If you right-click on an image, you will see items such as: View Image, Copy Image, Copy Image Location, Save Image As, etc. There is no exception for images which are a hyper-link. But in Facebook Home (News Feed), images of posts do not apply to the situation. Whereas images of Users' Profile Pictures (little images shown next to user's name in posts and in comments) DO apply. So if you right-click on an image of a post, you won't see items such as "Copy Image Location". You will have to click on that image, and in the next page (the full-page preview of the post) right-click on the image in order to copy its location or save it to local drive. Am I doing anything the wrong way, or is this a shortcoming of Firefox in features and options?
All Replies (11)
Does "Save Link as" in the right-click context menu work?
The images (which I described earlier) are treated as links. Meaning the items of the right-click context menu for those images are the same as the items for links. Items such as: Save Link As, Copy Link Location, ... . But the link refers to a .php file and obviously doesn't do anything for me. If you are a Facebook user, you can see the problem for your own. I've attached an image, too. Thanks a lot for your reply, cor-el.
No comments, huh?
Sorry, I had missed your reply.
You can right click an element on a web page and open the built-in Inspector to see which element gets selected.
If you get the normal context menu there some other element gets selected.
Current Firefox versions have a lot of built-in web developer tools including an Inspector and Style editor.
I think Facebook places a transparent layer in front of the image to intercept the mouse click. They want you to view the image in an overlay before interacting with it (tagging, sharing, saving, etc.). Some browsers may pierce through a transparent layer to what is behind it, but Firefox does not do that.
Edit: On second thought, there might be a script that is deflecting the click.
jscher2000 - Support Volunteer மூலமாக
You can always go to "Tools > Page Info > Media" if you want to save an image.
You can also right-click on the page and choose View Page Info.
- Press the F10 key or tap the Alt key to bring up the hidden "Menu Bar" temporarily.
Dear cor-el and jscher2000, thank you both for your replies. Well, we're talking about Facebook's News Feed, so looking for an image inside "Page Info > Media" is a time-consuming task. I right-clicked the image and chose "Inspect Element", then chose "Node Operations" and clicked "Copy Inner HTML". This way I could get access to the Image Location. But this workaround is time-consuming, too. I need a quick way to copy image location to use that location for Google Image Search. I do that a lot (to find a larger version of the image, or to find the original source of an image) and I need it to be done as quick as possible. I have installed the "Search By Image (by Google)" addon (developed by Google), but it only works when the "Copy Image Location" item is available in context menu.
If Facebook (or other website) overlay an image with other elements then you only option is to use Page Info > Media.
Maybe it is possible to hide that overlaying element with code in userContent.css or Stylish.
You would need to find the selector for this transparent image or container.
You could use a bookmarklet to create a duplicate of the image to the right of it. An example of a popular bookmarklet is the Pinterest "Pin It" button you can drag to your Bookmarks Toolbar. Since this forum doesn't let us post draggable buttons that way, you have to create the bookmarklet in 4 steps.
(1) Select and copy the following script (Ctrl+c or right-click > Copy)
javascript:var thumbs = document.querySelectorAll(".uiPhotoThumb .photoWrap img"); for (var i=0; i<thumbs.length; i++){ if (thumbs[i].getAttribute("cloned") != "cloned") {var imgdupe = thumbs[i].cloneNode(true); var par = thumbs[i].parentNode; while (par.parentNode.className != ""){if (par.className.indexOf("uiStreamAttachments") > -1) break; par=par.parentNode;} imgdupe.style.position = "absolute"; imgdupe.style.top = (par.offsetTop - 2) + "px"; imgdupe.style.left = (par.offsetLeft + par.offsetWidth - 10) + "px"; imgdupe.style.border = "2px solid #f00"; par.insertBefore(imgdupe, par.firstChild); thumbs[i].setAttribute("cloned", "cloned");}} void 0;
(2) Right-click the Bookmarks Toolbar and choose New Bookmark
(3) Paste the script into the Location field
(4) Enter a short name for the button into the name field (e.g., FBThumbs)
When you're on your news feed, clicking that button once will (after a brief delay) insert copies of the thumbnail images to the right of their regular positions so you can right-click them.
Two limitations:
(i) As you scroll down and add more items, the script does not re-run automatically.
(ii) I noticed this didn't work on certain images that have a little frame around them, but I didn't go back and review the problem.
A way to avoid those extra steps is to encode the bookmarklet as a clickable <a href="">XXXX</a> link that you can paste in the location bar and right-click and "Bookmark This Link" in the tab.
data:text/html;base64,PGEgaHJlZj0namF2YXNjcmlwdDp2YXIgdGh1bWJzID0gZG9jdW1lbnQucXVlcnlTZWxlY3RvckFsbCgiLnVpUGhvdG9UaHVtYiAucGhvdG9XcmFwIGltZyIpOyBmb3IgKHZhciBpPTA7IGk8dGh1bWJzLmxlbmd0aDsgaSsrKXsgaWYgKHRodW1ic1tpXS5nZXRBdHRyaWJ1dGUoImNsb25lZCIpICE9ICJjbG9uZWQiKSB7dmFyIGltZ2R1cGUgPSB0aHVtYnNbaV0uY2xvbmVOb2RlKHRydWUpOyB2YXIgcGFyID0gdGh1bWJzW2ldLnBhcmVudE5vZGU7IHdoaWxlIChwYXIucGFyZW50Tm9kZS5jbGFzc05hbWUgIT0gIiIpe2lmIChwYXIuY2xhc3NOYW1lLmluZGV4T2YoInVpU3RyZWFtQXR0YWNobWVudHMiKSA+IC0xKSBicmVhazsgcGFyPXBhci5wYXJlbnROb2RlO30gaW1nZHVwZS5zdHlsZS5wb3NpdGlvbiA9ICJhYnNvbHV0ZSI7IGltZ2R1cGUuc3R5bGUudG9wID0gKHBhci5vZmZzZXRUb3AgLSAyKSArICJweCI7IGltZ2R1cGUuc3R5bGUubGVmdCA9IChwYXIub2Zmc2V0TGVmdCArIHBhci5vZmZzZXRXaWR0aCAtIDEwKSArICJweCI7IGltZ2R1cGUuc3R5bGUuYm9yZGVyID0gIjJweCBzb2xpZCAjZjAwIjsgcGFyLmluc2VydEJlZm9yZShpbWdkdXBlLCBwYXIuZmlyc3RDaGlsZCk7IHRodW1ic1tpXS5zZXRBdHRyaWJ1dGUoImNsb25lZCIsICJjbG9uZWQiKTt9fSB2b2lkIDA7Jz5GQlRodW1iczwvYT4KCg==
cor-el மூலமாக
Thanks a lot for your help, jscher2000. The workaround you suggested is better than nothing, but it's a bit messy! (other than the 2 problems you mentioned before) Can it be done by a script which returns the Image Location? (because the image location is accessible using "Inspect Element".)