Well, I'm try to customize the style of Cloudinary Upload Widget:
http://cloudinary.com/documentation/upload_widget
I want to apply the correct css for limit the image/canvas of the image preview during the progress.
Try to upload an image on the above page to see how it works.
During the upload, a preview is displayed:
Screenshot
I want to limit the width/height of the above image preview and whole loading bar. How? What's the css selector?
Maybe .image_holder or .thumbnail_inner but it's hard to tell, as there's half a dozen elements there. After you opened the image simply rightclick it and select "inspect element" or something similar.
The widget is only changing some elements during actual upload so you should be able to get a proper selector.
Related
I've been creating a blog website. All post images should be 800x800 resolution. On the admin page, when the author uploading image to post, if he/she will try to upload a bigger than 800x800 resolution, I want to show an alert to an author like a bootstrap danger alert. How can I do it?
Before
After
Not completely sure, but try creating it using URL.createObjectURL() (https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL, How to make a simple image upload using Javascript/HTML), don't alter the image dimensions using css, insert the image into the page, and just get the image width and height.
I am using a theme which uses Dropdown.js to upload files.
The JS file is over 1000 Lines and I feel a bit lost.
What I am trying to achieve is that I have a container where you drop a file. I want that when you choose an image the image will appear as a preview in the same container. Right now when I upload an image the preview is a small 100x100 picture. I want it to fill out the whole content and be able to upload 1 image only.
I am not able to achieve it as I am pretty new and the big js file is confusing me. If someone can point me in the right direction it would be great.
You are searching in the wrong file, your js controls the user experience. You need to work in the css of the dropzone, and add a width auto, height auto. Now to upload only one file that goes in you specifications of your dropzone, max-file: 1.
Check the documentation.
https://www.dropzonejs.com/
I'm using Contenttool :
https://github.com/GetmeUK/ContentTools
I would like to be able to change an image.
To do that, I click on the exiting image and upload a new one.
But, when I upload a file, width and height are at 1 x 1
And the image is not replaced by the new one. What I my doing wrong?
When I valid the page, my new image appear :
I've create a sample page :
http://portekoi.com/contentTool/test.html
Your problem directly come from the way contenttools manage images editing.
Instead of working with img tag, it use a div with a background image. The behavior between the two are completly different and is the source of a lot of issue related to image management.
The best solution to me would be to write a "real" image management plugin for contenttools that would deal with image editing in an.... img tag.
After that, you could just do a simple CSS rule like that :
img { max-width:100%; height:auto; } and your images would be responsive by default.
please is there any js framework or code that will let me resize an uploaded logo inside an picture,
like this example on picture
A :image to resize
B : tool to use
Thanks
i cane't upload image
the link below at vk
https://vk.com/id181761990?z=photo181761990_456239019%2Fphotos181761990
You can use jQueryUI to create the slider for 1-100% size, and on slider change value, resize the image pointing at it with an unique id.
I'd use an empty div with two backgrounds (shirt and image on it) to easily keep the image always in the middle of the shirt without using text aligns and calculated values.
I've got a question. So I would like to make a web app that does this:
allows user to select an image from his file system
using a crop tool, select an area of the image that the user would like to crop
preview the crop
save the cropped image
I have tried 2 approaches: the first one was to use HTML5 canvas. After a lot of finagling, I was able to select an image, crop it (crop tool coordinates are saved and the image is processed server side), preview it and submit it.
But I had problems if I selected an image, cropped it, then chose to select another image and try cropping that. The previous image selection was messing with the new one.
The second approach was to use JCrop. Using two example that were included on their website, I was able to use a crop tool to select an area, preview the crop in real time, and save the crop tool coordinates.
But the problem here was that I can't use a user-uploaded image; the image url is hard coded in the img tag. When I tried to implement a solution that took a user's selection, the image never came up.
So does anyone have a solution to these problems, or is aware of another technology that does what I need without any of the above issues? Please let me know. Thank you.
I've developed a Jquery plugin that does exactly what you want: it selects an image (or drag and drop it), lets you preview it and preview cropping area, change selected image and upload it. For cropping image, my plugin includes JCrop.
Plus, it validates files (max KB, extension, image min size, etc.), allows you select multiple files and style button. It accepts several options.
You'll find DEMO, documentation and download link here: Jquery Custom Input File Plugin
You can do something like this. Markup:
<form id="your-form" action="process_form.php">
<input id="your-input-file" name="your-input-file">
<input type="submit" value="Upload file">
</form>
When document is ready:
$('#your-input-file').customFile({
type : 'image',
image : {
crop : true,
cropSize: [300,200], // width and height of result
maxSize : [1080,720] // if you want to set up a maximum value for original images
},
maxKBperFile : 500,
multiple: false // when you select or drop a new image, this one replaces previous one
//More options...
});
//And upload form:
$('#your-form').submit(function(e){
e.preventDefault();
$.customFile.ajax('#your-form', {
success : function(response){
console.log(response)
}
})
});