Page 1 of 1

Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-03 22:43
by ronwill
It seems that when creating an image field (or loading an earlier AG file and re-generating) that 'wells' are now created in DV template for the image and upload toolbox.

This is annoying as I don't like the look of wells round images and the toolbox - it would mean I need to write protect all my templates or remove the wells from templates that have images or all my projects when opening/saving them under AG 5.81!

Below is the extracted template html code of my earlier project protected DV template and then the same template when unprotected and regenerated under 5.81:

Earlier Template:

Code: Select all

						<span class="help-block collapse" id="photo-description"><div class="alert alert-info">Maximum file size allowed: 2000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

						<div class="form-control-static"><div class="pull-left">

						<a href="<%%TRANSLATION(ImageFolder)%%><%%VALUE(photo)%%>" data-lightbox="table1_1_dv"><img src="thumbnail.php?i=<%%VALUE(photo)%%>&t=table1_1&f=photo&v=dv" class="img-thumbnail" id="photo-image"></a>
</div>

												<div class="pull-right" style="overflow-x: hidden;">
							<div class="hidden-md hidden-lg vspacer-lg"></div>
							<%%UPLOADFILE(photo)%%>
							<%%REMOVEFILE(photo)%%>
Now generates as below (NOTE inclusion of 'wells')

Code: Select all

						<span class="help-block collapse" id="photo-description"><div class="alert alert-info">Maximum file size allowed: 2000 KB.<br>Allowed file types: jpg, jpeg, gif, png</div></span>

						<div class="form-control-static well well-sm"><div class="pull-left">

						<a href="<%%TRANSLATION(ImageFolder)%%><%%VALUE(photo)%%>" data-lightbox="table1_1_dv"><img src="thumbnail.php?i=<%%VALUE(photo)%%>&t=table1_1&f=photo&v=dv" class="img-thumbnail" id="photo-image"></a>
</div>

												<div class="pull-right well upload-toolbox">
							<div class="hidden-md hidden-lg vspacer-lg"></div>
							<%%UPLOADFILE(photo)%%>
							<%%REMOVEFILE(photo)%%>
							<div class="text-bold text-danger file-type-error hidden">
								<%%TRANSLATION(invalid file type)%%>
							</div>
							<div class="text-bold text-danger file-size-error hidden">
								<%%TRANSLATION(file too large)%%>
							</div>
Has this been done in error and will it be bug fixed/reversed or is there a quick fix to add something to remove 'wells' from image + upload toolbox?

Images:
before 5.81.jpg
before 5.81.jpg (20.3 KiB) Viewed 5336 times
Above shows test image before in saved template
now under 5.81.jpg
now under 5.81.jpg (20.75 KiB) Viewed 5336 times
Above shows what result is after vers 5.81

Cheers,
Ron

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-03 23:42
by peebee
I haven't actually installed V5.81 yet but as far as I'm aware .well is just Bootstrap css class so I'm guessing you should be able to hide it pretty easily if you want to?

Just add the following css style (or something along these lines depending on your background colour if it isn't white) to your hooks/header-extras.php and I think .well should be gone sitewide:

.well {
background-color: #ffffff;
border: none;
}

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-04 15:50
by ronwill
Hi Peebee - Tried that but could not get it to work (although I thought it would!), only temp fix I could make work was to remove 'well' from html code and then write protect affected DVtemplate files (those with image uploads) to avoid them being over written on later generation of AG DV files.

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-04 21:40
by peebee
Hmm, odd? I just tried it in developer tools on an image in the Appgini Northwind demo (V5.81) and it worked ok?

Did you add the <style> tags? Also try clearing your browser cache? Try this?

<style>
.well {
background-color: #ffffff !important;
border: none !important;
}
</style>

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-05 00:09
by ronwill
It's working now, I did use <style> tags but must have made an error as when cut and pasted your code and cleared browser it worked.
It's a good quick fix, but not long term as I have other 'wells' in the project and on same DV Template that naturally now don't show as 'wells' so am still hoping that 'wells' will be removed from default in V5.81 images.

I changed #ffffff to transparent so it works for other themes / backgrounds etc.

Thanks for your help,
Cheers,
Ron

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-05 02:02
by peebee
Sorry, provided the simplest solution I could think of as I was presuming you were wanting to hide ALL instances of .well class app wide. I'm not aware of where, other than images, the .well class has been added in V5.81?

To hide individual elements, you'd just need to add the specific element selector to the <style> override in header-extras.php

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-05 11:19
by ronwill
So far I have only noted that the .well class has been newly applied to images only in v5.81 (image + upload-toolbox).

I can remove well from upload toolbox using specific element selector as you suggest:
<style>
.upload-toolbox {
background-color: transparent;
border: none;
}
</style>

However not sure how to remove it from also the image .well without affecting other .well class in same DV template (i.e. what to use for specific element selector) ?

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-05 12:04
by ronwill
Temp fix sorted: Added below to hooks/header-extras.php

<style>
.form-control-static.well {
background-color: transparent;
border: none;
}
</style>
<style>
.upload-toolbox {
background-color: transparent;
border: none;
}
</style>

Re: Image/Photo 'well' in AppGini 5.81

Posted: 2019-11-05 12:18
by ronwill
Alternatively amend your file: dynamic.css.php from around line 215 (adding bold/italic as shown below)

/* file upload box formatting */
.upload-toolbox {
overflow-x: hidden;
max-width: 40rem;
font-size: 1.2rem;
text-align: left;
background-color: transparent;
border-color: transparent;

}
.theme-rtl .upload-toolbox {
text-align: right;
}
.upload-toolbox input[type="file"] {
display: inline-block;
}
.form-control-static.well {
margin-bottom: 0;
background-color: transparent;
border-color: transparent;