Integration Google Album

11.09.2019 22:51
avatar  rOgerHZ
#1 Integration Google Album
rO
Mitglied

Ciao Zämme

Für die Integration von Bildern im Forum gibt es ja einige Varianten. Nun sind Benutzer immer wieder erfinderisch bzw. sich gewohnt "ihre" Tools einzusetzen. Oft kommt dabei bei mir Google Album zum Einsatz. Ich wollte prüfen welche Optionen ich habe, dies "schön" im Forum zu integrieren.

Google selbst bietet nicht viel Hilfe - die wollen natürlich dass man deren Seite selbst besucht.

Nach einer Recherche bin ich auf folgende Seite gestossen. https://www.publicalbum.org/blog/embeddi...e-photos-albums - Nachteil dieser Lösung ist allerdings, dass der Benutzer den "Code" selbst generieren müsste und ich im Forum HTML erlauben müsste (was auch nicht unproblematisch ist).

Soweit so gut. Am liebsten hätte ich dies als "Button" in der Iconbar integriert. Ich habe da mal geprüft was möglich ist. Durch CORS werde ich leider daran gehindert (sprich javascript im Context des Benuzter-Browsers kommt nicht in Frage) und müsste Code im Kontext des Servers ausführen können. Als Basis könnte z.B. das entsprechende Wordpress Plugin dienen, vgl. https://wordpress.org/plugins/embed-goog...s-album-easily/

Oder habt Ihr noch andere Ideen?

Danke & aes iebs Grüessli
rOgerHZ


 Antworten

 Beitrag melden
12.09.2019 00:26
avatar  rOgerHZ
#2 RE: Integration Google Album
rO
Mitglied

Ciao Zämme

Ich habe mal dazu ein Prototyp in php geschrieben (Quick & Dirty):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 

<?php
function get_remote_contents($url) {
$response = file_get_contents($url);
if ($response === FALSE) {
return NULL;
}
return $response;
}
 
function parse_ogtags($contents) {
$m = NULL;
preg_match_all('~<\s*meta\s+property="(og:[^"]+)"\s+content="([^"]*)~i', $contents, $m);
$ogtags = array();
for($i = 0; $i < count($m[1]); $i++) {
$ogtags[$m[1][$i]] = $m[2][$i];
}
return $ogtags;
}
 
function parse_photos($contents) {
$m = NULL;
preg_match_all('~\"(http[^"]+)"\,[0-9^,]+\,[0-9^,]+~i', $contents, $m);
return array_unique($m[1]);
}
 
if ($_GET["ga"] != "") {
if ($contents = get_remote_contents($_GET["ga"])) {
$og = parse_ogtags($contents);
$title = isset($og['og:title']) ? $og['og:title'] : NULL;
$photos = parse_photos($contents);
 
$items_code = '';
foreach ($photos as $photo) {
$src = sprintf('%s=w%d-h%d', $photo, 1920, 1080);
$src = sprintf('%s', $photo);
$items_code .= '[img]' . $src . '[/img]';
}
echo $items_code;
}
}
else {
echo "No param given!";
}
?>
 



Dieses Skript z.B. als test.php gespeichert, kann dann mittels <server>/test.php&ga=https://photos.app.goo.gl/CSV7NDstShTUwUZq5 aufgerufen werden und man erhält alle Bilder als img BBCode. Idee: Mittels iconbar Button könnte dieses Backend-Script aufgerufen werden und automatisch alle Bilder per IMG ins Forum gesetzt werden.

Hier die Google Album URL entsprechend aufgelöst als IMG:



Natürlich wäre es schöner wenn es "sauber" im Forum-Code hinterlegt wäre, so dass z.B. auch die "Lightbox" sauber genutzt werden würde.

@Ingmar - Könntet Ihr sowas als Backend-Funktion integrieren?

Was es noch zu bedenken gibt:
* ein Forum Post umfasst maximal 65500 Zeichen; bei grossen Alben sprengt dann ein Post diese Limite (und kann nicht gespeichert werden)
* Optionen wie Bildergrössen u.ä. sind noch nicht berücksichtigt (macht aber hier für den PoC eh keinen Sinn).

Danke & aes liebs Grüessli
rOgerHZ


 Antworten

 Beitrag melden
12.09.2019 10:43
avatar  Ingmar
#3 RE: Integration Google Album
avatar
Technik

Hi Roger.

Erstmal muss ich dazu kurz was loswerden:

Zitat von rOgerHZ im Beitrag #1
Nachteil dieser Lösung ist allerdings, dass der Benutzer den "Code" selbst generieren müsste und ich im Forum HTML erlauben müsste (was auch nicht unproblematisch ist).


Ich tippe mal dir ist klar, dass das nicht nur "unproblematisch" ist, sondern du damit jedem Mitglied quasi anbietest, dein Forum mit wenig Aufwand zu übernehmen. Nur für Mitleser wollte ich daher nochmal klarstellen: NIEMALS HTML für Mitglieder erlauben, wenn euch etwas an eurem Forum liegt!


Jetzt zum Problem:

Wenn du etwas lösen kannst, indem du HTML erlaubst, kannst du es auch fast immer mit einem Forencode lösen.

Du könntest deine User also den Code hier generieren lassen:
https://www.publicalbum.org/blog/embeddi...e-photos-albums

Dann erstellst du dir in der Iconbar einen HTML-Baustein, der eine Textarea anzeigt, in die die Mitglieder den Code eingeben.

Dein Script erstellt daraus dann einen entsprechenden Forencode und fügt den in die Textarea ein.

