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.
Related
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 am trying to load some images from the users camera roll using Ionic 1. I am using a component which allows me to pull the location of the images and compress them so they become thumbnails for displaying.
I have got the point where I can recover the image location however the issue I'm having is displaying it in an img view tag. The component outputs the file location in a format like:
'/var/mobile/Containers/Data/Application/BLAH-BLAH/tmp/B08CABBD-596C-4F1A-8905-C652C9DCBC4D^L0^001_mthumb.png'
I have tried many approaches like moving this image to anther location within the phone, renaming it to a shorter name appending the image with file:// or local:// tags and added the sanitation changes to the ionic.js. Using all of this the image back shrinks in size and doesn't show the image.
Any help would be greatly appreciated.
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.
I have overlapped some transparent .png images over .jpg background images using css, now I need to find a way to all images as single image(including all the overlapped images), so that I save it as a single image and have it for my use.
Detailed explanation : I'm working on a website where you could display some .png clip images over .jpg background image .To do that I have used some Div's each having images with single div for background image.and i have button for save image.. Now when the user clicks save button, I'm unable to save the overlapped images into a single image.
It would be of great help if someone could solve this issue.
For saveing all of resources like as css , js and images you use Google Chrome and after open developing tools (Press F12 and go to Resources tab and then frames folder) you can find all of images there and you can save it.
I'm using wordpress native gallery for showing picture gallery. http://codex.wordpress.org/Gallery_Shortcode
My problem is in the gallery for thumbnail , it doesn't show the full picture. It cuts small part of the picture and shows as thumbnail in the gallery. When I click on the picture it shows me the full version.
I uploaded two states for you to understand better
As you see the full picture is not same as the thumbnail.
How can I solve this problem ?
Wordpress crops small thumbnails by default. To change this behaviour, go to:
Settings -> Media, and uncheck Crop thumbnail to exact dimensions (normally thumbnails are proportional). Watch out as this will mean that your new thumbnail will not fix exactly into 150x150px box.
To regenerate your thumbnails you can use: http://wordpress.org/extend/plugins/regenerate-thumbnails/ regenerate plugin.