Home

PIWIGO Navigatie

 

Piwigo::Plugins

Plugins

Piwigo is makkelijk naar uw wensen aan te passen door de vele plugins (apps).
Hieronder een overzicht van plugins die ik in mijn galerie geïnstalleerd heb.
Voor nu gewoon installeren en activeren, verderop komen ze nog wel ter sprake als ze toegepast worden.

De geïnstalleerde plugins zijn te vinden onder Plugins > Beheer > Pluginlijst.
Op deze pagina worden zowel de geïnnstalleerde- als de geactiveerde plgins getoond, met de opties de plugins te activeren, deactiveren en verwijderen.
Voor het nader configureren van de plugins klik op 'Instellingen'

Onder de tab 'Andere plugins' volgt het overzicht van alle beschikbare plugins en de optie ze te installeren.

In deze pagina worden de door mij in 2017 geïnstalleerde plugins in Piwigo 2.7.4 met thema 'Pure_clear_blue' beschreven.
De plugins zijn op een enkele na thema onafhankelijk en zijn dus hetzelfde zowel in 'Pure_clear_blue' als in 'elegant'.
Waar dit niet het geval is wordt hiervan afzonderlijk vermelding gemaakt.

Naar index

Advanced Menu Manager

Met Advanced Menu Manager kunt u het uiterlijk van het menu van uw galerie makkelijk veranderen.
Voor deze plugin is de installatie en activatie vereist van de plugin: Grum Plugins Classes.3

De 'Advance Menu Manager' plugin wordt in deze installatie gebruikt om:

Verberg default menublokken

Plugins > Advanced Menu Manager > Menu Management > Zichtbaarheid & Volgorde Menu's:

Voor het verbergen van 'Willekeurige Foto' (Random Pictures) en 'Links' in de desbetreffende 'toegankelijkheids velden' alle mogelijke gebruikers verwijderen.
Zet de gewenste volgorde van de menu's door middel van 'drag and drop'.


Verberg van de blokken 'Menu' en 'Specials' de default opties

Plugins > Advanced Menu Manager > Menu Management > Inhoud voor 'Menu' & 'Specials' menu:

Voor het verbergen van de opties van deze alle mogelijke gebruikers verwijderen.
Doe dit bij:
-Labels
-Over
-Meldingen
-Meest bezocht
-Random Pictures
-Recent Categories

Zet de gewenste volgorde van de menu's door middel van 'drag and drop'.

Naar index

Batch Downloader

Sta gebruikers toe om meerdere afbeeldingen tegelijk te downloaden als ZIP.

Met de installatie van deze plugin komt er een icon beschikbaar op alle fotoalbumpagina's. Hiermee kunnen alle foto's in de huidige selectie in een zipbestand gedownload worden. De gebruiker heeft daarbij de keuze welk beschikbaar formaat gedownload wordt. Bij grotere volumes worden er meerdere zipbestanden aangemaakt.

Huidige selectie
Een selectie kan op meerdere manieren tot stand komen:

  1. Een fysiek album in de Album tree. Als we bijvoorbeeld het album 2014 Wandelen bekijken dan bevat deze 171 foto's en zal de download selectie dus 171 foto's bevatten
  2. Virtueel album 'Recente foto's'. De hoeveelheid foto's is hier afhankelijk van hoeveel foto's de laatste keer tegelijk geladen zijn geweest.
  3. Virtueel album 'Aanmaakdatum' met een selectie via de 'Kalender' optie
  4. Virtueel album 'Zoekresultaten'. Hier kunnen we de hoeveelheid reduren door 'slim' te zoeken met de diverse filters.
  5. Virtueel album 'Jouw favorieten'. Voeg in de Foto Pagina met de gewenste deze foto toe aan het favorieten album. In dit geval zal de selectie alleen de gewenste foto's bevatten.
  6. Met plugin 'User Collections' kunnen aangemelde gebruikers afbeeldingen uit de galerie selecteren en ze opslaan in verzamelingen - een geavanceerde "favorieten"-functie.

Configuratie Batch Downloader

Maak de instellingen als in onderstaande afbeelding

Eigen Icon

De met de plugin meegeleverde icon is naar mijn mening niet duidelijk.
Heb er zelf één aangemaakt en geplaatst in ../piwigo/plugins/BatchDownloader/template/images/zip.png (Bewaar het origineel als zip.png.org)
Zie Piwigo::Wijzigingen > Hacks > Ikonen bewerken

Naar index

Dynamic Recent Period

Bij het weergeven van het dynamische album 'Recente Foto's' worden de foto's verzameld uit de gehele galerie op basis van de 'upload' datum (synchronisatie). Ook foto's in de 'hidden' albums worden geselecteerd. Per default worden de foto's geselecteerd die de afgelopen 7 dagen geladen werden.
Als er de afgelopen week geen nieuwe foto's geladen zijn is dus de selectie leeg.

Met de plugin 'Dynamic Recent Period' kunnen we bepalen van hoeveel 'uploaddagen' we foto's tonen.
Plugins > Dynamic Recent Period

Met de instelling van 2 dagen worden alle foto's van de meest recente 2 'uploaddagen' geselecteerd ongeacht hoe hoelang die geleden zijn en hoever die 2 dagen uit elkaar liggen.
Als er regelmatig grote hoeveelheden foto's per uploaddag geladen worden kan het beter zijn het aantal dagen naar '1' te zetten.

Naar index

Exif view

Vertaalt EXIF gegevens in lokale menselijke taal. Overeenkomstig EXIF specificatie 2.2, details in http://www.exif.org. Gemakkelijk uit te breiden.

 

