I want to do some kind of image editor, after I upload more images I make a list with all the thumbnails!
After, I want to be able to click on one thumb and rotate, duplicate, drag and drop (to change positions of the images), and delete the image. I want all the images to be in a php array. If an image is deleted I want to delete the row from array too. If a image is drag-and-dropped I want to change the position in the array too.
Ok, after the user uploads all the images and modifies some of them, how can I make a DONE button to save the positions of the images?
I made all ready all this, i only need to know how i can save the list of images after i "edit" with jquery? i need a save button or something
For this small project how do you suggest I save the images? (to make a table in mysql and store the names of the images in the database depending on the session id? depending on the IP?)
Any suggestions are welcome!
Way, waaay too all-encompassing question.
My suggestions:
Get familiar with gd or ImageMagick
Get familiar with jQuery UI, especially the drag & drop functionality
Store images in a temp folder on disk
Write a caching mechanism around it that'll clear the folder of unused images in regular intervals
Hashes can help to retrieve images from cache
Store state in a session
Do some work on this and come back with more specific questions.
Related
I just need a bit of advice on what direction to go with something I am creating.
It is a simple php based webpage for our sports and social members in our office, allowing them to create, edit, view and delete events for all members to see. Events like day trips, bbq's and all kinds of things like that.
So far I have it all working as I would like, other than one thing, being the event logos.
At present, the events are all stored in a mysql database, in one table, with a column for every aspect of the event; time, date, price, venue etc etc.
I also have two columns for the event logos, one for the venue logo, and one for the general event logo.
What I need advice on, is the best way to create a page that allows a user to upload an image to the server, browse the images already uploaded, select one, and have it's file path entered into a text input when creating the event.
Could someone offer their suggestions on the best way to go about this, or offer an alternative method for selecting and inputting a logo for the event?
Thanks
The Uploadify jQuery plugin works really well for batch and/or AJAX uploads. The way I'd handle your situation would be this:
Show all images on the same page with the form, and give each image a related radio button with the image path as the button's value, so the user simply checks the image they want to use,
If the user wants to upload images, use the Uploadify plugin and it's AJAX callback functions to dynamically populate the existing list of radio buttons.
The comment I made on your question, asking wether you store images (or their file paths) was because I think it would be much easier (and cleaner) for you to retrieve a list of uploaded images by querying a database. Personally, I don't store images in a database, only their file paths, and use PHP to handle any images that need to be deleted or moved. It's easier to assing images to other entities (especially in many-to-many relationships) that way.
If you don't want to store images' data in a separate table, I guess you'd have to use PHP file system functions to get a list of files already uploaded (glob comes to mind, although there could be better functions or this).
EDIT:
There is also a very good AJAX file browser plugin - ckFinder, but I have very little experience with it and can't really comment on its workflow, but if you find it to be a more elegant solution, you should try it out.
if i could understand your question you want to associate the image with the event i.e tag the image with the event right ??
you can use jquery's attr() function to grab the src of img and put it in input field
I ended up storing the images in the database itself.
Saved some hassle on the file path side of things.
Image this scenario:
There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.
What i'm trying to achieve is this:
After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.
Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole".
Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)
What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?
I hope my explanation isn't too messy, i didn't even know how to google for it.
I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:
Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.
Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.
Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.
Have a look at http://php.net/manual/en/function.imagecopymerge.php
Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html
just can't get my head around this.
I just finished my own WYSIWYG editor. It allows my users to upload images to embed in their article they are writing.
But how can i keep track of those user uploads ? I want them to be attached to the article, so that when i remove an article all images will also be removed. (keep my disk clean)
My first bet was to add an hidden input field to the article form for every uploaded image containing the image name, then on submit move all attached images from the tmp dir to the article image dir.
But this way a user can attach 100 times a picture to an article, remove them 99 times from the WYSIWYG editor and use only 1. Now i would have to save all the unused images. This seems like waste to me.
Any best practices on this ?
Don't worry about the edge case. Nobody is going to upload then deassociate 99 images.
You have to move the received files out of the tmp dir as soon as the (ajax?) upload sends them over. You cannot wait till the article submission, because the /tmp files would be gone by then.
Try to save your images with enumerated filenames like ArticleName.1.jpeg. And let your WYSIWIG editor inject uniqure placeholder tokens like {{img1}} on which you can see which images are factuall still in the article. (You can also try to deduce the file ids out from <img src="upl/articlename.1.jpeg"... since your WYSIWIG editor generates HTML.)
Anyway, on upload compare the list of enumerated {{img123}} tokens with the existing list of files.123.jpeg. Remove the unused.
Alternative: Do not remove unused images. Sell it as feature, since you now have more article history. And I guess the filesizes are negligible for most web sites.
i uploaded files into my server image folder.
after upload want to display the uploaded files as thumbnails in the grid view or anything(like windows explorer), also want to select multi files from grid view and download it.. any help to be appreciated.. im using php...
thank you so much...
Here some pointers to get you started:
Loop through the images and simply output them all, then use some CSS padding and width setting to get them into a grid. Alternatively, output them in a table, inserting a </tr><tr> every n loop iterations.
Add a checkbox input using some uniquely identifying value to each image to make it "selectable".
Use some Javascript to spice up the selection process and make it more "Explorer-like".
Try it and come back with more specific questions as you encounter them (after trying to solve them yourself first).
I think you need a PHP Photo Gallery instead. There is an awesome gallery Plogger that you can use.
Otherwise, here are more PHP galleries.
That would be a rather large project to undertake. Try a premade package like:
http://www.gerd-tentler.de/tools/filemanager/ (simple and free)
or
http://www.filerun.com/ (looks good, but requires license)
with the help of <table><tr><td>... you can make a grid view and with using the php code collect all uploaded files into an array then show the file in the grid view by inserting php code in between. In that you can give check boxes and place php code in between to generate an array while user cliks each check box correspondin to that file a link should be passed to the array and then post the values on the download button clik, in the next step you can use the php zip function to ip these file in the array and send it to user as download link
I am making an application in which every user has to sign in first and then he can access his home page. Now on the home page, I have given an option of uploading an image. Now if the user is uploading one image I am storing the full path of the uploaded image into a database and from there I can display the image easily by an img tag...
But what should I do when the user want to upload many images? Then how should I store their full paths in a database for the same user. Give me an idea just like Orkut or Facebook. Should I make a different table with named images and should I store images in different rows with the same username. What should I do?
I don't know the logic. What should I do? How can I upload many images and how can I store their path and what will be the wisest method and how do I display many images on one page (I can display one)?
You can make a folder, named after user name and id and put all their images there.
To display many images on one page, just add more <img> tags to the page.
This seems to be more of a design question than a PHP question. I would create a separate table to store all paths, this is more normalized.
You still need to handle the UI, but if you are doing a sort of gallery then that is fairly simple with some jQuery sideshows or something like that.
Yes, you want to use a separate table to store the image paths. You'll most likely want a record ID, the User ID, and the path to the image. You could also add a field to contain the sorting order for the images.
Having the sorting order field will allow you to page through the photos if there is more than one page of photos.
Your thinking is correct where you suggest creating a separate table with rows containing the image path and the username. The concept that you are dealing with is called cardinality. I'd recommend that you take a few minutes to read about this concept, since it is so important to database design.
In this case, you're talking about a one-to-many relationship between the user and the images.