I've been setting up Pinterest for a web site and it all works up to the point when you finish pinning an image. I always get "Whoops Sorry we could not fetch the image"
First I tried to directly assign the pin-it button to one of my images by setting the media parameter, which opened a pop-up with the description I provided. The image in the thumbnail area was displayed correctly as well, but Pin-It would result in the error message mentioned before.
Looking further into this issue I found 2 interesting sources on the Internet: This blog article recommended checking the .htaccess file of the Apache in case Pinterest gets blocked in some way, which isn't the case for me. I'm not blocking anything.
Another article gave some more useful information pointing out that the image has to be visible and exist with an <img> tag on the page (and fulfilling a couple of other criteria). Applying all those suggestions (e.g. image size of 400x500, visible, etc.) still wouldn't work. I went as far as just putting a plain image in the middle of my page and tried to Pin it, which still failed!
Then I tried a pin-it button with just the URL and let Pinterest fetch the images, which worked as flawless as the popup before up to the point when I finally finish the pin-it and it fails to retrieve the image...
Anybody got any suggestions what else I could try? I do run my Apache on port 88 instead of 80, but I couldn't find anything that this is related to the error. Anything else? If further information is required I can provide them.
There is a minimum and maximum size for an image that Pinterest will allow. I also found in the olden days ie a couple years ago there were characters in the image name that Pinterest did not like. I think they fixed that issue, but make sure your image is not tiny and not 5000 pixels wide.
The image does not have to be in an img tag, you can specify which image gets pinned in structured meta data, thus making it possible to display on your website an image in one size and give Pinterest a completely different sized image. You can use the same technique with Facebook, Twitter, Google+ assuming you get your structured meta data correct, you may also have to be "approved" to use Rich Pins/Twitter Cards.
Turns out Pinterest works fine on the production server, where we're using port 80. So the usage of port 88 might indeed have caused the issue.
It is a different environment though, so other factors might play a role as well.
I experienced the exact same problem but found that it was actually due to formatting in of the image's source tag.
Mine referred to ../images/example.jpg, which displayed perfectly, allowing you to get as far as it showing in the Pinterest dialogs, but as soon as I altered the source to simply images/example.jpg, removing the unnecessary ../ it began to work.
Related
EDIT: Please stop suggesting to clear the cache. That will obviously not solve anything for the users who may have visited the site before.
I know how to force the browser to use the latest CSS version. This is not what I'm asking.
I also know how to clear the cached images on the browser. This is also not what I'm asking.
I also know this could be solved by changing the name of the image. I don't want to do that.
It surprises me not being able to find an answer to this issue anywhere since I came across this problem multiple times.
When replacing an image such as a logo that's on every page of an old website, you may want to simply replace the image without changing its name so you don't have to change the image name on every HTML page.
The problem is that Chrome continues to show the old version of that image no matter how many times you refresh the page.
It's the only browser I know that does this. It's incredibly annoying.
Isn't there a way to force Chrome to show this change, or even request Google to update the image that has been replaced?
Thanks.
ctrl shift i (to open the developers tool)
click network
check the disable cached data from the top of the window
or u can use the shortcut i think ctrl R (i am not sure of it) but using the developer tool ->network ->disabling cache then refreshing the page works fine 100%
All-right..
A couple of minutes ago I was pulling my hair out over this, but I think I narrowed down the problem.
In my html-page I want to use the image from this URL:
https://vignette.wikia.nocookie.net/mrmen/images/d/d2/Mrtallimage.png
Following the URL we see, that the image is 354px x 864px
However, as seen in the following Fiddle, when referring to the image in an img-tag, it is 200px x 488px
(But the right size, if you download the image, upload to Imgur, and the reference it..)
https://jsfiddle.net/hync8ovs/9/
So it has to be something server-side at
https://vignette.wikia.nocookie.net that resizes the image, when
it's being used as src in an img-tag, right? Is that even possible? And is it possible to "force" the original size?
I'm pretty sure, I've never come across this problem before..
Thanks!
(Disclaimer: I was only using the image for testing purposes in my web-app, that takes an image-url and analyzes the image. It was acting weird with this image and I was just wondering why.)
So it has to be something server-side at https://vignette.wikia.nocookie.net that resizes the image, when it's being used as src in an img-tag, right? Is that even possible? And is it possible to "force" the original size?
I believe the server at vignette.wikia.nocookie.net checks the referrer url, and then sends the smaller image when it is not directly (or perhaps via the same domain) requested.
That's %{HTTP_REFERER} doing this.
Read about it at https://httpd.apache.org/docs/2.4/rewrite/access.html
If it's only happening within JSFiddle it's likely a compression/resize being done by their service. The reference to the image is no different in any of the other locations. If it were being resized by the vignette.wikia.nocookie.net location when you pull it up in another window it should still be resized to 200 x 488. I don't think it's anything you're doing.
I am trying to use the built in inspector tool in Google Chrome to manipulate the site http://www.di.se (as it probably has one of the most # layouts I have ever seen on a popular website) with around 300 000 visitors daily.
It seems to be mainly built with three HTML frame tags with the names: historyFrame, headerFrame and contentFrame. I can remove the headerFrame that covers a huge part of the view. However, I don't know how to change the contentFrame size so that it will cover the entire screen.
I have tried to add a CSS height property but it does not seem to change anything. If this is solvable I would be very thankful and so would 300000 other users :) Thanks!
The frameset, which is the parent of the frame you removed, specifies the heights for each of the frames, currently rows="0,210,*". So if you remove the header frame, the content frame becomes the second frame and gets a height of 210. By changing this attribute to 0,* the problem should be fixed.
However I'm not able to modify this property in Chrome's toolkit. Maybe this is a limitation of the developer tools of Chrome. After all, frames are old (removed even from HTML5), so maybe they didn't pay much attention to supporting it.
Note though that the top frame contains the advertising that probably pays for the site. If you got this working and all 300.000 users would use your solution, then the site would probably seize to exist, and you got 300.000 unhappy users. So think twice before you do this.
You can do it by:
First deleting the first Frame(header)
and modify this:
from:
rows=".260,*"
To:
rows="1,*"
So you have only the frame you want, no useless data and the frame you want take 100% of the screen.
I'm building an auction website (in Python/Django). Users can provide URL's to their product images stored in external sites, for example images stored in Photobucket.
So my plan is that when displaying a specific auction, I'll link to the external product image. But when I'm showing list of auctions (e.g. a search results page) I'd need to show the thumbnails
I can see 2 options of doing this:
Use the externally hosted images as thumbnails as well. Specify a standardized small size for these images to "turn" them into thumbnails. How do I do that - do I specify the thumbnail size in the CSS or somewhere else? What would be a good size? Any code examples would be greatly appreciated as I'm not too familiar with CSS or HTML.
When the user submits an URL to an external image, download that image to my own server and turn it into a thumbnail. Any Python/Django software I can use for downloading the remote image and then turning it into a thumbnail?
Any general advices are appreciated. I'm leaning towards option (1) because I only have a cheap VPS and option (1) would be much less resource intensive. Any reason that is NOT a good idea?
Thanks.
Both will work.
The first option might mean that very large images will need to be fetched and then resized by the css/html. So the risk here is slowness (too much bandwidth being consumed) and ugly resizing of images (depends on the browser).
Resizing the images yourself might be a very good strategy. You'll get predictable thumbnails and faster load times. You can use caching to make sure the resized thumbnails don't get computed every time.
I'm guessing that, if you googled for it a bit, you might even find an image resizer as a REST service, so you won't even have to implement it yourself (even though it's trivial) - you could just concatenate the url to some resizer service's url and be done with it.
** Edit **
Some googling found these tools:
http://code.google.com/p/microapps/wiki/Drinkme
http://transloadit.com/docs/image-resize
I'm fairly sure I saw something exactly like this recently, where you could point a Django model field to a remote image URL and have thumbnails done, but you could also have it upload the image files too. Darned if I cant find it now.
Ah ha! Maybe sorl-thumbnail. Gives this example:
{% thumbnail "http://www.aino.se/media/i/logo.png" "40x40" crop="80% top" as im %}
<img src="{{ im.url }}">
{% endthumbnail %}
Assuming you can replace a literal string with a URL field (and not an ImageField) from your model ( lot.remoteimageurl for example) then I think that's it.
sorl-thumbnail will handle thumbnail creation and caching for you.
http://thumbnail.sorl.net/index.html#
I have a large, hi-def JavaScript-intensive image banner for a site I'm designing. What is everyone's opinion of using iframes so that you incur the load time only once? Is there a CSS alternative to the iframe?
Feel free to preview the site.
It is very much a work in progress.
I should also have mentioned that I would like the banner rotation to keep moving. When the visitor clicks on a link, the banner rotation starts over. It would be nice if the "animation" kept rotating, regardless of the page the user visits.Blockquote
Well, in that case I would strongly recommend not doing that. The only real way of achieving that is to have the actual website content in the iframe, which means that you suddenly have lots of negative sides to the site: not being able to bookmark urls easily due to the address bar not changing; accessibility concerns; etc
I think you'll find that most people won't care that it reloads again. Once a visitor lands on your website, they'll marvel at the wonderful banner immediately, and then will continue to ignore it while they browse your site - until an image they haven't seen appears and distracts them away from your content.
Keep the rotation random enough, and with enough images, and people will stop to look at it from whatever page they're on.
I find the main challenge with iFrame headers is resizing. Since the font in your header is of static size, I don't see a problem with using an iFrame. Although I'm not sure if it's really intensive enough to be worth it.
Well, the browser appears to cache all seven banner images upon the first load, and runs them out from the cache (for each subsequent page) thereafter. I don't think you have a problem :D
Try it out with Firebug's Net monitoring tool in Firefox.
This may work without CSS also, but if you use CSS to load the background and your server is configured correctly, the image should already only be downloaded once.
Usually the browser will request a resource by asking for it only if it has not been modified since the last time it was downloaded. In this case, the only things sent back and forth are the HTTP headers, no content.
If you want to ensure the image is only downloaded once, add an .htacces or an apache2.conf rule to make the image expire a few days into the future so that users will only request it again if their cache is cleared or the content expiration date passes. An .htaccess file is probably too excessive to use in your case, though results may vary.
You could have it load the main page once, then asynchronously load the other elements when needed (ajax). If you did that, an iFrame would not be necessary. Here is an example of loading only the new material.
While using IFrames as a sort of master page/template for your pages might be a good thing, IFrames have a known negative impact to searchability/SEO.
It might also be unnecessary in the first place because once your images are loaded the first time (and with the large high-def images you have on your site, that would be slow no matter what you do) the images are cached by browsers and will not be reloaded until the user clears their cache or does a Ctrl+F5.