Zie ook Piwigo::Wijzigingen sectie EXIF data human readable met de benodigde aanvullingen op de standaard configuratieinstellingen.

Naar index

Extended Description

Deze plugin levert functies die in de meeste tekstvakken van Piwigo geplaatst kunnen worden:

Met de installatie en activatie van Extended description wordt deze opgenomen in het Plugins Menu.
Als we de Beheer > Plugins > Extended Description openen zien we onderstaand Documentatie overzicht met links naar uitgebreide voorbeelden.

In de hier beschreven Piwigo installatie maken we vooralsnog alleen gebruik van de optie 'Verberg Elementen'
Zie sectie Piwigo::Inrichten > Galerij (Home) gelinkte miniaturen en Albums verbergen van Galerij en Menu-tree

Note: Naast het plaatsen van bovenstaande speciale Extended Description code in het naamveld, kan er ook standaard html code in het Beschrijvingsveld van een foto of albumminiatuur geplaatst worden. Zie hiervoor ook Piwigo::Inrichten > Galerij (Home) gelinkte miniaturen.

Naar index

Fotorama

Fotorama is een eenvoudige maar krachtige jQuery diapresentatie met de optie van weergave op volledig scherm.

Configuratie
Na de installatie en activatie voeren we de verdere configuratie uit in Beheer > Plugins > Fotorama

Vink 'Alleen volledig scherm modus' niet aan. De hedendaagse browsers staan dit niet toe en de presentatie zal slechts openen in de volledige browserwindow.
Het openen in volledig scherm moet na het starten van de presentatie op de hand gebeuren.
Fotorama kiest in fullscreen mode de maximum in Beheer > Configuratie > Opties > Fotogroottes 'aangevinkte' geschaalde maat. Zonodig wordt deze alsnog gegenereerd. Dit zou geen vertraging op moeten leveren (binnen de ingestelde 4 seconden weergavetijd).

Met deze icon kan op album- en fotopagina's de diavoorstelling gestart worden. Alle foto's in het huidige album worden dan in de diavoorstelling getoond.

Aangepaste iconen
De bij de Fotorama-plugin meegeleverde iconen zijn door mij aangepast door het bewerken van het bestand ../piwigo/plugins/Fotorama/fotorama/fotorama@2x.png (na eerst het origineel opgeslagen te hebben als fotorama.png.org). Zie ook Piwigo:: Wijzigingen > Hacks > Ikonen bewerken

 

Van Naar

Naar index

Grum Plugins Classes.3

Deze Classes modules worden door verschillende plugins gebruikt. Bij deze installatie voorlopig alleen maar door Advanced Menu Manager

Naar index

LocalFiles Editor

Bij het modificeren/aanpassen van Piwigo is het niet de bedoeling dat we de de core bestanden 'hacken'. Er is in voorzien dat we de te wijzigen scripts opslaan als locale bestanden en hierin de wijzigingen aanbrengen. Het gewijzigde script wordt dan in plaats van het originele script uitgevoerd. Zie ook de Piwigo documentatie

Na installatie en activatie is LocalFiles Editor beschikbaar in het menu Beheer > Plugins > LocalFiles Editor

De plugin LocalFiles Editor voorziet in het vanuit het Beheer (administratie) bewerken van de volgende locale scripts:

Op deze plaats worden niet verder ingegaan op de eigen modificaties die gemaakt zijn met de Local Files Editor maar in detail behandeld in de diverse secties waar de Editor gebruikt wordt.

Naar index

Posted Date Changer

Verander in de batch manager de datum waarop de foto's geplaatst zijn.

Het dynamische album 'Recente foto's' selecteert foto's op basis van de de datum waarop foto's geplaatst zijn (upload datum).
Na bijvoorbeeld herladen van oude foto's worden deze foto's ten onrechte als recent aangemerkt.
Met de 'Posted Date Changer' kunnen we de uploaddatum van een selectie in de 'Foto's Bulk Beheerder' wijzigen naar een gewenste datum in het verleden.

Naar index

PWG Stuffs

Voeg modules aan het album toe

Na installatie en activatie is PWG Stuffs beschikbaar in het menu Beheer > Plugins > PWG Stuffs

Beschikbare module blokken:

In deze Piwigo installatie gebruiken we PWG Stuffs om een loginblok op de Fotogalerij hoofdpagina te plaatsen als geen publieke albums beschikbaar zijn.

Configuratie
Configureer het inlog blok als in onderstaande afbeelding.

In Piwigo::Wijzigingen > Hacks > PWG-Stuffs loginblok aanpassen wordt beschreven hoe het blok aanvullend gemodificeerd wordt door middel van een 'hack' van de template.
Na toepassing van deze 'hack' ziet het inlogblok er als volgt uit:

Naar index

rightClick

rightClick schakelt het rechtermuisknop-menu uit bij de foto's.
Gebruikers met het "beheerder" privacy-niveau kunnen nog wel hun rechtermuisknop gebruiken.

Note:
Houd er a.u.b. rekening mee dat rightClick geen absolute beveiliging tegen het kopiëren van afbeeldingen is. Zie ook sectie Piwigo::Beveiliging

Naar index

Rotate Image

