Modul Bildergalerie - content_picture_gallery_sd

Alles rund um Module und Plugins in CONTENIDO 4.10.
Antworten
McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Modul Bildergalerie - content_picture_gallery_sd

Beitrag von McHubi » Fr 15. Nov 2019, 11:44

Hallo zusammen,

die beim Beispielmandanten mitgelieferte Bildergalerie "content_picture_gallery" sagte mir nicht wirklich zu, so dass ich sie überarbeitet habe. Die Basis ist geblieben, die Darstellung jedoch komplett anders. Eigenschaften:

* Lightbox
* mehrsprachig
* Bilder pro Vorschauseite festlegbar
* responiv
* zeigt Beschreibung und Copyright an, sofern an den Bilddateien in der Dateiverwaltung hinterlegt. Das Overlay mit der Beschreibung verschwindet, sobald man es anklickt/-tippt oder mit der Maus hovert.

Die Installation ist wie bei jedem anderem Modul auch:

1) Modul mit den weiter unten folgenden Bestandteilen anlegen
2) Modul in eine Vorlage einbinden
3) Im Artikelreiter "Konfiguration" die Anzahl der Bilder pro Vorschauseite festlegen
4) Im Artikelreiter "Editor" die weiteren Konfigurationsmöglichkeiten aufrufen:
- Im Reiter "Verzeichnis" den Ordner der darzustellenden Bilder wählen
- Im Reiter "Allgemein" bei Bedarf die Checkbox "Metadaten laden" aktivieren und die Beschreibungslänge ggf. begrenzen
- Bei Bedarf die Reiter "Filter" und "manuell" nutzen
5) Die Texte lassen sich über den Modulreiter "Übersetzung" anpassen und die Symbole der Schaltflächen direkt in der Modulausgabe im Abschnitt "/* configuration … */
6) Bei Bedarf die Optik über die CSS-Klassen anpassen, auch die Anzahl der Bilder pro Zeile für die verschiedenen Breakpoints/Mediaqueries/Bildschirmklassen lassen sich dort verändern über die Breitenangabe der Vorschaubilder in div.pg_thumb

Vorher angucken? Zum Beispiel hier: https://www.sankt-martin-metzkausen.de/ ... -2019.html

Modul-Eingabe

Code: Alles auswählen

echo 'Bilder pro Galerieseite: <input size="1" type="int" name="CMS_VAR[100]" value="CMS_VALUE[100]">';
Modul-Ausgabe

Code: Alles auswählen

<?php

/**
 * description: content_picture_gallery
 *
 * @package Module
 * @subpackage ContentPictureGallery
 * @author timo.trautmann@4fb.de
 * @copyright four for business AG <www.4fb.de>
 * @license http://www.contenido.org/license/LIZENZ.txt
 * @link http://www.4fb.de
 * @link http://www.contenido.org
 * modifications and enhancements: 2019-11-15, Markus Hübner, Seamless-Design
 */
if(cRegistry::isBackendEditMode()) echo '<p>'.mi18n("LABEL_TEXT").'</p>';
$filelistIndex = 1;
$number_of_pictures_per_page="CMS_VALUE[100]";
if($number_of_pictures_per_page=="")$number_of_pictures_per_page=9;

/* configuration begin */
$pg_page_nav_next_page_symbol="&darr;";
$pg_page_nav_next_page_mouseover=mi18n("preview next page mouseover");
$pg_page_nav_prev_page_symbol="&uarr;";
$pg_page_nav_prev_page_mouseover=mi18n("preview prev page mouseover");
$pg_page_preview_picture_alt_title=mi18n("preview picture alt title text");
$img_copyright_pre=mi18n("lightbox image copyright pre");
$lightbox_nav_button_close_picture_symbol="&Chi;";
$lightbox_nav_button_close_picture_mouseover=mi18n("lightbox nav button close picture mouseover");
$lightbox_nav_button_next_picture_symbol="&rarr;";
$lightbox_nav_button_next_picture_mouseover=mi18n("lightbox nav button next picture mouseover");
$lightbox_nav_button_prev_picture_symbol="&larr;";
$lightbox_nav_button_prev_picture_mouseover=mi18n("lightbox nav button prev picture mouseover");
/* configuration end */

