Version 3.0

This commit is contained in:
Deltacms 2023-10-20 11:24:09 +02:00
parent 58e1f713e1
commit 4b01417591
8 changed files with 130 additions and 193 deletions

View File

@ -5,7 +5,7 @@
*/ */
setlocale(LC_NUMERIC,'English','en_US','en_US.UTF-8'); setlocale(LC_NUMERIC,'English','en_US','en_US.UTF-8');
class album extends common { class album extends common {
const VERSION = '2.6'; const VERSION = '3.0';
const REALNAME = 'Album Photo'; const REALNAME = 'Album Photo';
const DELETE = true; const DELETE = true;
const UPDATE = '0.0'; const UPDATE = '0.0';

View File

@ -1,6 +1,6 @@
<?php <?php
/* création des miniatures par @Lionel 2019 /* création des miniatures @Lionel Croquefer 2019
* modification le 08 octobre 2023 * modification le 19 octobre 2023
*/ */
if (!isset($_GET['img'])) if (!isset($_GET['img']))
{ {
@ -11,10 +11,13 @@ if ( is_file($img) && substr(mime_content_type($img), 0, 5) == 'image' ) {
function makeDir($dir) { function makeDir($dir) {
if ( (!is_dir($dir)) || (!file_exists($dir)) ) if ( (!is_dir($dir)) || (!file_exists($dir)) )
mkdir($dir,0755,true); @mkdir($dir,0755,true);
} }
$ratio = 200; // taille des miniatures
$tnlarge = 320;/*267*/
$tnhaut = ($tnlarge/1.6);/*200*/
$size_img = filesize($img); $size_img = filesize($img);
$dossiercache = '../../../site/file/cache'; $dossiercache = '../../../site/file/cache';
makeDir($dossiercache); makeDir($dossiercache);
@ -24,42 +27,50 @@ $cache = substr(strrchr($url_par, '/'), 1);
makeDir($dossiercache.'/'.$cache); makeDir($dossiercache.'/'.$cache);
$extension = strrchr($par,'.'); $extension = strrchr($par,'.');
$vignette = str_replace($extension,'',$par); $vignette = str_replace($extension,'',$par);
$miniature = $dossiercache.'/'.$cache.'/'.$vignette.'-'.$size_img.'.webp'; $miniature = $dossiercache.'/'.$cache.'/tn-'.$vignette.'-'.$size_img.'.webp';
if(!file_exists($miniature)) { if (!file_exists($miniature)) {
$imginfo = getimagesize($img); list($width, $height, $type, $attr) = getimagesize($img);
$largeur = $imginfo[0];
$hauteur = $imginfo[1]; if ($height > $tnhaut)
$type = $imginfo[2]; {
if($type == 1) $convert = $tnhaut/$height;
{ $height = $tnhaut;
$src = imagecreatefromgif($img); $width = ceil($width*$convert);
} }
elseif($type == 2) if ($width > $tnlarge)
{ {
$src = imagecreatefromjpeg($img); $convert = $tnlarge/$width;
} $width = $tnlarge;
elseif($type == 3) $height = ceil($height*$convert);
{ }
$src = imagecreatefrompng($img);
} $largeur = $width;
elseif($type == 18) $hauteur = $height;
{
$src = imagecreatefromwebp($img); if($type == 1)
} {
imageinterlace($src, true); $img_in = imagecreatefromgif($img);
if ($largeur > $hauteur) }
{ elseif($type == 2)
$im = imagecreatetruecolor(round(($ratio/$hauteur)*$largeur), $ratio); {
imagecopyresampled($im, $src, 0, 0, 0, 0, round(($ratio/$hauteur)*$largeur), $ratio, $largeur, $hauteur); $img_in = imagecreatefromjpeg($img);
} }
else elseif($type == 3)
{ {
$im = imagecreatetruecolor($ratio, round(($ratio/$largeur)*$hauteur)); $img_in = imagecreatefrompng($img);
imagecopyresampled($im, $src, 0, 0, 0, 0, $ratio, round($hauteur*($ratio/$largeur)), $largeur, $hauteur); }
} elseif($type == 18)
imagewebp($im, $miniature, 80); {
imagedestroy($im); $img_in = imagecreatefromwebp($img);
}
imageinterlace($img_in, true);
$img_out = imagecreatetruecolor($largeur, $hauteur) or die ('Impossible de créer un flux d\'image GD');
imagecopyresampled($img_out, $img_in, 0, 0, 0, 0, imagesx($img_out), imagesy($img_out), imagesx($img_in), imagesy($img_in));
imagewebp($img_out, $miniature, 80);
imagedestroy($img_out);
} }
header('Content-Type: image/webp'); header('Content-Type: image/webp');
$data = file_get_contents($miniature); $data = file_get_contents($miniature);

View File

@ -1,14 +1,20 @@
.gallery { section > * {
box-sizing: border-box;
padding: 0;
}
section > .row:not(.back) > .col2 {
padding: 5px; padding: 5px;
}
.gallery {
position: relative; position: relative;
} }
.galleryGalleryPicture { .galleryGalleryPicture {
box-sizing: content-box;
padding: 12px 0 2px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
height: 185px;/*fluide*/
max-height: 36vmin;
text-align: center; text-align: center;
background-color: rgba(230, 230, 230, 0.7); background-color: rgba(230, 230, 230, 0.7);
border: 1px solid #ddd; border: 1px solid #ddd;
@ -19,59 +25,48 @@
background-color: rgb(192, 192, 192); background-color: rgb(192, 192, 192);
} }
.galleryGalleryName { .galleryGalleryName {
position: absolute;
left: 0;
right: 0;
bottom: 0;
line-height: 1.2; line-height: 1.2;
color: #000;
overflow: hidden;
font-size: 0.85em;
} }
.galleryGalleryPicture img { .galleryGalleryPicture > figure > img {
max-height: 80%; max-height: 20vmin;
max-width: 95%; max-width: 95%;
object-fit: contain;
} }
.picResized { .picResized {
color: crimson; color: crimson;
} }
.osm { .osm {
position: absolute; position: absolute;
left:10px; right:10px;
bottom:10px; top:10px;
} }
/* adaptation */ figure, figcaption {
@media (max-width: 1281px) { border: none;
.galleryGalleryPicture { margin: 0;
height: 160px; padding: 0;
}
} }
/* styles adaptatifs */
@media (max-width: 1025px) { @media (max-width: 1025px) {
.galleryGalleryPicture {
height: 135px;
}
.galleryGalleryName { .galleryGalleryName {
font-size: 0.75em; font-size: 0.78em;
} }
} }
@media (max-width: 813px) {
.galleryGalleryPicture {
height: 120px;
}
}
@media (max-width: 799px) { @media (max-width: 799px) {
section > .row:not(.back) { section > .row:not(.back) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0 10px; justify-content: space-evenly;
} }
.gallery { .gallery {
flex: 0 0 33.3333%; flex: 0 0 33.3333%;
} }
.col2:not(.gallery) { .galleryGalleryPicture > figure > img {
width: inherit; max-height: 25vmin;
} }
} }
@media (max-width: 599px) { @media (max-width: 599px) {
.gallery { .gallery {
flex: 0 0 50%; flex: 0 0 50%;
@ -79,4 +74,7 @@ section > .row:not(.back) {
.galleryGalleryName { .galleryGalleryName {
display: none; display: none;
} }
} .galleryGalleryPicture {
padding: 12px 0 7px;
}
}

View File

@ -9,30 +9,3 @@
captionsData: "caption", captionsData: "caption",
closeText: "&times;" closeText: "&times;"
}); });
$(function () {
var taille = "<?php echo $this->getData(['theme','site', 'width']); ?>";
switch(taille)
{
case '75vw':
$('a.galleryGalleryPicture').css('height', '125px');
$('div.galleryGalleryName').css('font-size', '0.8em');
$('div.galleryGalleryName').css('line-height', '1em');
break;
case '85vw':
$('a.galleryGalleryPicture').css('height', '135px');
$('div.galleryGalleryName').css('font-size', '0.85em');
$('div.galleryGalleryName').css('line-height', '1em');
break;
case '95vw':
$('a.galleryGalleryPicture').css('height', '160px');
$('div.galleryGalleryName').css('font-size', '0.9em');
break;
default:
$('a.galleryGalleryPicture').css('height', '185px');
$('div.galleryGalleryName').css('font-size', '1em');
break;
}
});

View File

@ -2,18 +2,7 @@
// Lexique // Lexique
$param = ''; $param = '';
include('./module/album/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_album.php'); include('./module/album/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_album.php');
?>
<div class="row back">
<div class="col2">
<?php echo template::button('galleryGalleryBack', [
'class' => 'buttonGrey',
'href' => helper::baseUrl() . $this->getUrl(0),
'ico' => 'left',
'value' => $text['album_view']['gallery'][0]
]); ?>
</div>
</div>
<?php
$i = 1; $i = 1;
$picturesNb = count($module::$pictures); $picturesNb = count($module::$pictures);
foreach($module::$pictures as $picture => $legend): foreach($module::$pictures as $picture => $legend):
@ -36,14 +25,14 @@ $get_location = albumHelper::gps_exif($picture);
<?php endif; ?> <?php endif; ?>
<div class="col2 gallery"> <div class="col2 gallery">
<a href="<?php echo $picture; ?>" class="galleryGalleryPicture" data-caption="<?php echo $legend; ?>"> <a href="<?php echo $picture; ?>" class="galleryGalleryPicture" data-caption="<?php echo $legend; ?>">
<img src="module/album/plugins/thumbnailer.php?img=<?php echo $picture; ?>" alt="<?php echo $legend; ?>"> <figure class="album"><img src="module/album/plugins/thumbnailer.php?img=<?php echo $picture; ?>" alt="<?php echo $legend; ?>">
<?php if ($photo_960 !== false): ?> <?php if ( ($photo_960 !== false) && (file_exists($urloriginal)) ): ?>
<div class="galleryGalleryName picResized" onclick="window.open('<?=$urlback?>');" data-tippy-content="image originale"> <figcaption><div class="galleryGalleryName picResized" onclick="window.open('<?=$urlback?>');" data-tippy-content="image originale">
<?php else: ?> <?php else: ?>
<div class="galleryGalleryName"> <figcaption><div class="galleryGalleryName">
<?php endif; <?php endif;
if (!empty($legend)): if (!empty($legend)):
$shortenedLegend = helper::subword($legend, 0, 25); $shortenedLegend = helper::subword($legend, 0, 20);
if ( strlen($shortenedLegend) < strlen($legend) ) $legend = $shortenedLegend.'...'; if ( strlen($shortenedLegend) < strlen($legend) ) $legend = $shortenedLegend.'...';
echo $legend; echo $legend;
// nettoyage et affichage du nom des images // nettoyage et affichage du nom des images
@ -51,10 +40,12 @@ $get_location = albumHelper::gps_exif($picture);
$separe = array('_','-','t960'); $separe = array('_','-','t960');
$picname = str_replace($separe, ' ', $photo); $picname = str_replace($separe, ' ', $photo);
$picname = preg_replace('/(\.jpe?g|\.png|\.gif|\.webp)$/i', '', $picname); $picname = preg_replace('/(\.jpe?g|\.png|\.gif|\.webp)$/i', '', $picname);
echo substr($picname,0,25); $shortenedPicname = helper::subword($picname, 0, 20);
if ( strlen($shortenedPicname) < strlen($picname) ) $picname = $shortenedPicname.'...';
echo $picname;
endif; endif;
?> ?>
</div> </div></figcaption></figure>
</a> </a>
<?php <?php
// ajout du marqueur aux images contenant des données exif gps // ajout du marqueur aux images contenant des données exif gps
@ -78,3 +69,13 @@ $get_location = albumHelper::gps_exif($picture);
$i++; $i++;
endforeach; endforeach;
?> ?>
<div class="row back">
<div class="col2">
<?php echo template::button('galleryGalleryBack', [
'class' => 'buttonGrey',
'href' => helper::baseUrl() . $this->getUrl(0),
'ico' => 'left',
'value' => $text['album_view']['gallery'][0]
]); ?>
</div>
</div>

View File

@ -1,16 +1,20 @@
.col3 { section > * {
box-sizing: border-box;
padding: 0;
}
section > .row > .col3 {
padding: 5px; padding: 5px;
} }
.galleryPicture { .galleryPicture {
box-sizing: content-box;
padding: 22px 0 5px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
position: relative; position: relative;
height: 220px;
max-height: 50vmin;
text-align: center; text-align: center;
background-color: rgba(230, 230, 230, 0.7); background-color: rgba(230, 230, 230, 0.7);
border: 1px solid #ddd; border: 1px solid rgba(0,0,0,0.2);
border-radius: 6px; border-radius: 6px;
transition: background-color 1.3s ease; transition: background-color 1.3s ease;
} }
@ -18,37 +22,20 @@
background-color: rgb(192, 192, 192); background-color: rgb(192, 192, 192);
} }
.galleryName { .galleryName {
position: absolute; line-height: 1.25;
left: 0;
right: 0;
bottom: 0;
line-height: 1.5;
color: #000;
font-size: 0.85em; font-size: 0.85em;
} }
.galleryPicture img { .galleryPicture > figure > img {
max-height: 80%; max-height: 25vmin;
max-width: 95%; max-width: 95%;
object-fit: contain;
} }
/* adaptation */ figure, figcaption {
@media (max-width: 1281px) { border: none;
.galleryPicture { margin: 0;
height: 210px; padding: 0;
}
}
@media (max-width: 1025px) {
.galleryPicture {
height: 180px;
}
.galleryName {
font-size: 0.75em;
}
}
@media (max-width: 961px) {
.galleryPicture {
height: 165px;
}
} }
/* styles adaptatifs */
@media (max-width: 799px) { @media (max-width: 799px) {
section > .row { section > .row {
display: flex; display: flex;
@ -56,21 +43,12 @@ section > .row {
justify-content: space-evenly; justify-content: space-evenly;
} }
section > .row > .col3 { section > .row > .col3 {
max-width: 50%; flex: 0 0 50%;
} }
} }
@media (max-width: 799px) and (orientation: portrait) { /*
@media (max-width: 799px) and (orientation: landscape) {
.galleryPicture { .galleryPicture {
max-height: 45vmin; padding: 30px 0;
}
}
@media (min-width: 768px) and (max-width: 799px) and (orientation: portrait) {
section > .row {
display: flex;
flex-wrap: wrap;
justify-content: start;
}
.col3 {
flex: 0 0 25%;
}
} }
*/

View File

@ -1,29 +0,0 @@
/**
* This file is part of DeltaCMS.
* Album Photo /view/index
*/
$(function () {
var taille = "<?php echo $this->getData(['theme','site', 'width']); ?>";
switch(taille)
{
case '75vw':
$('a.galleryPicture').css('height', '170px');
$('div.galleryName').css('font-size', '0.8em');
break;
case '85vw':
$('a.galleryPicture').css('height', '200px');
$('div.galleryName').css('font-size', '0.85em');
break;
case '95vw':
$('a.galleryPicture').css('height', '235px');
$('div.galleryName').css('font-size', '0.9em');
break;
default:
$('a.galleryPicture').css('height', '250px');
$('div.galleryName').css('font-size', '1em');
break;
}
});

View File

@ -4,6 +4,11 @@
$param = ''; $param = '';
include('./module/album/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_album.php'); include('./module/album/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_album.php');
// supprime le fichier inutile de la version 2.5
if (file_exists('module/album/view/index/index.js.php')) {
unlink('module/album/view/index/index.js.php');
}
if($module::$galleries): if($module::$galleries):
$i = 1; $i = 1;
$galleriesNb = count($module::$galleries); $galleriesNb = count($module::$galleries);
@ -14,12 +19,12 @@ if($i % 4 === 1):
<?php endif; ?> <?php endif; ?>
<div class="col3"> <div class="col3">
<a href="<?php echo helper::baseUrl() . $this->getUrl(0); ?>/<?php echo $galleryId; ?>" class="galleryPicture"> <a href="<?php echo helper::baseUrl() . $this->getUrl(0); ?>/<?php echo $galleryId; ?>" class="galleryPicture">
<img src="<?php if ($this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'homePicture']) === null ) { <figure class="album"><img src="<?php if ($this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'homePicture']) === null ) {
echo 'module/album/plugins/thumbnailer.php?img=' . $module::$firstPictures[$galleryId]; } echo 'module/album/plugins/thumbnailer.php?img=' . $module::$firstPictures[$galleryId]; }
else { else {
echo 'module/album/plugins/thumbnailer.php?img=' . $this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'directory']) . '/' . $this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'homePicture']); echo 'module/album/plugins/thumbnailer.php?img=' . $this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'directory']) . '/' . $this->getData(['module', $this->getUrl(0), $galleryId, 'config', 'homePicture']);
} ?>" alt="<?php echo $gallery['config']['name']; ?>"> } ?>" alt="<?php echo $gallery['config']['name']; ?>">
<div class="galleryName"><?php echo $gallery['config']['name']; ?></div> <figcaption><div class="galleryName"><?php echo $gallery['config']['name']; ?></div></figcaption></figure>
</a> </a>
</div> </div>
<?php if($i % 4 === 0 OR $i === $galleriesNb): ?> <?php if($i % 4 === 0 OR $i === $galleriesNb): ?>