Skip to content

Commit

Permalink
Adding a Formats Tab on Edit photo page
Browse files Browse the repository at this point in the history
* Add 3 new files for the tab creation (php, tpl and js)
* Creation of a new API method : pwg.images.formats.remove
* Adding translation in en_GB and fr_FR for the formats
* Minor change on the head-button css class
  • Loading branch information
Zacharieg committed Jul 29, 2022
1 parent 4b8c033 commit 5781810
Show file tree
Hide file tree
Showing 13 changed files with 371 additions and 3 deletions.
6 changes: 5 additions & 1 deletion admin/include/add_core_tabs.inc.php
Expand Up @@ -118,9 +118,13 @@ function add_core_tabs($sheets, $tab_id)
break;

case 'photo':
global $admin_photo_base_url;
global $admin_photo_base_url, $conf;
$sheets['properties'] = array('caption' => '<span class="icon-file-image"></span>'.l10n('Properties'), 'url' => $admin_photo_base_url.'-properties');
$sheets['coi'] = array('caption' => '<span class="icon-crop"></span>'.l10n('Center of interest'), 'url' => $admin_photo_base_url.'-coi');
if ($conf['enable_formats'])
{
$sheets['formats'] = array('caption' => '<span class="icon-docs"></span>'.l10n('Formats'), 'url' => $admin_photo_base_url.'-formats');
}
break;