$art = new cApiArticleLanguage();
$art->loadByArticleAndLanguageId(cRegistry::getArticleId(), cRegistry::getLanguageId());
$contentValue = $art->getContent("FILELIST", $filelistIndex);

$filelist = new cContentTypeFilelist($contentValue, $filelistIndex, array());
$files = $filelist->getConfiguredFiles();

$pictures = array();

if (count($files) > 0) {
    foreach ($files as $file) {
        $pathThumb = $file['path'] . '/' . $file['filename'];
        $record = array();
        $record['thumb'] = cApiImgScale($pathThumb, 319, 199);
        $record['lightbox'] = $cfgClient[$client]['upload'] . $pathThumb;
        $record['description'] = $file['metadata']['description'] ?? '';
        $record['copyright'] = $file['metadata']['copyright'] ?? '';
        array_push($pictures, $record);
    }
}

if (count($files) > 0) {
	$i=0;
?>

<script>
  var arr_pictures=new Array();
</script>

<?php
foreach ($files as $file)
{
$pathThumb = $file['path'] . '/' . $file['filename'];
$path_thumb=cApiImgScale($pathThumb, 319, 199);
?>

<script>
var i=<?php echo $i; ?>;
arr_pictures[i]=new Array();
arr_pictures[i]["path_thumb"]="<?php echo $path_thumb ?>";
arr_pictures[i]["path_original"]="<?php echo $cfgClient[$client]['upload'].$pathThumb; ?>";
arr_pictures[i]["description"]="<?php echo $file['metadata']['description'] ?? ''; ?>";
arr_pictures[i]["copyright"]="<?php echo $file['metadata']['copyright'] ?? ''; ?>";
</script>

<?php
$i++;
}
}
?>

<div class="pg_lightbox" id="pg_lightbox"></div>
<div class="gallery">

<script>
var var_pg_page_nav_nps="<?php echo $pg_page_nav_next_page_symbol; ?>";
var var_pg_page_nav_npm="<?php echo $pg_page_nav_next_page_mouseover; ?>";
var var_pg_page_nav_pps="<?php echo $pg_page_nav_prev_page_symbol; ?>";
var var_pg_page_nav_ppm="<?php echo $pg_page_nav_prev_page_mouseover; ?>";
var var_pg_page_prev_pat="<?php echo $pg_page_preview_picture_alt_title; ?>";
var var_img_copyright_pre="<?php echo $img_copyright_pre; ?>";
var var_lnbcps="<?php echo $lightbox_nav_button_close_picture_symbol; ?>";
var var_lnbcpm="<?php echo $lightbox_nav_button_close_picture_mouseover; ?>";
var var_lnbnps="<?php echo $lightbox_nav_button_next_picture_symbol; ?>";
var var_lnbnpm="<?php echo $lightbox_nav_button_next_picture_mouseover; ?>";
var var_lnbpps="<?php echo $lightbox_nav_button_prev_picture_symbol; ?>";
var var_lnbppm="<?php echo $lightbox_nav_button_prev_picture_mouseover; ?>";
var var_number_of_pictures_per_page="<?php echo $number_of_pictures_per_page; ?>";
var var_picture_number=1;
var var_page_number=1;
var var_page_number_prev=1;
document.write('<div class="pg_page" id="pg_page_'+var_page_number+'">');
document.write('<div class="pg_page_nav">&nbsp;</div>');
for (var i = 0, len = arr_pictures.length; i < len; i++) {
if(var_picture_number>var_number_of_pictures_per_page)
  {
  var_picture_number=1;
  var_page_number_prev=var_page_number;
  var_page_number++;
  document.write('<div class="pg_page_nav" onclick="javascript:pg_switch_page(\''+var_page_number_prev+'\',\''+var_page_number+'\');"><span title="'+var_pg_page_nav_npm+'">'+var_pg_page_nav_nps+'</span></div>');
  document.write('</div>');
	  document.write('<div class="pg_page" id="pg_page_'+var_page_number+'" style="max-height: 0px;">');
  document.write('<div class="pg_page_nav" onclick="javascript:pg_switch_page(\''+var_page_number+'\',\''+var_page_number_prev+'\');"><span title="'+var_pg_page_nav_ppm+'">'+var_pg_page_nav_pps+'</span></div>');
  }
document.write('<div class="pg_thumb">');
document.write('<img src="'+arr_pictures[i]["path_thumb"]+'" onclick="javascript:pg_show_hide_picture(\''+arr_pictures[i]["path_original"]+'\',\''+arr_pictures[i]["description"]+'\',\''+arr_pictures[i]["copyright"]+'\',var_img_copyright_pre,\''+i+'\',\''+len+'\',var_lnbcpm,var_lnbnpm,var_lnbppm);" alt="'+var_pg_page_prev_pat+'" title="'+var_pg_page_prev_pat+'"/>');
document.write('</div>');
var_picture_number++;
}
document.write('</div>');
</script>

