So I have an img that, when clicked, takes the user to another page (via surrounding anchor tag). The img gets its src from a PHP script that returns the image data and logs it. Before redirecting the user to the desired page, they are directed to a PHP script that logs the redirect then serves the redirection.
I'd like to be able to associate the served image with the served click when Javascript is disabled. Cookies don't seem to work because say for instance the user has multiple tabs or windows opened with the same served image, and clicks one of them. Which one got clicked?
PHP doesn't work because we have no control over the page that hosts the anchor and the img tags.
I'd like to have this information for analytics purposes.
Is it possible and if so how? Thanks!
Related
I have a file manager website running and some users said they'd like to be able to embed the image preview page directly into img tags (on forums etc).
Lets take this page as an example: http://push.anukthewolf.com/a/Screenshot_2015-06-03-08-29-03.png
Even though it has an image extension, it's still a html (well, php) page. Could this script somehow detect if its requesting client is a browser parsing an img tag where its url has been used as source?
If that's the case I would output the image directly instead of the website. In every other case, the website should be sent.
I'm new to using the FB share buttons terminology so forgive me if I use the wrong syntax in describing this.
My site is setup to load pages based on the passed parameters in the URL (...?page=somepage&imageid=idnum).
So I have my index file which contains my head, as well as sidebar, etc. Then my main body is generated according to the passed parameter. Simple Enough.
On the homepage, the main body is a gallery of images. When they click on one of those images it takes them to a page that just displays that one image. The page is loaded with parameters of ?page=detail&image_id=1 /*or whatever the id of that image is */
So when they click on the share on FB button on those individual images page, I would like it to populate with the image that is displayed on that page. What I have done is included a php file in my head tag. The php script included gets the page info and passed parameters and then fills out the image url based on the imageid.
echo '<meta property="og:image" content="http://www.chiseledimages.com/clients/vote/'.$imgurl.'"/>';
This works in that when displaying the page source, the meta tag with og:image shows perfectly, also in that when I run it through the FB Object debugger, it gets the correct image and doesn't show me any errors. It even posts the correct image when the users shares on their wall. What is does not do, is show the correct image in the pop window after the uses presses the share button on my site. So even though the result is what I want, the problem with the user not seeing the correct image in the share pop-up, may lead them not to want to share on their wall.
Current location of site: http://www.chiseledimages.com/clients/vote/
Example of a specific pages: http://chiseledimages.com/clients/vote/?page=detail&angel_id=1
Screenshots of pop-up with wrong image, but final posted story having correct image.
How can I make the image in the pop-up match the image that is going to be shared. Thanks.
Edit: I forgot to mention and I'm sure it matters that I'm using Addthis to implement the FB share.
Check https://developers.facebook.com/docs/reference/dialogs/feed/ - look for the 'picture' parameter description
I suggest to you use this http://support.addthis.com/customer/portal/articles/1365475-attribute-based-configuration#.UwPQB6LW6So. just follow their example and you good to go.
I'm creating a website and I'd like to allow users to upload multiple files while they navigate the website.
When the upload completes, it would be nice to have a Javascipt event triggered, to allow the user to specify additional info related to the uploaded files (eg. photo location, tags, etc)
anyway, the required features are:
multiple files allowed for a single upload operation
display an optional progress indicator (at least in the "x of y files uploaded" fashion)
doing it without tying the users to a single page
How can I implement these features?
Any suggestion is greatly appreciated!
Edit
In the event of using a popup window to handle uploads, how can I:
inform the user (on the "master" page) that the upload has completed, or that there have been errors?
(more important) pass the $_FILES array to the popup window? I'd like the user to be able to click "upload" on the main window, or anyway to make the upload start from the main window (eg dragging and dropping files on the main window).
Since navigating the site will switch pages and it's unlikely that there's a full ajax navigation on your site, maybe it could help to somehow upload the files in a second popup window. Not sure how (if) it could be implemented, though, but since you need to upload multiple files at a time I'm afraid you're bound to use flash.
EDIT
So the solution could look like this:
When a user clicks a "select files" button you pop out a new window where he'll be able to actually select files (via flash if multifile upload is necessary). And to notify of upload progress use postMessage. Though postMessage isn't going to work in IE in this case, but probably you could somehow send the message to the server and from the server back to the page.
Another crazy idea is not to use a popup window, but let the user select the files on the page she was first, but once the user selects the files make all the links on the page target=_blank to make any subsequent navigation happen in another tab. I know it's hacky and not exactly user-friendly, but probably could help.
In any case I would inform the user beforehand that a new window will appear in both scenarios.
EDIT2
And an even crazier idea. When the user selects the files and clicks a link create an iframe which will cover the whole page and hide the original page beneath it and make the links open in the iframe. But it looks even more hackish and it seems you'll have much trouble with it.
does anyone have an idea on how I could capture the image id when a user clicks the next / previous button in Fancybox? I like how Fancybox changes depending on the size of the image so I prefer to use this over some of the other galleries that I have seen. Has anyone successfully done this? The site is in PHP.
The general idea would be to "proxy" your images by a PHP script.
This script would:
add 1 to the view count of the image
serves the image to the browser (instead of serving an HTML page as usual)
You would then update the src attribute of your pictures img tag :
<img src="mypicture.png"/>
would become
<img src="view_picture.php?picture=1"/>
Note that you must be careful and not authorize a filename in the picture parameter and/or carrefully check that the user is not trying to see a file that you don't want to show him (think view_picture.php?picture=../.htpasswd )
Consider using a general website analytics software, like Piwik. This will give you additional insights on you visitors and their actions on your site, rather than a simple image view counter.
I am running a site that uses Fancybox and Piwik, all image views through Fancybox will automatically show up in the Downloads section of Piwik reports without any additional configuration.
But you could easily customize this through Fancybox's onComplete callback and Piwik's trackPageView(). See Piwik Javascript API and Fancybox API for details.
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.