I have a page with og tags (including a source and an image - a youtube-like video view page).
I've replaced the image the og:image tag points to, to another image by the same name. However, when using the facebook linter/debugger, the image shown is the old image, while clicking the image itself, opens and shows the new image.
Facebook uses some kind of a proxy cache for the content of the image - how can I clear it without changing the name of the image file ?
This thread gives an answer.
To reiterate (in case thread goes down),
Go to http://developers.facebook.com/tools/debug
Enter the URL (of the page that holds your og meta tags) and include the query data: fbrefresh=CAN_BE_ANYTHING
e.g. http://www.example.com/mypage.html?fbrefresh=CAN_BE_ANYTHING
Using the debugger/linter should force a full recache. I suspect the caching you're seeing is in your browser. Have you tried emptying your cache or using incognito mode?
If that doesn't work (and depending on how much traffic you're getting) it might have something to do with the names being the same - but I don't think this should be the case. Try replacing the image with another with a different name, hit the URL in the debugger so FB receives the new one, then swap back to the one you want. Kinda janky, but will probably do what you want.
Related
When an HTML editor is used and images are added from the local computer, they are uploaded to a server and a link is obtained to put it in the image src attribute. What happens when the img element is removed from the editor? How would the image be deleted from the server? In this case I understand that the image deletion event could be detected and then call a service to delete it. But what happens if the user adds a new image and leaves the page? How would it be deleted in these cases?
In both cases, if the deletion of the images is not managed, it could happen that the server is filled with unused images. How do you usually solve this problem? How is the proper way to solve this?
That's a nice question there. And yeah, for sure the server would fill up with unused images in some point. I'm not an expert on this but I'll try to suggest something so I can implement it too in my WYSIWYG editor haha. I suppose you have a custom modal for the insertion of the image. Upon clicking the button you could save the image link to an array and at SAVE || on leaving the document edit || on popstate event you could make a regex that checks the innerHTML of the editor for the specific SRC. If is not found then you could push an ajax request with the image name so you can deleteit. For sure there are more efficient and complex ways to achieve that. Such as creating text ranges and track elements on keydown - Backspace(8) / Deletekey(46).
An other way is that you could track the images that are in use. When the document is saved regex out the images in the document, push them to a db table and periodically make a check from the back end so you can delete those that are not in use.
I don't know if my suggestions are helpful or not. I just saw an interesting subject so I jumped in. Cheers mate.
I have added multiple products in my zen cart store. The problem is when i click on a specific product, the image wont show. It remains blank.
http://www.fmchase.com/
Above is the url of the site. When we go to a single product, i image of that product is not displayed, though it is displayed on the category.
The image it's looking for doesn't exist.
e.g http://www.fmchase.com/images/large/Aquafresh%20little%20Teeth%20toothbrush_LRG.jpg
returns a 404 (not found) error.
edit: The category page is using a different image http://www.fmchase.com/images/Aquafresh%20little%20Teeth%20toothbrush.jpg
The problem is in your new template. Go to includes/templates/your_template/templates/tpl_modules_main_product_image.php and change all variables matching $products_image_medium to $products_image
This should fix your problem.
I removed
Content-Security-Policy module from .htaccess
and I got my listing images back
I want to display an "img" element as a child of a panel. Should we be using the Image widget for this? I'm doing the following:
Image img = new Image();
img.getElement().getStyle().setWidth(80, Style.Unit.PX);
img.getElement().getStyle().setHeight(80, Style.Unit.PX);
// add it to a panel, which eventually gets added to the root panel.
somePanel.add(img);
// set the url
img.setUrl("stuff/test.png");
This works fine on FF. When I run the same code in mobile safari, the images never load. I've added a LoadHandler to the Image instance. I can see that on FF, the event callbacks are triggered. But on mobile safari, they're never triggered.
I recall that an Image must be added to the RootPanel in order for it to ever load, but I am indeed doing that. What else could be causing this? I'm sure the png resource is located correctly.
Thanks
Rule of thumb: always use absolute URLs, possibly using GWT.getModuleBaseURL(), GWT.getHostPageBaseURL() or GWT.getModuleBaseForStaticFiles() as a prefix:
img.setUrl(GWT.getHostPageBaseURL() + "stuff/test.png");
This is because GWT code runs in an iframe and is loaded from within a subfolder, and browsers differ in behavior on whether to use the host page or the iframe URL to resolve relative URLs.
On my page, overlays are loaded by inserting their content with jQuery and then fading in.
What I want to do is this:
When you click to open an overlay, an URI is loaded (e.g. news/12, where news is the category and 12 is the id of the item to load).
Except, instead of loading it in body, it should be loaded in the overlay.
In other words, I want to achieve something like on facebook, where you open an overlay, the url changes, but the main page stays the same.
I'm guessing you need ajax for this, but I have no idea whatsoever how to do it.
Thanks
It sounds like you want to use the new history.pushState(...) and history.popState(...) browser API.
This SO post might help you out: Change the URL in the browser without loading the new page using JavaScript
Use Boxy. See http://onehackoranother.com/projects/jquery/boxy/tests.html#
AJAX example:
<a href='#' onclick='Boxy.load("test-1.html");'>Test 1</a>
See this question: Ajax - How to change URL by content
I solved it thanks to Lethargy's answer.
.pushState() is exactly what I need to have the URL reflect the contents of the overlay that is dynamically created with jQuery.
With some tweaking around and debugging I managed to get it all working.
Now my overlays (or popups, dialogs, whatever) are search engine ready, and the url is copy-pastable for users :)
The Facebook "Update Status" is not getting right image of the page. When I paste the http://www.cjp.org/page.aspx?id=245692 link on my "Update Status" it only shows on thumbnail of "Charity Navigator" and completely ignores the main image. On other urls like http://www.cjp.org/page.aspx?id=235964, it shows the main image and gives options of other thumbnails.
Both pages as basically done the same way with cms, the only difference I see is the image ratio. Is that the reason why it's not getting the main image. Is there a way to show the main image without chaining the aspect ratio?
Thanks,
Rex
You don't have any open graph data so facebook is just guessing what images, description, title etc you want to show. You need to add open graph meta data to your head, and check it with the url linter to make sure it is reading the things you want it to show, correctly.
https://developers.facebook.com/docs/opengraph/
https://developers.facebook.com/tools/debug/
Use a tag like this:
<link rel="image_src"
type="image/jpeg"
href="http://www.example.com/image.jpg" />
Note, this doesn't work for everyone. It did work, but many are saying it doesn't anymore. Trying doesn't hurt.