</div>

<?php
if (cRegistry::isBackendEditMode()) {
    echo "CMS_FILELIST[1]";
}

?>
CSS

Code: Alles auswählen

div.pg_thumb {
height: 9em;
width: 30%;
padding: 0.1em;
padding-bottom: 1em;
margin-right: 1%;
margin-bottom: 1%;
float: left;
text-align: center;
line-height: 10em;
vertical-align: middle;
}
div.pg_thumb:hover {
transition: 0.5s;
}
div.pg_thumb img {
max-width: 100%;
max-height: 100%;
box-shadow: 0px 4px 6px #333;
-moz-box-shadow: 0px 4px 6px #333;
-webkit-box-shadow: 0px 4px 6px #333;
transition: 0.5s;
}
div.pg_thumb img:hover {
box-shadow: 0px 8px 8px #333;
-moz-box-shadow: 0px 8px 8px #333;
-webkit-box-shadow: 0px 8px 8px #333;
transition: 0.5s;
}
div.pg_lightbox {
opacity:0;
width: 0%;
height: 0%;
top: 50%;
left: 50%;
filter: blur(0em);
background-color:rgba(55, 55, 55, 0.95);
background-repeat: no-repeat;
position: fixed;
z-index: 100000;
}
div.pg_lightbox_nav {
float: right;
margin-right: 1em;
margin-top: 1em;
}
div.pg_lightbox_description {
font-size: 1em;
background-color:rgba(255, 255, 255, 0.9);
text-align: center;
padding: 1%;
opacity: 1;
margin-top:1em;
width: 60%;
margin-left: auto;
margin-right: auto;
color: #444444;
}
div.pg_lightbox_description:hover {
opacity: 0;
transition: 1s;
}
div.pg_lightbox_copyright {
position: fixed;
bottom: 0.5em;
right: 0.5em;
font-size: 0.9em;
}
div.pg_close_picture,
div.pg_prev_next_picture {
font-size: 1.5em;
transition: 0.5s;
color: #444444;
border: 1px solid #444444;
border-radius: 0.2em;
background-color: #ffffff;
width: 3em;
margin-bottom: 0.2em;
text-align: center;
}
div.pg_close_picture:hover,
div.pg_prev_next_picture:hover {
color: #ffffff;
background-color: #444444;
transition: 0.5s;
}
div.pg_thumb:hover,
div.pg_close_picture:hover,
div.pg_prev_next_picture:hover{
cursor: pointer;
}
div.pg_page {
margin-bottom: 3em;
overflow: hidden;
max-height: 2000px;
}
div.pg_page_nav {
clear:both;
font-size: 1.5em;
font-weight: 900;
text-align: center;
margin-top: 0.1em;
margin-bottom: 1em;
margin-left: -6%;
}
div.pg_page_nav:hover {}
div.pg_page_nav span {
text-align: center;
border: 1px solid #444444;
border-radius: 0.2em;
padding-left: 1em;
padding-right: 1em;
padding-bottom: 0.2em;
background-color: #ffffff;
color: #444444;
transition: 1s;
}
div.pg_page_nav span:hover {
background-color: #444444;
color: #ffffff;
transition: 0.5s;
cursor: pointer;
}
@media only screen and (max-width: 39em) {
div.pg_thumb {
width: 44%;
}
}
JS

Code: Alles auswählen