Hiermee kunnen afbeeldingen gedraaid worden (roteren) op de achtergrond (Foto's Bulk Beheer)

Naar index

RV Menu Tree

Vervangt de categoriën in the menu balk door een mooiere versie (javascript).
Zie Piwigo::Wijzigingen > Hacks > RV-Menutree verborgen mappen niet tonen voor het voorkomen dat verborgen mappen toch in RV Menu Tree getoond worden

Naar index

Thumbnail Tooltip

Hiermee kan de inhoud van de tooltip bij afbeeldingen in de albumpagina's gewijzigd worden. De Piwigo default is de bestandsnaam van de foto.

Selecteer alleen 'Omschrijving'

De weergave van de tooltip wijzigen wij ten eerste in de eigen lokale template 'elegant_thumbnails.tpl'. Zie hiervoor Piwigo::Wijzigingen>Templates>Tooltip CSS-methode
en ten tweede met een toevoeging in de lokale stylesheet 'elegant'. Zie hiervoor Piwigo::Wijzigingen > Tooltip CSS methode

Naar index

Share Album

Share Album is een Piwigo plug-in waarmee albums gedeeld kunnen worden. Voor elk privé album kan een unieke URL gegenereerd worden, die je kunt delen met gebruikers die je genoeg vertrouwt om dat album te bekijken.
Zie Piwigo::Albums Inrichten sectie Deel album met een link voor het gebruik van ShareAlbum

De Share Album functie is beschikbaar in privé albums middels een Share Album Icon .

Met deze functie kun je:

Installatie
Piwigo > Beheer > Plugins > Beheer > Andere Plugins > ShareAlbum > Installeer
Piwigo > Beheer > Plugins > Beheer > Plugin Lijst > ShareAlbum > Activeer

Configuratie
Piwigo > Beheer > Plugins > Share Album > Configuratie

Selecteer gewenste instellingen en klik 'Bewaar instellingen'.

Onder de tab 'Shared Albums' worden tzt de gedeelde mappen getoond:

Album Delen

Alleen de beheerder (Admin) kan een album delen en de unieke URL genereren.
Ingelogd als beheerder is de ShareAlbum icon beschikbaar boven aan de pagina van een privéalbum.

Door op dit icon te klikken opent er een dropdown menu met de optie 'Deel dit album'

Na dit aan te klikken verschijnt de boodschap dat het gelukt is en dat je opnieuw de icon aan moet klikken voor het tonen van de unieke publieke link (URL).
Deze link brengt een verbinding tot stand met een nieuw gegenereerde gebruiker (met een niet te raden naam en veilig wachtwoord) die toegangsrechten heeft gekregen tot het te delen album.

Het dropdown menu heeft de volgende opties:

Tot zover de ShareAlbum plugin zoals deze aangeleverd wordt.

Het principe werkt maar we brengen enkele verbeteringen aan.

Naar index

Privacy niveau van share-gebruiker

Als de link zoals hiervoor gegenereerd is en verstuurd wordt, kan degene die de link ontvangen heeft deze in zijn browser invoeren.
Deze gebruiker zal dan toegang krijgen tot het gedeelde album.

Aan de foto's worden bij het synchroniseren (laden) verschillende 'privacy niveaus' toegekend.
De share-gebruiker moet daarna wel voldoende 'privacy niveau' toegewezen worden waarmee bepaald wordt welke foto's hij/zij al dan niet te zien zal krijgen.

Wie kan deze foto zien gebruiker privacy niveau database level
iedereen iedereen 0
beheerder, familie, vrienden en contacten contacten 1
beheerder, familie en vrienden vrienden 2
beheerder en familie familie 4
beheerder beheerder 8

Share-gebruiker krijgt per default een 'privacy niveau'
Bij het genereren van de share-gebruiker wordt het 'privacy niveau' gezet en wel gelijk aan het laagst voorkomende niveau van foto's in het album.

Als er foto's met een hoger 'privacy niveau' in het te delen album staan die we toch willen tonen, dan moet het record van de share-gebruiker alsnog op de hand aangepast worden.

Naar index

Sta download originele foto toe via configuratie

Als we de share-gebruiker willen toestaan een originele foto te downloaden moeten we eerst de share-gebruiker toegang verlenen tot het origineel.
Piwigo > Beheer > Gebruikers > Beheer > Gebruikersnaam share-xxxxxxx > Wijzig
Vink 'Hoge kwaliteit (origineel) ingeschakeld' aan en werk de gebruiker bij.

Nu zal op de fotopagina het download icon weergegeven worden.

ShareAlbum Configuratie
De instelling van de share-gebruiker kan middels de hierna beschreven hack ook verzorgd worden via het ShareAlbum configuratiescherm.

Door de extra optie 'Allow Share Album user to download original image' toe te voegen aan het configuratiescherm.

Voor deze extra optie bewerken we het bestand ../piwigo/plugins/ShareAlbum/admin/template/config.tpl (na een kopie opgeslagen te hebben met extentie .org)
Voeg na regel 67 de regel 68 t/m 74 in:

57     <li>
58       <label>
59         <b>{'Number of displayed images per page for shared albums'|translate} : </b>
60       </label>
61        <select name="option_pics_per_page">
62                 {foreach from=$nb_image_page_values key=mKey item=mItem}
63                 <option value="{$mItem}" {if $sharealbum.option_pics_per_page==$mItem}selected{/if}>{$mItem}</option>
64                 {/foreach}
65                 </select>
66       <a class="icon-info-circled-1" title="{'Defines the number of maximum images are displayed per page for shared albums.
                       This setting applies to all shared albums'|translate}"></a>
67     </li>
68 {* Hack Ben Makkink 30-06-2020 Extra optie voor picture download *}
69     <li>
70       <label>
71         <input type="checkbox" name="option_download_picture" value="{$sharealbum.option_download_picture}"
                 {if $sharealbum.option_download_picture}checked="checked"{/if}>
72         <b>{'Allow Share Album user to download original image'|translate}</b>
73       </label>
74       <a class="icon-info-circled-1" title="{'When checked, the ShareAlbum-user is granted access to the original 
                 (high quality) image making it available for download'|translate}"></a>
75     </li>
76 {* Einde hack Extra optie voor picture download *}

Voor het uitlezen van de op het configuratiescherm geselecteerde optie en het opslaan ervan in de array in de database bewerken we het bestand ../piwigo/plugins/ShareAlbum/admin/config.php na een kopie opgeslagen te hebben met extentie .org)
Voeg regel 17 toe: 