case 'photos_add':
Expand Down
4 changes: 4 additions & 0 deletions admin/photo.php
Expand Up @@ -71,6 +71,10 @@
{
include(PHPWG_ROOT_PATH.'admin/picture_coi.php');
}
elseif ('formats' == $page['tab'] && $conf['enable_formats'])
{
include(PHPWG_ROOT_PATH.'admin/picture_formats.php');
}
else
{
include(PHPWG_ROOT_PATH.'admin/photo_'.$page['tab'].'.php');
Expand Down
63 changes: 63 additions & 0 deletions admin/picture_formats.php
@@ -0,0 +1,63 @@
<?php
// +-----------------------------------------------------------------------+
// | This file is part of Piwigo. |
// | |
// | For copyright and license information, please view the COPYING.txt |
// | file that was distributed with this source code. |
// +-----------------------------------------------------------------------+

if(!defined("PHPWG_ROOT_PATH"))
{
die('Hacking attempt!');
}

// +-----------------------------------------------------------------------+
// | Check Access and exit when user status is not ok |
// +-----------------------------------------------------------------------+
check_status(ACCESS_ADMINISTRATOR);

check_input_parameter('image_id', $_GET, false, PATTERN_ID);

$query='
SELECT *
FROM '.IMAGES_TABLE.'
WHERE id = '. $_GET['image_id'] .'
;';
$images = query2array($query);
$image = $images[0];

$query = '
SELECT
*
FROM '.IMAGE_FORMAT_TABLE.'
WHERE image_id = '.$_GET['image_id'].'
;';

$formats = query2array($query);

foreach ($formats as &$format)
{
$format['download_url'] = 'action.php?format='.$format['format_id'].'&amp;download';


$format['label'] = strtoupper($format['ext']);
$lang_key = 'format '.strtoupper($format['ext']);
if (isset($lang[$lang_key]))
{
$format['label'] = $lang[$lang_key];
}

$format['filesize'] = sprintf('%.1fMB', $format['filesize']/1024);
}

$template->assign(array(
'ADD_FORMATS_URL' => get_root_url().'admin.php?page=photos_add&formats='.$_GET['image_id'],
'IMG_SQUARE_SRC' => DerivativeImage::url(ImageStdParams::get_by_type(IMG_SQUARE), $image),
'FORMATS' => $formats,
'PWG_TOKEN' => get_pwg_token(),
));

$template->set_filename('picture_formats', 'picture_formats.tpl');

$template->assign_var_from_handle('ADMIN_CONTENT', 'picture_formats');
?>
4 changes: 4 additions & 0 deletions admin/themes/default/css/components/general.css
Expand Up @@ -39,6 +39,8 @@ or

.head-button-1:hover {
background: #ff7700;
text-decoration: none !important;
color: white;
}

.head-button-2 {
Expand All @@ -48,6 +50,8 @@ or

.head-button-2:hover {
background: #eee;
text-decoration: none !important;
color: inherit !important;
}

/* -------------
Expand Down
35 changes: 35 additions & 0 deletions admin/themes/default/js/picture_formats.js
@@ -0,0 +1,35 @@
function fitExtensions() {
$(".format-card-ext span").each((i, node) => {
let size = Math.min(180 * 1/node.innerHTML.length, 45)
node.setAttribute('style', `font-size:${size}px`)
})
}

fitExtensions()

$('.format-card').each((i, node) => {
let card = $(node)
let button = card.find(".format-delete")
button.click(() => {
console.log(card.data('id'));
button.find('i').attr("class", "icon-spin6 animate-spin")
$.ajax({
url: "ws.php?format=json&method=pwg.images.formats.delete",
type: "POST",
data: {
pwg_token : pwg_token,
format_id: card.data('id'),
},
success: function (raw_data) {
card.fadeOut("slow", () => {
card.remove();
if ($('.format-card').length == 0)
$('.no-formats').show()
})
},
error: function(message) {
console.log(message);
}
})
})
})
4 changes: 2 additions & 2 deletions admin/themes/default/template/photos_add_direct.tpl
Expand Up @@ -81,7 +81,7 @@ var batch_Label = "{'Manage this set of %d photos'|translate}";
var albumSummary_label = "{'Album "%s" now contains %d photos'|translate|escape}";
var str_format_warning = "{'Error when trying to detect formats'|translate}";
var str_ok = "{'Ok'|translate}";
var str_format_warning_multiple = "{'There is multiple image in the database with the following names : %s. Try to rename them with the Edit Filename plugin.'|translate}";
var str_format_warning_multiple = "{'There is multiple image in the database with the following names : %s.'|translate}";
var str_format_warning_notFound = "{'No picture found with the following name : %s.'|translate}";
var str_and_X_others = "{'and %d more'|translate}";
var file_ext = "{$file_exts}";
Expand Down Expand Up @@ -508,7 +508,7 @@ jQuery(document).ready(function(){
<fieldset class="selectFiles">
<legend><span class="icon-file-image icon-yellow"></span>{'Select files'|@translate}</legend>
<div class="selectFilesButtonBlock">
<button id="addFiles" class="buttonGradient">{if not $DISPLAY_FORMATS}{'Add Photos'|translate}{else}{'Add Formats'|translate}{/if}<i class="icon-plus-circled"></i></button>
<button id="addFiles" class="buttonGradient">{if not $DISPLAY_FORMATS}{'Add Photos'|translate}{else}{'Add formats'|@translate}{/if}<i class="icon-plus-circled"></i></button>
<div class="selectFilesinfo">
{if isset($original_resize_maxheight)}
<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
Expand Down
29 changes: 29 additions & 0 deletions admin/themes/default/template/picture_formats.tpl
@@ -0,0 +1,29 @@
{combine_css path="admin/themes/default/fontello/css/animation.css" order=10} {* order 10 is required, see issue 1080 *}
{combine_script id='picture_formats' load='footer' path='admin/themes/default/js/picture_formats.js'}

<script>
const nbFormats = {count($FORMATS)}
const pwg_token = "{$PWG_TOKEN}"
</script>

<div class="formats-header">
<a class="head-button-1 icon-plus-circled" href="{$ADD_FORMATS_URL}">{"Add formats"|@translate}</a>
</div>
<div class="formats-content">
<div class="no-formats" {if (count($FORMATS) != 0)}style="display:none"{/if}>
{"No format for this picture"|@translate}
</div>

<div class="formats-list" {if (count($FORMATS) == 0)}style="display:none"{/if}>
{foreach from=$FORMATS item=$format}
<div class="format-card" data-id="{$format["format_id"]}" style="background-image: url('{$IMG_SQUARE_SRC}')">
<span class="format-card-size">{$format["filesize"]}</span>
<div class="format-card-ext"><span>{$format["label"]}</span></div>
<div class="format-card-actions">
<a href="{$format["download_url"]}" rel="nofollow"> <i class="icon-download"></i> </a>
<a class="format-delete"> <i class="icon-trash-1"></i> </a>
</div>
</div>
{/foreach}
</div>
</div>
72 changes: 72 additions & 0 deletions admin/themes/default/theme.css
Expand Up @@ -4008,6 +4008,78 @@ a#showPermissions:hover {text-decoration: none;}
grid-template-columns: 50% 50%;
}


/* Format tab on picture edit */

.formats-header {
display: flex;
flex-wrap: nowrap;
align-items: center;
margin-left: 20px;
max-width: calc(100% - 20px);
overflow: hidden;
padding: 10px;
}

.formats-content {
margin: 10px 30px;
}

.formats-list {
display: flex;
}

.format-card {
width: 150px;
height: 150px;
background-size: cover;
margin-right: 20px;
margin-bottom: 20px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
}

.format-card::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}

.format-card-ext {
color: white;
font-weight: bolder;
font-size: 50px;
z-index: 2;
height: 40%;
display: flex;
justify-content: center;
align-items: center;
}

.format-card-actions {
display: flex;
justify-content: center;
z-index: 2;
}

.format-card-actions a {
color: white;
font-size: 24px;
margin: 0 10px;
}

.format-card-size {
color: white;
margin-top: 5px;
z-index: 2;
font-size: 20px;
}

/* Album Manager */
#addAlbumForm {
text-align:left;
Expand Down
4 changes: 4 additions & 0 deletions admin/themes/roma/theme.css
Expand Up @@ -1454,6 +1454,10 @@ li.plupload_delete a:hover {background: url("images/cancelhover.svg")!important;
color: #444 !important;
}

.head-button-1:hover {
color: #444 !important;
}

.head-button-2 {
background-color: #333 !important;
}
Expand Down

0 comments on commit 5781810

Please sign in to comment.