holderjs 404, use data-src instead of src

Author: comur

Resources/views/Form/fields.html.twig

@@ -7,7 +7,7 @@
         {% if options.uploadConfig.saveOriginal %}
             {{ form_widget(form[options.uploadConfig.saveOriginal])}}
         {% endif %}
-        
+
         <div class="field-error clearfix hidden">
             <div id="{{form[name].vars.id}}_widget_error" class="alert alert-danger span6">
             </div>
@@ -23,22 +23,23 @@
                     {% if form[name].vars.value %}
                         <img src="/{{ options.uploadConfig.webDir ~ '/' ~ form[name].vars.value }}?{{ 'now'  | date('U') }}" id="{{ form[name].vars.id }}_preview" style="{{ options.uploadConfig.saveOriginal ? 'cursor:hand; cursor: pointer' : ''}}"/>
                     {% else %}
-                        <img src="holder.js/{{ options.cropConfig.minWidth }}x{{ options.cropConfig.minHeight}}" id="{{ form[name].vars.id }}_preview"/>
+                        <img data-src="holder.js/{{ options.cropConfig.minWidth }}x{{ options.cropConfig.minHeight}}" id="{{ form[name].vars.id }}_preview"/>
                     {% endif %}
                 {% else %}
                     {% if form[name].vars.value %}
                         <img src="/{{ (options.uploadConfig.webDir ~ '/' ~ form[name].vars.value)|thumb(options.fieldImage.maxWidth, options.fieldImage.maxHeight) }}?{{ 'now'  | date('U') }}" id="{{ form[name].vars.id }}_preview" style="{{ options.uploadConfig.saveOriginal ? 'cursor:hand; cursor: pointer' : ''}}"/>
                     {% else %}
-                        <img src="holder.js/{{ options.fieldImage.maxWidth }}x{{ options.fieldImage.maxHeight}}" id="{{ form[name].vars.id }}_preview"/>
+                        <img data-src="holder.js/{{ options.fieldImage.maxWidth }}x{{ options.fieldImage.maxHeight}}" id="{{ form[name].vars.id }}_preview"/>
                     {% endif %}
                 {% endif %}
-                
+
             </div>
         </div>
     {% endspaceless %}
 
     <script>
         $(document).ready(function(){
+            Holder.run();
             {% if options.uploadConfig.saveOriginal %}
                 if($('#{{ form[options.uploadConfig.saveOriginal].vars.id }}').val()){
                     $('#{{ form[name].vars.id }}_preview').click(function(e){
@@ -50,7 +51,7 @@
                     });
                 }
             {% endif %}
-            $('#image_preview_{{ form[name].vars.id }}.select-image-button .image_edit_button').click(function(event){ 
+            $('#image_preview_{{ form[name].vars.id }}.select-image-button .image_edit_button').click(function(event){
                 var options = $.parseJSON('{{ options | json_encode() | raw }}');
                 {% if options.uploadConfig.saveOriginal %}
                     options['originalImageFieldId'] = '{{ form[options.uploadConfig.saveOriginal].vars.id }}';
@@ -77,7 +78,7 @@
     {# trans_default_domain 'ComurImageBundle' #}
 
     {% spaceless %}
-        
+
         <div class="field-error clearfix hidden">
             <div id="{{form[name].vars.id}}_widget_error" class="alert alert-danger span6">
             </div>
@@ -106,7 +107,7 @@
         $(document).ready(function(){
             rebindGalleryRemove();
             galleries['{{form[name].vars.id}}'] = true;
-            $('.image_add_button').click(function(event){ 
+            $('.image_add_button').click(function(event){
                 initializeImageManager('{{ form[name].vars.id }}', $.parseJSON('{{ options | json_encode() | raw }}'));
                 $('#image_upload_modal').modal('show');
             });
@@ -120,4 +121,4 @@
         });
 
     </script>
-{% endblock %}
+{% endblock %}