Clean up and force a rebuild of thumbnails when customising a crop region.

This commit is contained in:
Aaron van Geffen 2020-11-29 17:12:27 +01:00
parent 6fcc2eb59f
commit e7490e40dd
3 changed files with 59 additions and 42 deletions

View File

@ -149,18 +149,19 @@ class EditAsset extends HTMLController
$crop_value = $data->crop_width . ',' . $data->crop_height . ',' . $data->source_x . ',' . $data->source_y;
$meta[$crop_key] = $crop_value;
// If we uploaded a custom thumbnail, stop considering it such.
// If we previously uploaded a custom thumbnail, stop considering it such.
$custom_key = 'custom_' . $data->thumb_width . 'x' . $data->thumb_height;
if (isset($meta[$custom_key]))
{
// TODO: delete from disk
unset($meta[$custom_key]);
}
// Save meta changes so far.
$image->setMetaData($meta);
// Force a rebuild of related thumbnails.
$thumb_key = 'thumb_' . $data->thumb_width . 'x' . $data->thumb_height;
foreach ($meta as $meta_key => $meta_value)
if ($meta_key === $thumb_key || strpos($meta_key, $thumb_key . '_') !== false)
unset($meta[$meta_key]);
$image->setMetaData($meta);
$image->removeThumbnailsOfSize($data->thumb_width, $data->thumb_height);
$payload = [
'key' => $crop_key,

View File

@ -133,9 +133,9 @@ class Image extends Asset
public function removeAllThumbnails()
{
foreach ($this->thumbnails as $key => $value)
foreach ($this->thumbnails as $key => $filename)
{
$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $value;
$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $filename;
if (is_file($thumb_path))
unlink($thumb_path);
}
@ -146,6 +146,30 @@ class Image extends Asset
['id_asset' => $this->id_asset]);
}
public function removeThumbnailsOfSize($width, $height)
{
foreach ($this->thumbnails as $key => $filename)
{
if (strpos($key, $width . 'x' . $height) !== 0)
continue;
$thumb_path = THUMBSDIR . '/' . $this->subdir . '/' . $filename;
if (is_file($thumb_path))
unlink($thumb_path);
}
return Registry::get('db')->query('
DELETE FROM assets_thumbs
WHERE id_asset = {int:id_asset} AND
width = {int:width} AND
height = {int:height}',
[
'height' => $height,
'id_asset' => $this->id_asset,
'width' => $width,
]);
}
public function replaceThumbnail($descriptor, $tmp_file)
{
if (!is_file($tmp_file))

View File

@ -141,9 +141,6 @@ class EditAssetForm extends SubTemplate
$first = INF;
foreach ($this->thumbs as $i => $thumb)
{
if (!$thumb['status'])
continue;
$first = min($i, $first);
echo '
@ -178,14 +175,12 @@ class EditAssetForm extends SubTemplate
<img id="thumbnail" src="', $this->thumbs[$first]['url'], '" alt="Thumbnail" style="width: 100%; height: auto;">
</a>
</div>
<script type="text/javascript">
setTimeout(function() {
document.getElementById("thumbnail_src").addEventListener("change", function(event) {
var selection = event.target.options[event.target.selectedIndex];
document.getElementById("thumbnail_link").href = selection.dataset.url;
document.getElementById("thumbnail").src = selection.dataset.url;
});
}, 100);
<script type="text/javascript" defer="defer">
document.getElementById("thumbnail_src").addEventListener("change", event => {
let selection = event.target.options[event.target.selectedIndex];
document.getElementById("thumbnail_link").href = selection.dataset.url;
document.getElementById("thumbnail").src = selection.dataset.url;
});
</script>';
}
@ -196,27 +191,27 @@ class EditAssetForm extends SubTemplate
echo '
<script type="text/javascript" src="', BASEURL, '/js/crop_editor.js"></script>
<script type="text/javascript">
setTimeout(function() {
var editor = new CropEditor({
submit_url: "', BASEURL, '/editasset/",
original_image_src: "', $this->asset->getUrl(), '",
editor_container_parent_id: "asset_form",
thumbnail_select_id: "thumbnail_src",
drag_target: ".crop_image_container",
asset_id: ', $this->asset->getId(), ',
after_save: function(data) {
// Update thumbnail
document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();
<script type="text/javascript" defer="defer">
let editor = new CropEditor({
submit_url: "', BASEURL, '/editasset/",
original_image_src: "', $this->asset->getUrl(), '",
editor_container_parent_id: "asset_form",
thumbnail_select_id: "thumbnail_src",
drag_target: ".crop_image_container",
asset_id: ', $this->asset->getId(), ',
after_save: function(data) {
// Update thumbnail
document.getElementById("thumbnail").src = data.url + "?" + (new Date()).getTime();
// Update select
var src = document.getElementById("thumbnail_src");
src.options[src.selectedIndex].dataset.crop_region = data.value;
// Update select
let src = document.getElementById("thumbnail_src");
let option = src.options[src.selectedIndex];
option.dataset.crop_region = data.value;
option.textContent = option.textContent.replace(/top|bottom|centre|slice/, "exact");
// TODO: update meta
}
});
}, 100);
// TODO: update meta
}
});
</script>';
}
@ -259,9 +254,6 @@ class EditAssetForm extends SubTemplate
foreach ($this->thumbs as $thumb)
{
if (!$thumb['status'])
continue;
echo '
<option value="thumb_', implode('x', $thumb['dimensions']);