AttributeImage : add css classes to be able to style

This commit is contained in:
Pierre Goiffon
2018-11-05 11:27:58 +01:00
parent 1f6a51b31f
commit 357555e507
3 changed files with 27 additions and 4 deletions

View File

@@ -2008,7 +2008,7 @@ EOF
}
else
{
$sUrl = $sDefaultUrl;
$sUrl = null;
}
$sHTMLValue = "<div class=\"field_input_zone field_input_image\"><div id=\"edit_$iInputId\" class=\"edit-image\"></div></div>\n";

View File

@@ -7284,10 +7284,13 @@ class AttributeImage extends AttributeBlob
* @param bool $bLocalize
*
* @return string
*
* @see edit_image.js for JS generated markup in form edition
*/
public function GetAsHTML($value, $oHostObject = null, $bLocalize = true)
{
$sRet = '';
$bIsCustomImage = false;
$iMaxWidthPx = $this->Get('display_max_width').'px';
$iMaxHeightPx = $this->Get('display_max_height').'px';
@@ -7299,10 +7302,14 @@ class AttributeImage extends AttributeBlob
$sCustomImageUrl = $this->GetAttributeImageFileUrl($value, $oHostObject);
if ($sCustomImageUrl !== null) {
$bIsCustomImage = true;
$sRet = $this->GetHtmlForImageUrl($sCustomImageUrl, $iMaxWidthPx, $iMaxHeightPx);
}
return '<div class="view-image" style="width: '.$iMaxWidthPx.'; height: '.$iMaxHeightPx.';"><span class="helper-middle"></span>'.$sRet.'</div>';
$sCssClasses = 'view-image attribute-image';
$sCssClasses .= ' '.(($bIsCustomImage) ? 'attribute-image-custom' : 'attribute-image-default');
return '<div class="'.$sCssClasses.'" style="width: '.$iMaxWidthPx.'; height: '.$iMaxHeightPx.';"><span class="helper-middle"></span>'.$sRet.'</div>';
}
private function GetHtmlForImageUrl($sUrl, $iMaxWidthPx, $iMaxHeightPx) {

View File

@@ -32,9 +32,25 @@ $(function()
var sMarkup = '';
sMarkup += '<input type="hidden" id="do_remove_' + me.options.input_name + '" name="' + me.options.input_name + '[remove]" value="0"/>';
sMarkup += '<div id="preview_' + me.options.input_name + '" class="view-image" style="width: ' + me.options.max_width_px + 'px; height: ' + me.options.max_height_px + 'px;">';
var sCssClasses = "view-image attribute-image";
console.debug("edit_image", me.options.current_image_url);
var sCssClassToAdd, sImageUrl;
if (me.options.current_image_url === null)
{
sCssClassToAdd = "attribute-image-default";
sImageUrl = me.options.default_image_url;
}
else
{
sCssClassToAdd = "attribute-image-custom";
sImageUrl = me.options.current_image_url;
}
sCssClasses += ' '+sCssClassToAdd;
sMarkup += '<div id="preview_'+me.options.input_name+'" class="'+sCssClasses+'" style="width: '+me.options.max_width_px+'px; height: '+me.options.max_height_px+'px;">';
sMarkup += '<span class="helper-middle"></span>';
sMarkup += '<img src="' + me.options.current_image_url + '" data-original-src="' + me.options.current_image_url + '" data-default-src="' + me.options.default_image_url + '" style="max-width: ' + me.options.max_width_px + 'px; max-height: ' + me.options.max_height_px + 'px">';
sMarkup += '<img src="'+sImageUrl+'" data-original-src="'+sImageUrl+'" data-default-src="'+me.options.default_image_url+'" style="max-width: '+me.options.max_width_px+'px; max-height: '+me.options.max_height_px+'px">';
sMarkup += '</div>';
sMarkup += '<div id="buttons_' + me.options.input_name + '" class="edit-buttons">';
sMarkup += '<div title="' + me.options.labels.reset_button + '" id="reset_' + me.options.input_name + '" class="button disabled"><div class="ui-icon ui-icon-arrowreturnthick-1-w"></div></div>';