I implemented a system to edit images displayed on a website.
When an image is edited, I want to display its last version on all pages of the site (where it's called), at least for the user who edited the image.
Now I'm searching a better way to clear the cache for a specific image than adding the timestamp to the end :
<img src="myimage.jpg?01215654" alt="" />
Why ?
It supposes to always add the timestamp at the end of the image path, with a session system for example.
But when the session expires (for example, user leaves the site, and go back few hours after), the real path of the image is displayed :
<img src="myimage.jpg" alt="" />
And the navigator randomly displays the old image, or the last version... Because Apache cached :
myimage.jpg as the old image
myimage.jpg?01215654 as the new version because no one hit it before (was loaded as a new media)
Limitations
I can't change the path of an edited image, for example "myimage.jpg" to "myimage-v2.jpg", which could solve the problem...
Images are not served from a controller (not served from a PHP script), they are direclty loaded from their path on the server.
I don't want to use a session system that add timestamp or version string at the end of an image path with JS.
What I want
I want to say that the cache of "myimage.jpg" has expired, and so to display the last version, and then cache it normally, until the next edition. So I would like to load the image with "200 status", and not "304 modified" after an edit.
Note : when an image is edited, I reload it with JS (JQuery) in a hidden div, if you now a way to change cache header ?
So what I want is to clear the cache header of a specific image that is edited, taking into account the limitations of my project, so if possible by using cache directives without serving the image from a controller, is it possible ?
This whole question is very confused.
Apache cache? ...No, the cache is in your browser, not in Apache.
Sessions adding timestamps to image URLs? ...No, the querystring with the timestamp must be added to the HTML using server-side script (such as PHP, for example). It has nothing whatsoever to do with browser sessions. (And actually it's generally much better to use the file last-modified time rather than the current timestamp, BTW).
There are a number of ways to achieve the effect you want, each with its own benefits and drawbacks depending on your situation. You may want to read my answer here.
Related
I am uploading a replacement image to a server using PHP file upload. It has the same name as the old image.
After the upload, the old image is still displayed from the browser cache but can, of course, be refreshed with Control+F5 on most browsers - then the new image is displayed.
I want to automatically get the new image to be displayed, without involving the users (they keep forgetting to refresh). This question has been asked and answered several times, for example at HTML - I upload new image to site, old image still loads
The solution I tried was, after the file is uploaded, then I add "fake" data to the image src attribute thus:
src="img.jpg?t=x" (where x is the time generated with php).
This works in the sense that in the file upload program I see the new image. It is said to cause the image to be loaded from the server, and not the cache. I'm not sure I understand the mechanism.
I had assumed this would also force the copy of this image to be refreshed in the cache, but the next time the image is loaded, either in the same script or a different page, in the same browser, the old image still shows. In other words the old image is still in the cache and is still being used. Of course you can refresh and then all is well.
I have tested this on several browsers including Chrome and Firefox.
Is there a way to force the new image to be loaded not just when I add the "fake" parameter, but also to be replaced in the cache. I'm sure this must be answered somewhere, but I can't find something that works.
My question is about HTML and PHP.
This is my setup right now:
A website where user have accounts
A FTP server with pictures (currently none)
Files are currently saved on the website in the "PICTURES" folder (which is accessible by everybody who know the full URL)
So, I would like to know how I can display the images without storing them on the website (which will fix my URL problem).
My idea was to move the files on the FTP server, and when a users logon and request a page with those images, download them through a FTP connection, save them on the website, display the images, and remove them. Which would make them accessible only between the downloading time. But this solutions sounds REALLY bad to me.
You need always to have a place where your images are stored. But, if you don't want to give a user the chance to know where are stored, you can create a system which is used to show the images.
Think about this, if you want to download a file from Mega, you can't access to the URL where the file is stored, instead of that, the server itselfs calls a system who assign you a "key" and you can download the file only through that system using your "key".
You could use a system like "base64" so you can encode your image, and show it using it, or, you can use the "header" modifier so, you can display an image using a PHP code.
For example your image tag will be like:
<img src="processImage.php?id=01&user=10&key=123" />
So, your processImage will return a "tricky" image, actually not the image, but the code processed by PHP will be returned, like using "imagejpg()" function with the header "Content-Type:image/jpeg" and then the user will not know where the image is stored actually but the img will works actually.
I am creating a dynamic image dependent on a lot of information about the logged in user, but with so many users online, the image system is using a lot of the resources my website hosts have allocated to me.
Is there a way to tell the browser to temporarily cache an image? Similar to temporary cookies?
The image contains numbers such as post count and other frequently incrementing numbers that can cause the browser's automatically cached images to re-download the image potentially every page load. I wouldn't mind a little inaccuracy to save a lot of processing for my server
[Edit]
Browsers already do cache content(unless specifically told not to do so), if it detects a change in last modified then it reloads it.
I am taking a guess that your image being generated is either a) being returned to the browser by a specific php script() or b) is being stored temporarily but is being updated and so the browser retrieves the updated version.
[/Edit]
If you are outputting an image based on dynamically generated content you can write this temporarily to a directory and then based on a predefined time period pull the image if its valid.
if(file_exists($file) && filemtime($file) <= time()-60*20) {
// Regenerate image
} else {
// Load image from cache
}
The example above will not regenerate the image for 20 minutes.
Try to look here
http://www.webscalingblog.com/performance/caching-http-headers-cache-control-max-age.html
In other way, you can set up cache-control header in PHP, and display images using script.
Okay, so on my website a user can upload a profile picture. But the issue is, if they update it by uploading and overwriting the existing profile picture they have to wait for their browser cache to clear and the same for everyone else on the site.
I know I could easily beat this by sticking a string on the end of the image URL e.g. ?id=22185 , but that will make my site loading times VERY slow.
Could any of you recommend a way of making the user's profile picture update instantly for every user on the site?
Use the file modified time as the URL variable. That way the image will be cached until that number changes, which only would happen of the file is updated.
Set unique name for each image. When user change image, e filename change too and browser will load new image instead of serving old FROM cache
You could easily add a timestamp to your files or you could use the "headers" function of PHP to change the "Expire" param.
I need help writing javascript (jquery?) for a web app to save a set of images to an IndexedDB and then load them into an html page.
I have two html pages, img.html that is just a listing of images in this format:
'image-id','base64-image'
and index.html, my main page that includes a series of image tags in this format:
<img name="imglist" id="image-id" img-src="">
I'd like the user to be able to click a button to load all of the images from img.html into IndexedDB and then click another button to read the images from IndexedDB and insert them into the appropriate image tag in index.html (the 'image-id' in img.html corresponds to the appropriate img tag id in index.html).
Also, is it possible to set a cookie (or some other method) that will cause the DB to be erased after a certain time period? I'd like to be able to force the user to re-load the images from the server about once a week.
I'm not great with javascript or indexeddb, so any help or examples would be great.
See the article titled Storing images and files in IndexedDB.
N.B. I just posted a similar question here, though it concerns the particular case of a cross-site request. If your requests are on the same site, the link above should be a perfect example for you to work by.