Restore Raw Print View History First PreviousNextLastClose

You are here: Boossy » WebDesign » WdWebsites » 0-10-CloudPhotosEmbedCode » 0-17-CPGallery-Nanogallery2 » Difference

Difference: 0-17-CPGallery-Nanogallery2 (2 vs. 1)

0-17-CPGallery-Nanogallery2 2 - 08 December 2020 - Main.StijnBousard

META TOPICPARENT	name="0-10-CloudPhotosEmbedCode"

Nanogallery2

Nanogallery2
- installatie, configuratie, authorizatie en probatie!

installatie, configuratie, authorizatie en probatie!

1 INSTALLATION

Google API Console https://console.developers.google.com/
- Select a project
- NEW PROJECT:
  - Project name: nanogallery2gp-kmr
  - click CREATE
- Select a project: nanogallery2gp-kmr
- Credentials (vMenu)
- OAuth consent screen:
  - Application name: nanogallery2gp-kmr
  - Authorized domains: websi.te, othersi.te
  - click Save
- Credentials
  - Create credentials > OAuth client ID
  - Application type: Web application
  - Name: nanogallery2gp-project
  - Authorized redirect URIs:
- click Create
Google client information
- client ID: numb3rs@ndl3tt3rs.apps.googleusercontent.com
- client secret: M-0reNumb3rsAndL3tt3r-S
Google Photos Library API
- Library (vMenu)
- Search for Photos Library API
- ENABLE

2 CONFIGURATION

Set client ID & secret in admin/config.php

3 USER AUTHORIZATION

Browse to http(s)://your-web-server/nanogp2/authorize.php
Choose an account: kmr@boossy.be
Grant your-web-server permission: View your Google Photos library: Allow
Confirm your choices: Allow
Confirmation: {"nano_status":"ok","nano_message":"Authorisation successfully granted (userID=012345678910111213141)."}

4 TEST - separate html file

Create a fotoarchief.html file containing all your albums:

Deleted:

<
<

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
    <script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
  </head>
  <body>
    <h1>Blablabla | fotoarchief</h1>
    <div id="nanogallery2" data-nanogallery2='{
      "kind": "google2",
      "userID": "012345678910111213141",
      "google2URL": "http://your-web-site/nanogp2/nanogp2.php",
      "thumbnailHeight": 320, 
      "thumbnailWidth": "auto",
      "viewerZoom": false
      }' style="height: 100%; overflow: scroll;">
    </div>
  </body>
</html>

Variable data are:
- title (h1)
- userID
- google2URL

Then try to reach http://your-web-site/fotoarchief.html

5 EMBEDDING IN DRUPAL 7.x

5.1 using cdn (unpkg.com)

Delete all enters in the <div> tag, and you get the code you can enter directly in Drupal:

Deleted:

<
<

<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
<div id="nanogallery2" data-nanogallery2='{"kind": "google2", "userID": "<your-user-id>", "google2URL": "//<your-site.ext>/nanogp2/nanogp2.php", "thumbnailHeight": 320, "thumbnailWidth": "auto", "viewerZoom": false}'></div>

or even more refined:

Added:

>
>

<link href="https://unpkg.com/nanogallery2@2.4.1/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/nanogallery2@2.4.1/dist/jquery.nanogallery2.min.js" type="text/javascript"></script>
<div id="nanogallery2" data-nanogallery2='{ "kind": "google2", "userID": "your-user-id", "google2URL": "http://your-site.ext/nanogp2/nanogp2.php", "thumbnailHeight": 320, "thumbnailWidth": "auto", "thumbnailBorderVertical": 0, "thumbnailBorderHorizontal": 0, "galleryDisplayTransition": "slideUp", "galleryDisplayTransitionDuration": 500, "thumbnailDisplayTransition": "scaleUp", "thumbnailDisplayTransitionDuration": 500, "thumbnailDisplayInterval": 30, "thumbnailHoverEffect2": "ImageScale150|toolsAppear", "thumbnailIcon": "default", "slideshowDelay": 7000, "thumbnailAlignment": "center", "viewerTools": { "topLeft": "", "topRight": "shareButton, fullscreenButton, closeButton" }, "viewerToolbar": { "standard": "pageCounter, playPauseButton", "minimized": "" }, "viewerZoom": false }'></div>

change: your-user-id, your-site.ext
Avoid thumbnailHoverEffect2 toolsSlideUp, use toolsAppear instead - dan verschijnt het aantal foto's van een album alleen als je erover hovert
"viewerZoom": false zorgt voor webvriendelijke foto's, ze worden dan niet als 100% file size gedownload!

Embedden in Drupal 7.x zorgt ook voor enkele opmaakwijzigingen: volgende CSS-injector voor de betreffende pagina zorgt ervoor dat alles er weer netjes uitziet: aantal foto's en albumlabel niet te ver van de rand, geen achtergrond voor het aantal foto's en voor het albumlabel:

Added:

>
>

#main #content .node .field-name-body ul {
 margin-top: 0px;
 padding-right: 5px;
}
#main #content .node .field-name-body ul li:before {
 background-color: transparent;
}
.nGY2 .nGY2GThumbnailLabel {
 background: transparent!Important;
 padding-bottom: 0px!Important;
 margin-bottom: -5px!Important;
}

5.2 using personalized .js / .css files

5.2.1 Breadcrumb met terugverwijzende link naar alle albums, en titel van huidig album zonder link

vereist opsplitsing van de klasse .oneItem in .oneItem & .oneItemNoLink in de jquery.nanogallery2(.min).js
de cursor wordt voor de breadcrumb ingesteld op 'default' (.css)
en specifiek voor .oneItem opnieuw op 'pointer'
bij .oneItemNoLink wordt bovendien gezorgd dat er effectief ook geen muisactie mogelijk is (pointer-events: none)

De ~.min.js & ~.min.css van deze versie staan bij de VM-site als ~.generic.min.js resp. ~.generic.min.css.

5.2.2 /!Importants verwijderen uit CSS-injector van Drupal

Welke Importants zijn er:

doorzichtig albumlabel met specifieke padding / margin
specifieke terugwijspijl met tekst 'Alle albums' in breadcrumb (css entities)
specifieke pijl vorige / volgende foto (css entities)
specifieke achtergrondkleur breadcrumb (VM-bordeaux)

6 EMBEDDING IN JOOMLA 3.x

It's possible to use the same code as above for Drupal to embed a nanogallery2 in your Joomla website, however:

it works fine on my OnePage sites on the main page
it doesn't work in the modal windows (Archief), in no nanogallery2 is present on the main window - and if it is present, the modal one is slower…

7 PHP's

In the nanogp2 main directory
- authorize.php: authorizes your nanogp2 or shows the authorization parameters (afterwards)
- check.php: installation check: php version, free disk space, …
- nanogp2.php
- README.md
In the admin subdirectory:
- config.php: contains the configuration settings (client id & secret, and albums to be excluded - be aware that this is the only way to protect your privacy!!!)
- tools.php
In the admin/users/<user> subdirectory:
- profile.txt, token_a.txt & token_r.txt - present after authorization - NEVER delete them

You only have to authorize on one domain, if you want to use nanogp2 on another domain, add it in the Google Developers Console, but don't try to use the authorize.php file on that 2nd domain, it'll fail. Simply copy the user directory conataining the .txt files to the 2nd domain.

8 GENERATE A LIST OF ALBUMS' NAMES AND IDs

This one is very convenient:

Added:

>
>

http(s)://YOUR_WEB_SERVER/nanogp2/nanogp2.php?nguserid=USER_ID&report

The result file can be found in nanogp2/admin/users/<user-id>/google_photos_data.txt.

9 Tools

In the image display / lightbox, you have 3 positions to put tools:

viewerTools.topLeft: by default,
viewerTools.topRight: by default,
viewerToolbar:
- minimized:
- standard

The following tools are possible

tool <-- -->	default position	my position	remark
closeButton => by default, topRight	topRight	id
downloadButton =< by default in standard viewerToolbar, maar werkt niet (doet hetzelfde als linkOriginalButton…)	standard viewerToolbar	x	doesn't work correctly same function as linkOriginalButton
fullscreenButton => by default, topRight, by default in standard viewerToolbar	topRight & standard viewerToolbar	topRight
infoButton: by default in standard viewerToolbar	standard viewerToolbar	x
linkOriginalButton: by default in standard viewerToolbar	standard viewerToolbar	id
pageCounter => by default	topLeft	id
playPauseButton => by default, topLeft	topLeft	id
previousButton, nextButton => by default, not in one of the three positions, but center left & center right	center left & center right	id
rotateLeft, rotateRight => by default, topRight (remove!)	topRight	x
shareButton: by default in standard viewerToolbar	standard viewerToolbar	id
zoomButton: by default in standard viewerToolbar	standard viewerToolbar	x
customN
label (image title & description)	x	id

algemeen

gewoon: http://boossy.be/iframes-height/fluid/fluid.html
als iframe: http://boossy.be/iframes-height/fluid/index.html

nanogallery2, all albums, height 568

Changed:

<
<

>
>

nanogallery2, one album

Changed:

<
<

>
>

nanogallery2, one photo

Changed:

<
<

>
>

META TOPICMOVED	by="StijnBousard" date="1556521086" from="Boossy.0-17-CPGallery-Nanogallery2AllAlbums" to="Boossy.0-17-CPGallery-Nanogallery2"

Revision 0	2
Revision 1	1