1
0
mirror of https://github.com/processwire/processwire.git synced 2025-08-12 17:54:44 +02:00

Update for display of SVG thumbnails in admin InputfieldImage

This commit is contained in:
Toutouwai
2023-09-20 09:40:29 -04:00
committed by Ryan Cramer
parent c6844af963
commit 17d6def379
3 changed files with 25 additions and 4 deletions

File diff suppressed because one or more lines are too long

View File

@@ -59,7 +59,7 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
return array( return array(
'title' => __('Images', __FILE__), // Module Title 'title' => __('Images', __FILE__), // Module Title
'summary' => __('One or more image uploads (sortable)', __FILE__), // Module Summary 'summary' => __('One or more image uploads (sortable)', __FILE__), // Module Summary
'version' => 126, 'version' => 127,
'permanent' => true, 'permanent' => true,
); );
} }
@@ -659,8 +659,12 @@ class InputfieldImage extends InputfieldFile implements InputfieldItemList, Inpu
if($extra->exists()) $fileStats .= " • $extra->filesizeStr $name ($extra->savingsPct)"; if($extra->exists()) $fileStats .= " • $extra->filesizeStr $name ($extra->savingsPct)";
} }
$class = 'gridImage__overflow';
if($pagefile->ext() === 'svg') {
$class .= ' ' . ($pagefile->ratio < 1 ? 'portrait' : 'landscape');
}
$out = $this->getTooltip($pagefile) . " $out = $this->getTooltip($pagefile) . "
<div class='gridImage__overflow'> <div class='$class'>
$thumb[markup] $thumb[markup]
</div> </div>
"; ";

View File

@@ -942,6 +942,23 @@ $focusPointCircleSize: 40px;
white-space: nowrap; white-space: nowrap;
} }
.InputfieldImageList {
// for .svg images
.gridImage__overflow.landscape {
img { height: 100%; }
}
.gridImage__overflow.portrait {
img { width: 100%; }
}
}
.InputfieldImageList[data-ragged="1"] {
// for .svg images
.gridImage__overflow.portrait {
img { width: auto; height: 100%; }
}
}
/* todo: 3.0.190 improves touch support but needs further testing /* todo: 3.0.190 improves touch support but needs further testing
.gridImage__edit { display:block !important; } .gridImage__edit { display:block !important; }
.gridImage__edit span { display:none; } .gridImage__edit span { display:none; }