function pg_show_hide_picture(var_img_src,var_img_desc,var_img_copyright,var_img_copyright_pre,var_current,var_len,var_lnbcpm,var_lnbnpm,var_lnbppm)
{
var var_pg_lightbox_innerhtml="";
var_current=parseInt(var_current);
var_len=parseInt(var_len);
if(var_img_src=="hide")
  {
  document.getElementById('pg_lightbox').style.opacity="0";
  document.getElementById('pg_lightbox').style.height=0+"%";
  document.getElementById('pg_lightbox').style.width=0+"%";
  document.getElementById('pg_lightbox').style.top=50+"%";
  document.getElementById('pg_lightbox').style.left=50+"%";
  document.getElementById('pg_lightbox').style.transition="1s";
  document.getElementById('pg_lightbox').innerHTML='';
  }
  else
    {
    document.getElementById('pg_lightbox').style.height=100+"%";
    document.getElementById('pg_lightbox').style.width=100+"%";
    document.getElementById('pg_lightbox').style.top=0+"%";
    document.getElementById('pg_lightbox').style.left=0+"%";
    document.getElementById('pg_lightbox').style.backgroundImage="url('"+var_img_src+"')";
    document.getElementById('pg_lightbox').style.backgroundSize="contain";  
    document.getElementById('pg_lightbox').style.backgroundPosition="center center";
    document.getElementById('pg_lightbox').style.opacity="1";
    document.getElementById('pg_lightbox').style.transition="1s";
    var var_current_b=var_current-1*1;
    var var_current_c=var_current+1*1;
    if(var_current_b<0)
      {
      var var_current_b=0*1;
      var var_current_c=1*1;
      }
    if(var_current_c>=var_len)
      {
      var var_current_c=var_len-1*1;	
      }

    var_pg_lightbox_innerhtml='<div class="pg_lightbox_nav"><div class="pg_close_picture" onclick="javascript:pg_show_hide_picture(\'hide\',\'\',\'\',\'\',\'\');" title="'+var_lnbcpm+'">'+var_lnbcps+'</div><div id="pg_next_picture" class="pg_prev_next_picture" onclick="javascript:pg_show_hide_picture(\''+arr_pictures[var_current_c]["path_original"]+'\',\''+arr_pictures[var_current_c]["description"]+'\',\''+arr_pictures[var_current_c]["copyright"]+'\',var_img_copyright_pre,\''+var_current_c+'\',\''+var_len+'\',var_lnbcpm,var_lnbnpm,var_lnbppm);" title="'+var_lnbnpm+'">'+var_lnbnps+'</div><div id="pg_prev_picture" class="pg_prev_next_picture" onclick="javascript:pg_show_hide_picture(\''+arr_pictures[var_current_b]["path_original"]+'\',\''+arr_pictures[var_current_b]["description"]+'\',\''+arr_pictures[var_current_b]["copyright"]+'\',var_img_copyright_pre,\''+var_current_b+'\',\''+var_len+'\',var_lnbcpm,var_lnbnpm,var_lnbppm);" title="'+var_lnbppm+'">'+var_lnbpps+'</div></div>';
      if(var_img_desc!="") var_pg_lightbox_innerhtml+='<div id="pg_description" class="pg_lightbox_description" onclick="javascript:show_hide(\'pg_description\');">'+var_img_desc+'</div>';
      if(var_img_copyright!="") var_pg_lightbox_innerhtml+='<div id="pg_copyright" class="pg_lightbox_copyright">'+var_img_copyright_pre+' '+var_img_copyright+'</div>';
    document.getElementById('pg_lightbox').innerHTML=var_pg_lightbox_innerhtml;

    if(var_current==0) document.getElementById('pg_prev_picture').style.display="none";
    if(var_current==var_len-1) document.getElementById('pg_next_picture').style.display="none";
    }
}
function pg_switch_page (var_page_hide,var_page_show)
{
document.getElementById('pg_page_'+var_page_hide).style.maxHeight="0px";
document.getElementById('pg_page_'+var_page_hide).style.transition="1s";
document.getElementById('pg_page_'+var_page_show).style.maxHeight="2000px";
if(var_page_show!=1) document.getElementById('pg_page_'+var_page_show).style.marginTop="-3em";
document.getElementById('pg_page_'+var_page_show).style.transition="1s";
}
Edit 08.08.2023:
?? '' ergänzt in folgenden Zeilen der Modul-Ausgabe:

Code: Alles auswählen

[...]
$record['description'] = $file['metadata']['description'] ?? '';
$record['copyright'] = $file['metadata']['copyright'] ?? '';
[...]	
arr_pictures[i]["description"]="<?php echo $file['metadata']['description'] ?? ''; ?>";
arr_pictures[i]["copyright"]="<?php echo $file['metadata']['copyright'] ?? ''; ?>";
[...]
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Antworten