Also so was wie
[galbum|https://photos.app.goo.gl/CSV7NDstShTUwUZq5|Mr. Monstro|4 new photos · Album by Pavel Macháček...]


Dann legst du dir einen Forencode an, der daraus wiederum den korrekten embed-Code erzeugt.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
12.09.2019 10:57
avatar  rOgerHZ
#4 RE: Integration Google Album
rO
Mitglied

Ciao Ingmar

Zitat von Ingmar im Beitrag #3

Erstmal muss ich dazu kurz was loswerden:
Zitat von rOgerHZ im Beitrag #1
Nachteil dieser Lösung ist allerdings, dass der Benutzer den "Code" selbst generieren müsste und ich im Forum HTML erlauben müsste (was auch nicht unproblematisch ist).


Ich tippe mal dir ist klar, dass das nicht nur "unproblematisch" ist, sondern du damit jedem Mitglied quasi anbietest, dein Forum mit wenig Aufwand zu übernehmen. Nur für Mitleser wollte ich daher nochmal klarstellen: NIEMALS HTML für Mitglieder erlauben, wenn euch etwas an eurem Forum liegt!



Das meinte ich mit "...nicht unproblematisch..." - es ist mir sehr klar und bewusst

Zitat von Ingmar im Beitrag #3

Jetzt zum Problem:

Wenn du etwas lösen kannst, indem du HTML erlaubst, kannst du es auch fast immer mit einem Forencode lösen.

Du könntest deine User also den Code hier generieren lassen:
https://www.publicalbum.org/blog/embeddi...e-photos-albums

Dann erstellst du dir in der Iconbar einen HTML-Baustein, der eine Textarea anzeigt, in die die Mitglieder den Code eingeben.

Dein Script erstellt daraus dann einen entsprechenden Forencode und fügt den in die Textarea ein.

Also so was wie
[galbum|https://photos.app.goo.gl/CSV7NDstShTUwUZq5|Mr. Monstro|4 new photos · Album by Pavel Macháček...]



Soweit klar und hatte ich in meinem Test-Forum auch schon so angelegt.

Zitat von Ingmar im Beitrag #3

Dann legst du dir einen Forencode an, der daraus wiederum den korrekten embed-Code erzeugt.



Genau hier habe ich nicht durchgesehen. Wo lege ich denn diesen Forencode an? Sehe gerade den Wald vor lauter Bäumen nicht....

Danke & aes liebs Grüessli
rOgerHZ


 Antworten

 Beitrag melden
12.09.2019 11:56 (zuletzt bearbeitet: 12.09.2019 11:58)
avatar  Ingmar
#5 RE: Integration Google Album
avatar
Technik

Zitat von rOgerHZ im Beitrag #4
Genau hier habe ich nicht durchgesehen. Wo lege ich denn diesen Forencode an? Sehe gerade den Wald vor lauter Bäumen nicht....


Na unter Admin→Layout→Iconbar:

Wenn das dein Ziel-Code ist:

1
2
3
4
5
6
7
8
9
10
11
 
<script src="https://cdn.jsdelivr.net/npm/publicalbum@latest/embed-ui.min.js" async></script>
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="https://photos.app.goo.gl/CSV7NDstShTUwUZq5"
data-title="Mr. Monstro"
data-description="4 new photos · Album by Pavel Machá&#269;ek">
<object data="https://lh3.googleusercontent.com/XlH6wo2PzrAEqmplYrZwV0fI-2TafTT6BRwZhKDfZSHd_zT7HIdPyPWd3Xuqhn1QQADuTJ32QFmcgYiTOEU0sC4Bvf-VyTIiq-DxxEaxIeWDYyUK_VjaW8-zrMGBvekDZT77lpduYQ=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/VvK__Vx8kpPTP57WZPLblacZbTE0NqWeIGTyHSQ8Rq9pvOpWQG_CQE_tOc6jHPtj02XIBYa0Zo9fWbXXQyNYs9hDGGj34QibKFJky4W9nYBpSb57OwxiQoDyo25vzIXMTN2SNxuzqg=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/HISe-DV_b4gjLvSEGzrJlsqBU2rSE8uQpSqHHKTPihg_Ax9VtfCrOrvdXF01raBeBleAWQKI7Hfb4_w9vZeJKFymQfNTlubwXxTBTbqGTPwjg7S0CBtQsQJqsspvIhD9c-pniSZrEw=w1920-h1080"></object>
<object data="https://lh3.googleusercontent.com/05lhR1IAQY_B9rdQ_GvHDNLe1lJsSPyyuDeIMkt--gDDAnO2_EATwif7-sfNd2K_48RvyqKmN-u2svKZ06yfh8bnrbQ5kBUrIHfZvWheTzDGhIeFd1roPor-F_BycJmVKbQO6a9EaA=w1920-h1080"></object>
</div>
 
 

Zitat von rOgerHZ im Beitrag #4
[galbum|https://photos.app.goo.gl/CSV7NDstShTUwUZq5|Mr. Monstro|4 new photos · Album by Pavel Macháček...]


Und das dein BB-Code
[galbum|https://photos.app.goo.gl/CSV7NDstShTUwUZq5|Mr. Monstro|4 new photos · Album by Pavel Macháček...]


Dann legst du einen einfachen BB-Code an:
ersetze

1
 
[galbum|{{url}}|{{title}}|{{desc}}...]
 


mit

1
2
 
<div class="pa-gallery-player-widget" style="width:100%; height:480px; display:none;"
data-link="{{url}}" data-title="{{title}}">
 



usw.

Falls dir das so nicht reicht müsste ich dir das mal nach Feierabend genauer zusammenbasteln...

Theoretisch kannst du auch das <script> direkt im BB-Code mitladen. Optimal wäre es natürlich das dynamisch bei bedarf nachzuladen, damit du nicht 10 solche Skript-Tags hast wenn 10 Alben eingebunden werden.

Viele Grüße,
Ingmar


 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!