Skip to content

Commit 0cd48d8

Browse files
tabacitutabacitu
committed
image and base64_image fields no longer show empty space when empty
1 parent 1db9764 commit 0cd48d8

File tree

3 files changed

+29
-17
lines changed

3 files changed

+29
-17
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@ All Notable changes to `Backpack CRUD` will be documented in this file.
88

99
-----------
1010

11-
## 4.0.7 - 2019-10-xx
11+
## 4.0.7 - 2019-10-06
1212

1313
### Fixed
1414
- fixes #2114 - delete and clone message texts are overly escaped;
15+
- ```image``` and ```base64_image``` field types no longer show empty space when empty;
1516

1617

1718
## 4.0.6 - 2019-10-04

‎src/resources/views/crud/fields/base64_image.blade.php‎

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
</div>
1717
<!-- Wrap the image or canvas element with a block element (container) -->
1818
<div class="row">
19-
<div class="col-sm-6" style="margin-bottom: 20px;">
19+
<div class="col-sm-6" data-handle="previewArea" style="margin-bottom: 20px;">
2020
@if(!is_null(old(square_brackets_to_dots($field['name']))))
2121
<img data-handle="mainImage" src="{{ old(square_brackets_to_dots($field['name'])) }}">
2222
@elseif(isset($field['src']) && isset($entry))
@@ -30,7 +30,7 @@
3030
@endif
3131
</div>
3232
@if(isset($field['crop']) && $field['crop'])
33-
<div class="col-sm-3">
33+
<div class="col-sm-3" data-handle="previewArea">
3434
<div class="docs-preview clearfix">
3535
<div id="{{ $field['name'] }}" class="img-preview preview-lg">
3636
<img src="" style="display: block; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; margin-left: -32.875px; margin-top: -18.4922px; transform: none;">
@@ -131,12 +131,13 @@ function bpFieldInitBase64CropperImageElement(element) {
131131
var $uploadImage = element.find("[data-handle=uploadImage]");
132132
var $hiddenImage = element.find("[data-handle=hiddenImage]");
133133
var $hiddenFilename = element.find("#hiddenFilename");
134-
var $rotateLeft = element.find("[data-handle=rotateLeft]")
135-
var $rotateRight = element.find("[data-handle=rotateRight]")
136-
var $zoomIn = element.find("[data-handle=zoomIn]")
137-
var $zoomOut = element.find("[data-handle=zoomOut]")
138-
var $reset = element.find("[data-handle=reset]")
139-
var $remove = element.find("[data-handle=remove]")
134+
var $rotateLeft = element.find("[data-handle=rotateLeft]");
135+
var $rotateRight = element.find("[data-handle=rotateRight]");
136+
var $zoomIn = element.find("[data-handle=zoomIn]");
137+
var $zoomOut = element.find("[data-handle=zoomOut]");
138+
var $reset = element.find("[data-handle=reset]");
139+
var $remove = element.find("[data-handle=remove]");
140+
var $previews = element.find("[data-handle=previewArea]");
140141
// Options either global for all image type fields, or use 'data-*' elements for options passed in via the CRUD controller
141142
var options = {
142143
viewMode: 2,
@@ -150,6 +151,7 @@ function bpFieldInitBase64CropperImageElement(element) {
150151
151152
// Hide 'Remove' button if there is no image saved
152153
if (!$mainImage.attr('src')){
154+
$previews.hide();
153155
$remove.hide();
154156
}
155157
// Initialise hidden form input in case we submit with no change
@@ -172,6 +174,7 @@ function bpFieldInitBase64CropperImageElement(element) {
172174
$zoomOut.hide();
173175
$reset.hide();
174176
$remove.hide();
177+
$previews.hide();
175178
});
176179
} else {
177180
@@ -180,6 +183,7 @@ function bpFieldInitBase64CropperImageElement(element) {
180183
$hiddenImage.val('');
181184
$hiddenFilename.val('removed');
182185
$remove.hide();
186+
$previews.hide();
183187
});
184188
}
185189
@@ -201,6 +205,7 @@ function bpFieldInitBase64CropperImageElement(element) {
201205
fileReader.readAsDataURL(file);
202206
fileReader.onload = function () {
203207
$uploadImage.val("");
208+
$previews.show();
204209
if(crop){
205210
$mainImage.cropper(options).cropper("reset", true).cropper("replace", this.result);
206211
// Override form submit to copy canvas to hidden input before submitting

‎src/resources/views/crud/fields/image.blade.php‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -51,11 +51,11 @@ function maximumServerUploadSizeInBytes() {
5151
</div>
5252
<!-- Wrap the image or canvas element with a block element (container) -->
5353
<div class="row">
54-
<div class="col-sm-6" style="margin-bottom: 20px;">
54+
<div class="col-sm-6" data-handle="previewArea" style="margin-bottom: 20px;">
5555
<img data-handle="mainImage" src="{{ $image_url }}">
5656
</div>
5757
@if(isset($field['crop']) && $field['crop'])
58-
<div class="col-sm-3">
58+
<div class="col-sm-3" data-handle="previewArea">
5959
<div class="docs-preview clearfix">
6060
<div id="{{ $field['name'] }}" class="img-preview preview-lg">
6161
<img src="" style="display: block; min-width: 0px !important; min-height: 0px !important; max-width: none !important; max-height: none !important; margin-left: -32.875px; margin-top: -18.4922px; transform: none;">
@@ -154,12 +154,13 @@ function bpFieldInitCropperImageElement(element) {
154154
var $mainImage = element.find('[data-handle=mainImage]');
155155
var $uploadImage = element.find("[data-handle=uploadImage]");
156156
var $hiddenImage = element.find("[data-handle=hiddenImage]");
157-
var $rotateLeft = element.find("[data-handle=rotateLeft]")
158-
var $rotateRight = element.find("[data-handle=rotateRight]")
159-
var $zoomIn = element.find("[data-handle=zoomIn]")
160-
var $zoomOut = element.find("[data-handle=zoomOut]")
161-
var $reset = element.find("[data-handle=reset]")
162-
var $remove = element.find("[data-handle=remove]")
157+
var $rotateLeft = element.find("[data-handle=rotateLeft]");
158+
var $rotateRight = element.find("[data-handle=rotateRight]");
159+
var $zoomIn = element.find("[data-handle=zoomIn]");
160+
var $zoomOut = element.find("[data-handle=zoomOut]");
161+
var $reset = element.find("[data-handle=reset]");
162+
var $remove = element.find("[data-handle=remove]");
163+
var $previews = element.find("[data-handle=previewArea]");
163164
// Options either global for all image type fields, or use 'data-*' elements for options passed in via the CRUD controller
164165
var options = {
165166
viewMode: 2,
@@ -173,6 +174,7 @@ function bpFieldInitCropperImageElement(element) {
173174
174175
// Hide 'Remove' button if there is no image saved
175176
if (!$mainImage.attr('src')){
177+
$previews.hide();
176178
$remove.hide();
177179
}
178180
// Initialise hidden form input in case we submit with no change
@@ -192,13 +194,15 @@ function bpFieldInitCropperImageElement(element) {
192194
$zoomOut.hide();
193195
$reset.hide();
194196
$remove.hide();
197+
$previews.hide();
195198
});
196199
} else {
197200
198201
$(this).find("#remove").click(function() {
199202
$mainImage.attr('src','');
200203
$hiddenImage.val('');
201204
$remove.hide();
205+
$previews.hide();
202206
});
203207
}
204208
@@ -220,7 +224,9 @@ function bpFieldInitCropperImageElement(element) {
220224
221225
fileReader.readAsDataURL(file);
222226
fileReader.onload = function () {
227+
223228
$uploadImage.val("");
229+
$previews.show();
224230
if(crop){
225231
$mainImage.cropper(options).cropper("reset", true).cropper("replace", this.result);
226232
// Override form submit to copy canvas to hidden input before submitting

0 commit comments

Comments
 (0)