I am using Dropzone code obtained from this web site
DropZoneCode
In this example the dropzone is the width of the entire screen. I would like to reduce that size down to about 400 to 500 pixel. When I reduced the size of the div I could only drop 2 files before it stopped uploading files. The 3rd file just opened in the browser, which I believe was an indication I was outside the dropzone.
I believe if I reduced the size of the icon showing in the drop zone I would be able to add more files. Can anyone tell me where within the css file I can adjust the size of those items?
I was able to get it working using this setup
<asp:Panel ID="pnlStealthStat" runat="server" Visible="false">
<div id="dZUpload" class="dropzone" style="height:auto;margin-top:5px;">
<div class="dz-default dz-message"> Drop Stealth Stats Files Here</div>
</div>
</asp:Panel>
This setup was part of a bootstrap column and is functioning as expect
Related
I have a template like this :
<div ng-repeat="product in products">
<img ng-src="{{product.imageURL}}" />
.....
</div>
Each time this is regenerated it results in the browser clearing out the img and placing it back in again and will therefore redownload from source ( total size of transferred files keep increasing each time I switch from other state to this one, and i clearly can see that requests to image url are made again in Chrome Developper Tool ).
Is there a way to tell angular : " If you see that it's the same image url, do not redownload it between states". Some sort of caching ? I thought that browsers did this natively, but it doesnt seem to be the case here.
Im making a Post form with inputs along with a dropzone Div to upload Photos,
My issue is the following: As Im pushing all the photos to a session until the moment I persist the relation with the post, I dont know exactly how to proceed when some field is Not being filled.
I need to go back and present the form again.
The problem is that all my dropzone photos are being emptied from the form but not from the session. so if I correctly fill the form again and submit the data I will have more photos persisted than they should.
So I was thinking in making an event about some Request has failed(not filled all inputs) then flush the session Photo field.
But I dont know how is represented the fact that this Request has failed, or should I Repopulate the dropzone Div with eg.Input:old.
Can anybody address me or making a suggestion please.
Flushing the session is not a good idea in my opinion. A user who uploaded images will have to do it again when form validation fails. It is better to repopulate them.
The solution
You can add images below your dropzone input in your form and they will be populated as uploaded images. You only need a HTML structure.
In order get HTML structure, you can upload one image (drag n drop in your dropzone), inspect the uploaded image with developer tools and copy the generated code.
The only thing you will have to do, is to add all photos to an array on the server side.
My HTML code:
<div id="photos" class="dropzone">
<input name="file" type="file">
#foreach ($uploadedPhotos as $uploadedPhoto)
<div class="dz-preview dz-processing dz-image-preview dz-success">
<div class="dz-details">
<img data-dz-thumbnail=""
src="{{ $uploadedPhoto['src'] }}"
class="#if ($uploadedPhoto['vertical']) vertical #endif">
</div>
<div class="dz-progress">
<span class="dz-upload" data-dz-uploadprogress="" style="width: 100%;"></span>
</div>
<div class="dz-success-mark"><span>?</span></div>
<a class="dz-remove" href="javascript:undefined;" data-dz-remove="">Remove image</a>
</div>
#endforeach
</div>
You might need to play a little with css or js to style it and make other things functional e.g. remove button.
I'm doing a Phonegap App with JQueryMobile.
The different pages have different Background Images (defined by jquery code) and I'm seeing a disturbing behavior when the user enter the page ONLY THE FIRST TIME.
The problem is it occurs a resizing of the image in the first second. That is, when the user enter the page it shows a resolution, and a second after, the image resize again. And after that I can exit and enter again that page and DOES NOT RESIZE.
The HTML that define the page:
<div id="pageHoja1" class="divPagina" data-role="page">
</div>
<div id="pageHoja2" class="divPagina" data-role="page">
</div>
<div id="pageHoja3" class="divPagina" data-role="page">
</div>
The CSS of that page changes dynamically:
In the on-device-ready:
$(".divPagina").css("background-size","cover");
On the function that decides the background image:
$("#pageHoja" + i).css("background-image", "url('mycharts/" + sFileBackg + "')");
Ideally I would like to NOT RESIZE AT ALL (because I want the original size). But if that is impossible, at least I want the resize to occur before it shows to the user.
I've already tried this but with same results... ;(
$.mobile.loadPage("#pageHoja" + i);
$("#pageHoja" + i).page(true);
and I've checked the CSS of background-size BEFORE and AFTER (with an alert message) and both gives "cover" value...
Any ideas? Thanks!
I'm completely stuck on this one:
I'm working on a drupal 7 website and I have created a block (view) that should display an image with it. No matter what I try, I cant get the image displayed...
The content type I'm trying to display has 3 fields: "name", "description" and "picture".
The picture simply is an Image that's stored in a folder "myImages".
This is a picture of the block view I'm trying to create:
This does display the fields "title" and "beschrijving" (=description). The "foto" (=picture) however is not displayed... (in chrome it gives the "broken picture" logo, in firefox just nothing).
The wierd thing is: the image appears just for a blink and then disappears, meaning it is actually being rendered.
When I took a look at it with firebug I got following html:
<div class="views-field views-field-field-foto">
<span class="field-content">
<img width="100" height="100" alt="" src="sites/default/files/myImages/imageSource.jpg" typeof="foaf:Image">
</span>
</div>
And when I try to open the image itself (imageSource.jpg) I get an (500) internal server error (but I'm pretty sure this is because of the .gitignore file).
The image path is incorrect. It should look like...
src="/sites/default/files/myImages/imageSource.jpg"
...with the beginning forward slash.
I had issues when displaying images with Views, and it turned out to be the "alt text" option. In order to use "alt text" and not have issues I had to make use of the "Rewrite Results" option in Views.
I'm working on a gallery type application - one template puts together a popup dialog for a larger view of thumbnail images when clicked. The server path to the image is included as a template variable.
Gallery.Templates.Popup = "\
<div class='popup'>\
<img class='popup-image' src='{{image-path}}' />\
<div class='name'>{{name}}</div>\
<div class='caption'>{{caption}}</div>\
<div class='dimensions'>{{dimensions}}</div>\
<div class='price'>{{price}}</div>\
</div> \
";
This works very well EXCEPT for the first time the image is loaded. The dialog is constructed and shown but at the time the html string is attached to the dom, it lacks the image. The problem it is causing is in positioning the dialog:
The dialog box is positioned in the middle of the screen like this:
left = window.width /2 - dialog.width/2
But since the image is not present, the dialog.width variable is incorrect. Again, this only happens the first time a thumbnail is clicked, I'm guessing the image is cached for subsequent clicks.
Would this be handled by prefetching the images somehow? If so, do they need to be attached to the dom in order to be cached or can I just load them in an array?
Many Thanks !
If you can get the image size ahead of time from the server, you could use that to help you size the '.popup' div appropriately.
It sounds like a bad idea to prefetch images if they aren't needed and I can't think of a way to ensure that a specific image is loaded before it's html is generated programmatically.