8 // save config
9 if (isset($_POST['save_config']))
10 {
11   $conf['sharealbum'] = array(
12     'option_hide_menus' => isset($_POST['option_hide_menus']),
13         'option_replace_breadcrumbs' => isset($_POST['option_replace_breadcrumbs']),
14         'option_show_login_menu' => isset($_POST['option_show_login_menu']),
15         'option_remember_me' => isset($_POST['option_remember_me']),
16         'option_pics_per_page' => $_POST['option_pics_per_page'],
17     'option_download_picture' => isset($_POST['option_download_picture']),
18     'option_enable_powerusers'=>isset($_POST['option_enable_powerusers']),
19     'option_recursive_shares'=>isset($_POST['option_recursive_shares'])
20     );

De opgeslagen configuratieinstellingen worden nu bij het genereren van een nieuwe share-gebruiker uitgelezen voor het invoegen in het gebruikersrecord.
Bewerk hiervoor ../piwigo/plugins/ShareAlbum/main.inc.php
De code in groene highlight is de toe te voegen code.

103 /**
104  * plugin initialization
105  *   - check for upgrades
106  *   - unserialize configuration
107  *   - load language
108  */
109 function sharealbum_init()
110 {
111   global $conf;
112   global $user;
113
114   // load plugin language file
115   load_language('plugin.lang', SHAREALBUM_PATH);
116
117   // prepare plugin configuration
118   $conf['sharealbum'] = safe_unserialize($conf['sharealbum']);
119
120 //Hack Ben Makkink 18-12-2020
121 // Get setting of 'allow download original' from ShareAlbum config
122 $allow_original = "false";
123 if($conf['sharealbum']['option_download_picture']) {
124 $allow_original = "true"; }
125 //Einde Hack
126
127   // Shared mode detection
...

...
176     case SHAREALBUM_URL_ACTION_CREATE:
177        if (!sharealbum_is_poweruser($user['id']))
178            die('Hacking attempt!');
179          sharealbum_create($sharealbum_cat,$allow_original);
180          redirect(PHPWG_ROOT_PATH.'index.php?/category/'.$sharealbum_cat.'&'.SHAREALBUM_URL_MESSAGE.'='.SHAREALBUM_URL_MESSAGE_SHARED);
181          break;

Op regel 177 in bovenstaande code wordt de functie sharealbum_create() aangeroepen met als argementen $sharealbum_cat (albumnummer) en $allow_original (true of false).

Breng in het bestand ../piwigo/plugins/ShareAlbum/include/sharealbum_functions.inc.php de volgende toevoegingen (groen) aan.
De secties met gele highlight bevatten de code voor het zetten van het share-gebruiker privacylevel.

217 /**
218  * Creates a share for an album
219  * @cat_id id of the album on which a share is applied
220  */
221 function sharealbum_create($cat_id,$enabled_high) {
...

...
246          // Set user privacy level to lowest level of images in share album
247          // Get minimum privacy level
248          $result = pwg_query("
249                   SELECT MIN(`level`) AS min_level
250                   FROM ".IMAGES_TABLE."
251                   WHERE `storage_category_id` = '".$cat_id."'
252          ");
253
254
255         if (pwg_db_num_rows($result)) {
256                 $row = pwg_db_fetch_assoc($result);
257                 $privacy_level = $row['min_level'];
258
259                 if ($privacy_level != null) {
260                         // Set user level and enabled high in USER_INFOS_TABLE
261                         pwg_query("
262                                 UPDATE `".USER_INFOS_TABLE."`
263                                 SET `level` = ".$privacy_level.",
264                                     `enabled_high` = '".$enabled_high."'
265                                 WHERE `user_id` = ".$new_user_id);

Naar index

Map downloaden met BatchDownloader

Naast de hierboven toegevoegde optie voor het downloaden van individuele originelen kan er door de beheerder ook voor gekozen worden alle foto's in het Share Album down te laten loaden.

Dit is echter geen instelling die te maken is in Share Album.
Dit moet gebeuren in de BatchDownloader configuratie met het toevoegen van de 'sharealbum' groep
Piwigo > Beheer > Plugins > Batch Downloader > Configuratie

Voor de duidelijkheid wordt hiervoor in de Share Album Configuratie een regel toegevoegd met deze informatie.

Voor dit informatieblok bewerken we het bestand ../piwigo/plugins/ShareAlbum/admin/template/config.tpl en voegen de code toe direct na de eerder gemaakte hack voor Hoge Kwaliteit inschakelen:

77 {* Hack Ben Makkink 30-06-2020 Messageblok voor BatchDownload *}
78 <li>
79 <img src="plugins/BatchDownloader/template/images/zip.png" />Allow Batch Downloader
        to download a Share Album by adding the User Group <strong>'sharealbum'</strong>
        in the Batch Downloader Configuration.<br />
80 <strong>Piwigo &gt; Administration &gt; Plugins &gt; Batch Downloader &gt; Configuration<strong>
81 </li>
82 {* Einde hack Messageblok voor BatchDownload *}

Naar index

Piwigo-VideoJS

De Piwigo Plugin Piwigo-VideoJS is een integratie van de Open-Source VideoJS Player in Piwigo waarmee video's afgespeeld kunnen worden in de HTML5 <video> tag.

Ondersteunde formaten zijn: webm, webmv, ogv, m4v en mp4.

De Piwigo Videojs plugin heeft behalve het afspelen van video's meerdere functies zoals:

  1. Synchronisatie en Weergave van de EXIF metadata
  2. Integratie met de Piwigo Batch Manager
  3. Integratie met de Piwigo Foto Edit functie
  4. Pas de HTML VideoJS speler aan met een Configuratie Paneel
  5. Aanmaken van een representative/poster klikplaatje.

Voor de installatie van VideoJS in Piwigo volgen we de piwigo-videojs wiki documentatie van de auteur xbgmsharp op Github

Naar index

Prepareer Piwigo

Gebruik de Local Files Editor: Beheer > Plugins > LocalFiles Editor > Lokale Configuratie

  1. Sta het laden van videobestanden toe.

    Voeg toe in Lokale Configuratie: $conf['upload_form_all_types'] = true;

    Als we de video's net zoals foto's laden met de FTP-methode en dus het upload formulier niet gebruiken dan is deze toevoeging niet nodig.
     
  2. Sta het gebruik van speciale leestekens zoals een spatie in de videobestandsnaam toe.

    Voeg toe in Lokale Configuratie: $conf['sync_chars_regex'] = '/^[a-zA-Z0-9-_. ]+$/';

    Dit is al toegevoegd tijdens het opzetten van Piwigo in de sectie Piwigo::Aanpassen Desktop Thema: Toegestane tekens by synchronisatie
     
  3. De EXIF View plugin vertaalt EXIF gegevens naar lokale menselijke taal. De plugin gebruikt hierbij de in de Lokale Configuratie toegevoegde regels. Deze toevoegingen hebben we voor de foto's al gedaan in de sectie Piwigo::Aanpassen Desktop Thema: EXIF data menselijke taal
    Voor video voegen we de items (zonder hoofdletter) toe aan de array die er vervolgens zo uit ziet: 
    // Convert EXIF values to human readable localized values.
// Corresponds to EXIF specification 2.2, details in http://www.exif.org.
// Install and Activate EXIF plugin. Extend your configuration as below
// Voor video voeg regels toe niet beginnend met hoofdletter:
$conf['show_exif_fields'] = array(
  'Make',
  'Model',
  'ExifVersion',
  'Software',
  'DateTimeOriginal',
  'FNumber',
  'ExposureBiasValue',
  'FILE;FileSize',
  'ExposureTime',
  'Flash',
  'ISOSpeedRatings',
  'FocalLength',
  'FocalLengthIn35mmFilm',
  'WhiteBalance',
  'ExposureMode',
  'MeteringMode',
  'ExposureProgram',
  'LightSource',
  'Contrast',
  'Saturation',
  'Sharpness',
  'bitrate',
  'channel',
  'date_creation',
  'display_aspect_ratio',
  'duration',
  'filesize',
  'format',
  'formatprofile',
  'codecid',
  'frame_rate',
  'latitude',
  'longitude',
  'make',
  'model',
  'playtime_seconds',
  'sampling_rate',
  'type',
  'resolution',
  'rotation',
  );

Naar index

Prepareer Server

Piwigo-VideoJS heeft de hierna volgende 'externe tools' niet nodig om video's af te spelen maar ze worden door Piwigo-VideoJS gebruikt voor het creëren van de posters (klikplaatjes) en thumbs (miniaturen) en het parsen (invullen) van de Metadata.

  1. FFMPEG voor creatie van posters en thumbs:

    # yum install ffmpeg (clearos-contribs repository)

    Dit installeert ook FFPROBE voor metadata parsing.
     
  2. MEDIAINFO voor leveren Metadata, extra metadata aanvullend op die van FFPROBE.

    # yum install mediainfo (clearos-epel repository)
     
  3. EXIFTOOL resulteert niet in aanvullende metadata en is door mij niet geïnstalleerd.

Beveiliging directe URL's

Om te verzorgen dat de originele foto's buiten Piwigo om niet via een directe URL te benaderen zijn blokkeren we de toegangs tot de map ../piwigo/galleries met de originelen.
Zie hiervoor Piwigo::Beveiliging Apache Directives voor Piwigo
De VideoJS plugin heeft echter wel directe toegang tot de video's nodig en hiervoor moeten we helaas de beveiliging voor de video's opheffen.
Omdat ik alleen video's toe zal voegen met het formaat 'mp4' maak ik daarom alleen een uitzondering voor mp4

Zoek in het server bestand /etc/httpd/conf.d/piwgo.conf de regels:
<Directory /var/www/html/piwigo/galleries>
 Require all denied
</Directory>

En vervang deze door: 
<Directory /var/www/html/piwigo/galleries>
 Order Allow,Deny
 Require all denied
 <FilesMatch "\.(?:mp4|m4v)$">
  Order Deny,Allow
  Require all granted
 </FilesMatch>
</Directory>

Naar index

Activeren, configuratie en synchronisatie

Na de voorbereidingen van Piwigo en de Server installeren en activeren we VideoJS:

  1. Piwigo > Beheer > Plugins > Beheer > Andere Plugins > VideoJS > Installeer
  2. Piwigo > Beheer > Plugins > Beheer > Plugin Lijst > Niet actieve Plugins > VideoJS > Activeer

Naar index

Configuratie
Piwigo > Beheer > Plugins > VideoJS > Configuratie

Piwigo-VideoJS is nu bijna klaar voor het laden van mp4 video's.

BUG 1:
Bij de VideoJS synchronisatie doet zich de eerste maal echter een probleem voor. Zie Bug: Synchronisatie foutmelding

BUG2:
Na de upgrade naar PHP 8.0 ontstond er een waarschuwing bij 'RESOLUTION'. Zie Bug: Resolution switch foutmelding

Naar index

Synchroniseer
Piwigo > Beheer > Plugins > VideoJS > Synchroniseer

Hieronder de instellingen zoals door mij gebruikt:

Naar index

Bug: Synchronisatie foutmelding

Zie voor het laden van de video's Piwigo::Albums Inrichten Video's Laden

Een nieuwe video wordt toegevoegd aan Piwigo door de gebruikelijke synchronisatie zoals bij de foto's.
Vervolgens moet er een VideoJS synchronisatie uitgevoerd worden voor het importeren van de Meta Data en het aanmaken van de posters (klikplaatjes) en thumbs (miniaturen).

Bij de VideoJS synchronisatie loopt de zaak vast met een foutmelding:

  1. Om dit te reconstrueren plaatsen we (tijdelijk) een korte video in /var/www/html/piwigo/galleries en deze laden we in Piwigo d.m.v. Piwigo > Beheer > Hulpmiddelen > Synchroniseer
  2. Vervolgens voeren we de VideoJS synchronisatie uit d.m.v Piwigo > Beheer > Plugins > VideoJS > Synchroniseer

Bij deze synchronisatie loopt het proces vast met een foutmelding (Zie voor deze bug ook: Error Creating Poster en/of Video JS Warnings and Notice )

Warning: array_merge(): Argument #1 is not an array in /var/www/piwigo/plugins/piwigo-videojs/admin/admin_sync.php on line 53
Warning: array_merge(): Argument #1 is not an array in /var/www/piwigo/plugins/piwigo-videojs/admin/admin_sync.php on line 78
Notice: Undefined index: output in /var/www/piwigo/plugins/piwigo-videojs/admin/admin_sync.php on line 66

Bij de initiele activatie van VideoJS wordt een tafel 'pi_image_videojs' toegevoegd in Piwigo MariaDb. Hierin worden de video Metadata opgeslagen. Dit werkt als gewenst.
Maar er worden ook enkele nieuwe records toegevoegd aan de tafel 'pi_config' zijnde:
- vjs-customcss (opslag eigen css)
- vjs-conf (configuratieinstellingen van de player)
- vjs-sync met in een array de Piwigo-VideoJS synchronisatie instellingen.
Dit laatste record wordt pas aangemaakt als er voor de eerste keer gesynchroniseerd wordt en door een fout in de code krijgt het record vjs-sync de waarde NULL, terwijl de synchronisatiefunctie een array verwacht.

Deze bug lossen we op door na deze eerste synchronisatiepoging in phpMyAdmin een update uit te voeren in de tabel pi_config in het record vjs-sync:

UPDATE piwigo.pi_config
  SET pi_config.value='a:0:{}'
  WHERE pi_config.param='vjs_sync';

Het record bevat nu een (tijdelijke) dummy array en bij de eerstvolgende Piwigo-VideoJS synchronisatie worden hierin de synchronisatie instellingen opgeslagen.

Naar index

Bug: Resolution switch foutmelding

Na de upgrade naar PHP 8.0 volgde er onderaan de admin configuratiepagina een foutmelding:

Er is hier sprake van een niet gedefinieerde variabele (key) in een array.
Bij nader onderzoek bleek in bestand ../piwigo/plugins/piwigo-videojs/admin/admin-config.php in de 'plugins' array de variabele 'resolution' niet gedefinieerd.
Bij de PHP versies tot en met 7.4 leverde dat nog geen probleem op omdat deze nog minder strict waren.

Met een Hack van het bestand admin-config.php voegen we de missende definitie voor 'resolution' toe. Bewaar eerst een kopie admin-config.php.org

78 // Update conf if submitted in admin site
79 if (isset($_POST['submit']) && !empty($_POST['vjs_skin']))
80 {
81         // keep the value in the admin form
82         $conf['vjs_conf'] = array(
83                 'skin'          => $_POST['vjs_skin'],
84                 'max_height'    => $_POST['vjs_max_height'],
85                 'preload'       => $_POST['vjs_preload'],
86                 'controls'      => get_boolean($_POST['vjs_controls']),
87                 'autoplay'      => get_boolean($_POST['vjs_autoplay']),
88                 'loop'          => get_boolean($_POST['vjs_loop']),
89                 'volume'        => $_POST['vjs_volume'],
90                 'language'      => $_POST['vjs_language'],
91                 'upscale'       => get_boolean($_POST['vjs_upscale']),
92                 'plugins'       => array(
93                             'zoomrotate'    => get_boolean($_POST['vjs_zoomrotate']),
94                             'thumbnails'    => get_boolean($_POST['vjs_thumbnails']),
95                             'watermark'     => get_boolean($_POST['vjs_watermark']),
96                             'resolution'    => get_boolean($_POST['vjs_resolution']),
97                             ),
98                 'player'        => $_POST['vjs_player'],
99                 'metadata'      => get_boolean($_POST['vjs_metadata']),
100         );
101         $customcss = $_POST['vjs_customcss'];
102
103         // Update config to DB
104         conf_update_param('vjs_conf', serialize($conf['vjs_conf']));
105         $query = "UPDATE ". CONFIG_TABLE ." SET value='". $_POST['vjs_customcss'] ."'
                      WHERE param='vjs_customcss'";
106         pwg_query($query);
107
108         // the prefilter changes, we must delete compiled templatess
109         $template->delete_compiled_templates();
110
111         array_push($page['infos'], l10n('Your configuration settings are saved'));
112 }

Naar index

VideoJS Synchroniseer default instellingen

Video's voegen we op de zelfde manier als Foto's toe en kunnen eveneens, net zoals de foto's, in de albumstuctuur geplaatst worden.
Net als bij de foto's worden met de Piwigo Synchronisatie de video's in de Piwigo database geladen.
Vervolgens wordt nu een VideoJS Synchronisatie uitgevoerd:
   • De Metadata van de video's worden geïmporteerd in de Piwigo database..
   • In de map waar de video's staan wordt de submap 'pwg-representative' gemaakt.
   • Er worden posters van de video's aangemaakt en in deze submap geplaatst.

De VideoJS Synchronisatie kan op twee manieren gestart worden:

  1. Met de VideoJS app: Piwigo > Beheer > Plugins > VideoJS en vervolgens tab 'Synchroniseer'
  2. Vanuit de Beheer > Foto > Verzamelmandje pagina
    Selecteer de video('s) en kies onder 'Actie' > Videos

In beide gevallen opent er een pagina met de diverse instellingsopties:

Mijn voorkeur gaat er naar uit om bestaande posters niet te overschrijven en wel een filmeffect toe te voegen.
Om te voorkomen dat er elke keer aan gedacht moet worden de settings voor deze twee items te wijzigen, is het handiger dat de defaults op deze pagina gewijzigd worden.

Wijzig default settings

Deze aanpassing is alleen mogelijk door een hacks in de VideoJS Synchronisatie en de Synchronistie vanuit het Verzamelmandje (Batch Actie)

VideoJS Synchronisatie hack
Vind in het bestand ../piwigo/plugins/piwigo-videojs/admin_sync.php de volgende sectie:

// Generate default value
$sync_options = array(
    'mediainfo'         => 'mediainfo',
    'ffmpeg'            => 'ffmpeg',
    'exiftool'          => 'exiftool',
    'ffprobe'           => 'ffprobe',
    'metadata'          => true,
    'poster'            => true,
    'postersec'         => 4,
    'output'            => 'jpg',
    'posteroverlay'     => false,
    'posteroverwrite'   => true,
    'thumb'             => false,
    'thumbsec'          => 5,
    'thumbsize'         => "120x68",
    'simulate'          => true,
    'cat_id'            => 0,
    'subcats_included'  => true,
);

Wijzig hier de settings van 'posteroverlay' en 'posteroverwrite'

'posteroverlay'     => true,
'posteroverwrite'   => false,

Verzamelmandje (Batch Actie) hack
Hiervoor voeren we het zelfde als hierboven uit.
Vind in het bestand ../piwigo/plugins/piwigo-videojs/admin_batchmanager.php de volgende sectie:

	// Generate default value
	$sync_options_default = array(
	    'mediainfo'         => 'mediainfo',
	    'ffmpeg'            => 'ffmpeg',
	    'exiftool'          => 'exiftool',
	    'ffprobe'           => 'ffprobe',
	    'metadata'          => true,
	    'poster'            => true,
	    'postersec'         => 4,
	    'output'            => 'jpg',
	    'posteroverlay'     => false,
	    'posteroverwrite'   => true,
	    'thumb'             => false,
	    'thumbsec'          => 5,
	    'thumbsize'         => "120x68",
	    'simulate'          => true,
	    'cat_id'            => 0,
	    'subcats_included'  => true,
	);

Wijzig ook hier de settings van 'posteroverlay' en 'posteroverwrite'

BUG

Met de laatste actie zouden ook bij de Verzamelmandje (Batch Actie) pagina de defaults gewijzigd moeten zijn.
Hier gaat echter iets fout, het doet er niet toe welke deafult opties we wijzigen, het reflecteert niet in de pagina, naar ik aanneem een bug.
Wat ook afwijkt is dat er in de templatesectie van admin_batchmanager.php hardcoding toegepast is.
Vind hiervoor de regels:

<label><input type="checkbox" name="vjs_posteroverwrite" value="1" checked="checked" /> Overwrite existing posters</label>
...
en
...
<label><input type="checkbox" name="vjs_posteroverlay" value="1" /> Add film effect</label>
...

en wijzig deze naar:

<label><input type="checkbox" name="vjs_posteroverwrite" value="1" /> Overwrite existing posters</label>
...
en
...
<label><input type="checkbox" name="vjs_posteroverlay" value="1" checked="checked" /> Add film effect</label>
...

Nu zijn ook op deze pagina's ingesteld als gewenst.

Naar index

Autoplay werkt niet met audio

Bij de moderne browsers wordt autoplay van een video geblokkeerd als audio aan staat.

Als we toch autoplay wensen moeten we in de html5 <video> tag aangeven dat de video start met de audio uitgeschakeld: <video muted>
Hiervoor is een hack nodig in de piwigo-videojs template ../piwigo/plugins/piwigo-videojs/template/vjs-5-player.tpl:

  1. Maak een kopie van het originele bestand en sla op als ../piwigo-videojs/template/vjs-5-player.tpl.org
  2. Edit ../template/vjs-5-player.tpl en voeg 'muted' toe in de <video> tag:
    34 {literal}
35 <video id="my_video_1" class="video-js vjs-fluid vjs-big-play-centered {/literal}{$VIDEOJS_SKIN}
        {literal}" {/literal}{$OPTIONS} muted {literal} poster={/literal}"
        {$VIDEOJS_POSTER_URL}"{literal} datasetup='{}' x-webkit-airplay="allow">
36 {/literal}

Door deze wijziging zal autostart van de video werken, terwijl het geluid door de gebruiker handmatig aangezet kan worden.

Naar index

Skin aanpassingen met lokale CSS

Lokale CSS
In plaats van toevoegingen/wijzigingen in de default CSS te maken geven we de voorkeur aan het maken van een nieuwe lokale CSS zoals omschreven in de Video.js Documentation: Skins Add a Custom Class to the Player

Windowhoogte Piwigo Desktop Thema
VideoJS reageert interactief op browserwindowafmetingen (lees window breedte), maar dit resulteert er bij bredere monitoren in dat de onderzijde van de VideoJS speler uit het beeld verdwijnt. Er moet naar beneden gescrold worden om bij de 'Controls' te komen.
Hiervoor heb ik een oplossing gevonden bij Stackoverflow: How to limit videojs player height waarbij gebruik gemaakt wordt van de CSS-unit 'vh' (viewport height).

De stappen zijn:

  1. Voeg een nieuwe class 'vjs-local' toe aan de bestaande <video> tag in ../piwigo/plugins/piwigo-videojs/template/vjs-5-player.tpl:
    <video id="my_video_1" class="vjs-local video-js vjs-fluid vjs-big-play-centered {/literal}{$VIDEOJS_SKIN}{literal}" {/literal}
          {$OPTIONS} muted {literal} poster={/literal}"{$VIDEOJS_POSTER_URL}"{literal}
           datasetup='{}' x-webkit-airplay="allow"> {/literal} ......</video>

  2. Creëer een nieuw stylesheet 'videojs-local.css' en sla deze op in de zelfde locatie als de default VideoJS stylesheet: ../piwigo/plugins/piwigo-videojs/video-js-5/videojs-local.css (chown apache:apache chmod 644)
    Gebruik de browser's developer tools voor het inspecteren van de videospeler om uit te vinden welke selectors we nodig hebben om een style bij te stellen - en we voegen onze lokale .vjs-local selector toe om te zorgen dat onze uiteindelijke selectors specifiek genoeg zijn voor een override op de default skin.

    Onderstaande code verbergt de zwarte kaders links en rechts van de video en legt de maximum hoogte van de videojs speler vast :
    /* Locale CSS B. Makkink 14-05-2020 voor desktop weergave*/
/* Maak achtergrond van player transparant */
.vjs-local.video-js {
  background-color: transparent;
}
/* Maak hoogte van video afhankelijk van windowhoogte (vp - view port) */
.vjs-local.my_video_1-dimensions.vjs-fluid {
  padding-top: 82vh;
}

  3. Voeg het nieuwe stylesheet videojs-local.css toe aan de VideoJS html template ../piwigo-videojs/template/vjs-5-player.tpl, na het bestaande default stylesheet 'video-js.min.css'
    {html_head}
<link href="{$VIDEOJS_PATH}video-js-5/video-js.min.css" rel="stylesheet">
<link href="{$VIDEOJS_PATH}video-js-5/videojs-local.css" rel="stylesheet">

Corrigeren VideoJS controls in Piwigo Mobiel Thema
In het Smartpocket Mobiel Piwigo Thema worden de controls van de VideoJS speler niet goed weergegeven.
Zie ook de Github pagina van xbgmsharp: Controls not rendered correctly under theme SmartPocket (default mobile theme)
Op bovengenoemde pagina wordt uiteengezet hoe tot een oplossing te komen. Bij mij werkt dit ook niet maar zette mij wel op het spoor voor een oplossing.

Voorgaande oplossing voor de windowhoogte voor een desktop geeft vreemde resultaten in het Smartpocket Thema en is hier trouwens geheel overbodig.
Voor het Smartpocket Thema maken we daarom een eigen lokaal stylesheet 'videojs-local-mobile.css' en slaan we op als ../piwigo/plugins/piwigo-videojs/video-js-5/videojs-local-mobile.css.

Onderstaande code laat de verborgen VideoJS controls zien en plaats ze over de Smartpocket buttons. Dit heeft wel als resultaat dat bij fullscreen mode er een buttonbalk over het scherm weergegeven wordt. Deze verbergen we vervolgens met: border: none en display: none
.vjs-local .ui-btn-hidden {
  opacity: unset;
  text-indent: unset;
  top: -6px;
}

.vjs-local .ui-btn-up-a {
  border: none;
}

.vjs-local .ui-btn-inner {
  padding: 0;
  display: none;
}

Switch voor CSS
Hierboven onder Item 3 voegden we het stylesheet videojs-local.css toe aan de VideoJS html template vjs-5-player.tpl.
Nu hebben we echter 2 lokale stylesheets en slechts één van de twee moet toegevoegd worden aan de html code afhankelijk van in welk scherm de video weergegeven wordt.

In de template vjs-5-player.tpl plaatsen we hiervoor een switch:
{html_head}
<link href="{$VIDEOJS_PATH}video-js-5/video-js.min.css" rel="stylesheet">

{if (mobile_theme())}
<link href="{$VIDEOJS_PATH}video-js-5/videojs-local-mobile.css" rel="stylesheet">
{else}
<link href="{$VIDEOJS_PATH}video-js-5/videojs-local.css" rel="stylesheet">
{/if}

VideoJS is nu klaar voor gebruik.
Zie voor het laden (en bekijken) van de video's Piwigo::Albums Inrichten Video's Laden