Suche
Suche Menü

Smarty: Exif-Daten von Bildern auslesen und anzeigen

Will man zu einer Gallery Detaildaten zu den Bilder wie Auflösung, Brennweite und Belichtungsdauer bis hin zu den GPS-Koordinaten uvm. anzeigen, so kann dies mit der PHP Funktion exif_read_data() umgesetzt werden. Diese Funktion liest sämtliche vorhandenen Exif-Daten eines Bildes aus und liefert sie in einem Array zurück. Die Exif-Daten sind die Meta-Daten der Bilder.

In CMS Made Simple wird dies wie folgt eingebaut

{$exif = exif_read_data({$ipath}, 'IFD0')}

Hinter $ipath verbirgt sich der Systempfad des Bildes, NICHT die URL. Wie eine URL in den Systempfad konvertiert werden kann, ist hier beschrieben: https://www.cmsmadesimple.de/forum/view … hp?id=4963

Vor dem praktischen Einsatz solltet ihr allerdings eure Bilder prüfen, welche EXIF-Daten vorhanden sind. Diese sind zwar grundsätzlich standardisiert, aber da hat jeder Kamera-Hersteller so seine eigenen Vorstellungen, was geschrieben wird.

Funktioniert in CMSMS so (nach vorstehendem Befehl einfügen)

<pre>{$exif|print_r}</pre>

Der Output sieht in menem Fall so aus:

Array
(
    [FileName] => _DSC7200.JPG
    [FileDateTime] => 1466331900
    [FileSize] => 9866716
    [FileType] => 2
    [MimeType] => image/jpeg
    [SectionsFound] => ANY_TAG, IFD0, THUMBNAIL, EXIF, GPS, INTEROP
    [COMPUTED] => Array
        (
            [html] => width="4288" height="2848"
            [Height] => 2848
            [Width] => 4288
            [IsColor] => 1
            [ByteOrderMotorola] => 1
            [ApertureFNumber] => f/11.0
            [UserComment] => Copyright by Lukas Blatter
            [UserCommentEncoding] => ASCII
            [Copyright] => Lukas BIatter                                         
            [Thumbnail.FileType] => 2
            [Thumbnail.MimeType] => image/jpeg
        )

    [Make] => NIKON CORPORATION
    [Model] => NIKON D300
    [Orientation] => 1
    [XResolution] => 300/1
    [YResolution] => 300/1
    [ResolutionUnit] => 2
    [Software] => Ver.1.10 
    [DateTime] => 2016:06:19 11:24:58
    [Artist] => Lukas Blatter                       
    [WhitePoint] => Array
        (
            [0] => 313/1000
            [1] => 329/1000
        )

    [PrimaryChromaticities] => Array
        (
            [0] => 64/100
            [1] => 33/100
            [2] => 21/100
            [3] => 71/100
            [4] => 15/100
            [5] => 6/100
        )

    [YCbCrCoefficients] => Array
        (
            [0] => 299/1000
            [1] => 587/1000
            [2] => 114/1000
        )

    [YCbCrPositioning] => 2
    [Copyright] => Lukas BIatter                                         
    [Exif_IFD_Pointer] => 472
    [GPS_IFD_Pointer] => 33888
    [THUMBNAIL] => Array
        (
            [Compression] => 6
            [XResolution] => 300/1
            [YResolution] => 300/1
            [ResolutionUnit] => 2
            [JPEGInterchangeFormat] => 34016
            [JPEGInterchangeFormatLength] => 8742
            [YCbCrPositioning] => 2
        )

    [ExposureTime] => 10/5000
    [FNumber] => 110/10
    [ExposureProgram] => 2
    [ISOSpeedRatings] => 1000
    [ExifVersion] => 0221
    [DateTimeOriginal] => 2016:06:19 11:24:58
    [DateTimeDigitized] => 2016:06:19 11:24:58
    [CompressedBitsPerPixel] => 4/1
    [ExposureBiasValue] => 0/6
    [MaxApertureValue] => 36/10
    [MeteringMode] => 5
    [LightSource] => 0
    [Flash] => 0
    [FocalLength] => 180/10
    [MakerNote] => Nikon
    [SubSecTime] => 08
    [SubSecTimeOriginal] => 08
    [SubSecTimeDigitized] => 08
    [FlashPixVersion] => 0100
    [ColorSpace] => 65535
    [ExifImageWidth] => 4288
    [ExifImageLength] => 2848
    [InteroperabilityOffset] => 33858
    [SensingMethod] => 2
    [CustomRendered] => 0
    [ExposureMode] => 0
    [WhiteBalance] => 0
    [DigitalZoomRatio] => 1/1
    [FocalLengthIn35mmFilm] => 27
    [SceneCaptureType] => 0
    [GainControl] => 2
    [Contrast] => 0
    [Saturation] => 0
    [Sharpness] => 0
    [SubjectDistanceRange] => 0
    [UndefinedTag:0xA500] => 22/10
    [InterOperabilityIndex] => R03
    [InterOperabilityVersion] => 0100
) 

 

Praktisch an dieser Ausgabe, dass man bereits hier erkennen kann, wie man die Elemente des generierten $exif Arrays zur Anzeige bringt. So findet sich z.Bsp. für das Kamera-Modell dieser Eintrag

[Model] => Nikon D300

Angezeigt werden kann dies mit

{$exif.Model}

Manche Werte wie zum Beispiel der Zeitstempel oder die Dateigröße liegen aber als unformatierte Rohdaten vor, weshalb sie für die Anzeige noch etwas überarbeitet werden müssen.

[FileDateTime] => 1419676580
    [FileSize] => 237278

Der Zeitstempel ist ein Unix Zeitstempel und kann so über den in CMSMS mitgelieferten Modifikator cms_date_format formatiert werden.

{$exif.FileDateTime|cms_date_format:'%d. %B %Y'}

Um die Bytezahl der Dateigrösse in ein lesbares Format zu bringen, kann folgender Modifier (modifier.formatsize.php) genutzt werden

https://www.cmsmadesimple.de/forum/view … hp?id=4770

{$exif.FileSize|formatsize}

Zusammengefasst in einem erweiterungsfähigen Basis-Script sieht das dann so aus

{$ipath = "{$smarty.server.DOCUMENT_ROOT}{$iurl|parse_url:$smarty.const.PHP_URL_PATH}"}
{$exif = exif_read_data({$ipath}, 'IFD0')}
Erstellt: {$exif.FileDateTime|cms_date_format:'%d. %B %Y'}
Auflösung: {$exif.COMPUTED.Width} x {$exif.COMPUTED.Height}
Dateigröße: {$exif.FileSize|formatsize}
Kamera: {$exif.Make} {$exif.Model}

Ausgegeben wird folgendes

Erstellt: 19. Juni 2016
Auflösung: 4288 x 2848 Pixel
Dateigröße: 9.6MB
Kamera: Nikon D300

Ergänzen könnte man das Script um eine Prüfung, ob die EXIF Erweiterung aktuell auf eurem Host bzw. Server geladen ist. Dies lässt sich über eine Prüfung der Existenz der genutzten Funktion erledigen

{if function_exists('exif_read_data')}
...
{/if}

Zudem sollte man bei kritischen EXIF-Daten (also Daten, die nicht in jedem Bild vorhanden sind), vorher dessen Existenz prüfen

{if $exif.Make && $exif.Model}
  <p>Kamera: {$exif.Make} {$exif.Model}</p>
{/if}

Das komplette Script sähe in diesem Fall so aus

{if function_exists('exif_read_data')}
  {$ipath = "{$smarty.server.DOCUMENT_ROOT}{$iurl|parse_url:$smarty.const.PHP_URL_PATH}"}
  {$exif = exif_read_data({$ipath}, 'IFD0')}
  <p>Erstellt: {$exif.FileDateTime|cms_date_format:'%d. %B %Y'}</p>
  <p>Auflösung: {$exif.COMPUTED.Width} x {$exif.COMPUTED.Height}</p>
  <p>Dateigröße: {$exif.FileSize|formatsize}</p>
  {if $exif.Make && $exif.Model}
    <p>Kamera: {$exif.Make} {$exif.Model}</p>
  {/if}
{/if}

Falls das Script an mehreren Stellen eingesetzt werden soll, bietet sich natürlich auch der Einsatz dieses Tricks an

https://www.cmsmadesimple.de/forum/viewtopic.php?id=572

So muss der Block nicht jedes Mal neu eingefügt werden. Anpassungen können so auch an zentraler Stelle vorgenommen werden.

1. Falls nicht vorhanden, Verzeichnis /tmp/templates anlegen
2. Snippet in einer Datei als exif.tpl speichern
3. exif.tpl nach /tmp/templates hochladen
4. Aufruf an den gewünschten Stellen mittels

{include file='exif.tpl'}

Quelle des Artikel forum.cmsmadesimple.de

NumLock dauernd aktivieren

Problemstellung: Beim Anmelden am PC ist der Zahlenblock nicht aktiv.  Um das Problem zu beheben gibt es zwei Möglichkeiten. Dazu muss die Windows-Registry geöffnet werden. Mit dem drücken von Windowstaste+R das Ausführen Fenster öffnen und hier regedit eintippen und auf Enter drücken.

Userspezifisch ändern

In der Registry nach folgendem Key suchen:
HKEY_CURRENT_USERControl PanelKeyboard

 

Einstellung nur für aktuellen User ändern Einstellung nur für aktuellen User ändern Zoom

Im rechten Fensterteil doppelklicken Sie auf den Eintrag namens «InitialKeyboardIndicators»

Ändern Sie seinen Wert von 0 auf 2. Falls er auf einer ganz anderen Zahl steht erhöhen Sie den Wert um zwei, (z. B. von 123 auf 125).

Für die systemweite Änderung ist das Vorgehen praktisch gleich. Starten Sie aber den Registrierungseditor mit Administrator-Rechten. Unter Windows XP, Vista und 7 klicken Sie auf Start, tippen regedit ein, klicken mit der rechten Maustaste auf den gefundenen Registrierungseditor und wählen im Kontextmenü Als Administrator ausführen. Unter Windows 8 drücken Sie Windowstaste+X, gehen zu Ausführen, tippen regedit ein und drücken Enter.
Der zu ändernde Eintrag «InitialKeyboardIndicators» befindet sich unter diesem Zweig:
HKEY_USERS.DefaultControl PanelKeyboard
Auch hier gilt: Von 0 auf 2 erhöhen oder von 2147483648 auf 2147483650.

Nach der Änderung klicken Sie auf OK und schliessen den Registry-Editor wieder. Ab dem nächsten PC-Neustart sollte NumLock nun standardmässig aktiviert sein.

target=_blank – eine unterschätzte Sicherheitslücke bei sozialen Medien

T3N hat einen interessanten Artikel zu target=_blank veröffentlicht.
Wird ein Link mit target=_blank geöffnet, öffnet sich ein neues Browserfenster. Durch den dabei ausgeführten Befehl window.opener erhält die sich neu öffenende Seite Zugriff auf das bisherige Browserfenster. So ist es möglich via Javascript möglich den Inhalt der Ursprungsseite zu verändern. Gefährdet sind hier vor allem soziale Medien wie Facebook.

Klickt man z.B. bei Facebook auf einen Link, so kann die Zielseite die noch offene Facebookseite manipulieren, so dass man z.B. das Passwort eingeben muss, welches direkt bei den bösen Buben landet.

Als Webseitenbetreiber mit Kundenlogin welcher target=_blank verwendet, kann man seine Benutzer wie folgt schützen:

<a href="http://www.seite.com" target="_blank" rel="noopener noreferrer">Neue Seite</a>

Mit dem rel=»noopener noreferrer» setzt man den window.opener auf Null. Somit erhält die neue Seite keinen Zugriff mehr auf die bisherige Seite.

Ob man als User von diesem Problem betroffen ist, kann man auf dieser Seite testen:
https://mathiasbynens.github.io/rel-noopener/

Beim Cross-Origin Beispiel warnt mich Firefox, dass die Ursprungsseite Seite plötzlich umleiten will. Dazu gibt es einerseits eine Einstellung: «Erweitert» › «Allgemein» die Option «Warnen, wenn Webseiten versuchen umzuleiten oder neuzuladen»
Außerdem gibt es noch das AddOn RequestPolicy. RequestPolicy warnt unabhängig von dieser Einstellung.

Einfacher Slider mit jQuery

Auf Stack Overflow habe ich vor kurzem einen einfachen Slider entdeckt. Der Slider nutzt jQuery ohne weitere Plugins.

<html>
<head>
<style>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: sans;
}
.track {
  position: relative;
  height: 400px;
  width: 100%;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.ipsum {
  display: inline-block;
  padding: 10px;
  background-color: rgba(255, 255, 255, .75);
}
</style>

</html>
<body>
<div class="jCaroFade track">
  <!-- Slides -->
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/550/20180902929_88c507f552_h.jpg');">
    <p class="ipsum">SLIDE ONE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/277/19726574813_cf2aa22221_b.jpg');">
    <p class="ipsum">SLIDE TWO</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/488/20178281609_c1e34be0b2_b.jpg');">
    <p class="ipsum">SLIDE THREE</p>
  </div>
  <div class="slide" style="background-image:url('https://c1.staticflickr.com/1/414/19744665244_c099ce816c_h.jpg');">
    <p class="ipsum">SLIDE FOUR</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>$('.jCaroFade').each(createFader);

function createFader(i, elem) {
  var track = $(elem);
  var firstSlide = track.find('.slide').eq(0);
  var loop = 0;

  firstSlide.nextAll().hide();
  setInterval(function() {
    loop++;
    firstSlide = firstSlide.fadeOut(500, function() {
        $(this).appendTo(track);
      })
      .next()
      .fadeIn(500);
  }, 3000);

}
</script>
</body>
</html>

Eine Demo des Sliders kann auf jsFiddle angeschaut werden.

HTML5Shiv – neue URL

Diverse Templates verwenden um die Kompatibilität von HTML5 mit IE9 oder älter zu ermöglichen, die JavaScript Bibliothek HTML5Shiv. Diese wurde zu Beginn auf GoogleCode gehostet.

<!--[if IE]><script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Das Projekt wird mittlerweile auf Github gehostet. Um HTML5Shiv wieder zum laufen zu bringen, muss die URL angepasst werden. Eine Möglichkeit dazu ist die Verwendung des CDN von Cloudflare. Auf CDNJS.com findet man dazu den Link.

Somit ist der Code neu:

<!--[if IE]><script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script><![endif]-->

Ein weiterer Vorteil ist die Einbindung via SSL. Mittlerweile werden viele Seiten mit SSL betrieben was die Einbindung von externen Scripten per SSL erfordert.

TYPO3 7.6 – Inkonsistenter Inhalt in Sprache «Français» gefunden

Vor kurzem habe ich mit einer TYPO3 Seite welche von 6.0 auf 7.6 aktualilsiert wurde, das Problem, dass bei verschiedenen Seiten die Warnung «Inkonsistenter Inhalt in Sprache «Français» gefunden» angezeigt. Auf diesen Seiten war das sortieren oder neu einfügen von französischen Inhalten nicht mehr möglich. Bisher wurden auf dieser Seite teils Seiten identisch übersetzt, teils mit differierenden Inhalten in den beiden Sprachen Deutsch und Französisch gefüllt.

Folgende Zeile im pageTS deaktiviert das Handling der inkonsistenten Sprachen deaktivieren:

mod.web_layout.allowInconsistentLanguageHandling = 1

KeeWeb – Keepass Selfhosted als Webseite

Gestern habe ich bei Cashy einen Beitrag über KeeWeb gelesen. KeeWeb ist eine WebApp welche lokal eine Keepass Datei öffnen und bearbeiten kann. Es ist auch möglich auf eine Keepass-Datei zuzugreifen, welche in der Dropbox abgelegt ist.

Die Installation bei cyon ist denkbar einfach.

  1. neue Subdomain, z.B. keeweb.domain.ch erstellen
  2. die Subdomain per SSL absichern. Bei einer unverschlüsselten Verbindung warnt KeeWeb
  3. Verzeichnis Passwort schützen
  4. von der KeeWeb Seite die notwendigen 2 Dateien herunterladen
  5. Die beiden Dateien index.html und manifest.appcache auf den Webserver laden

Wenn nun auch Dropbox eingebunden werden soll, muss im Developer Bereich von Dropbox eine App erstellt werden. Als Return-Path muss die URL von keeweb.domain.ch angegeben werden.

  1. App-Key kopieren
  2. sich per SSH mit dem Server verbinden (bei cyon in jedem Hostingpaket inklusive) und in das Verzeichnis von KeeWeb wechseln
  3. den Befehl "sed -i.bak s/qp7ctun6qt5n9d6/your_app_key/g index.html" ausführen (ohne Anführungszeichen)

Danach kann auch von Dropbox eine Datei geöffnet werden.

Spannender Ansatz. Ob dies nun perfekt sicher ist, darüber lässt sich streiten. Die Daten werden lokal im Browsercache abgelegt (abgesehen von Dropbox). Es ist auf jedenfall eine gute Möglichkeit unterwegs oder auch von einem eingeschränkten Firmen-PC aus auf einen Keepass-Conteiner zugreifen zu können.

CMSMS: Smarty Code aus einem String entfernen

Vor kurzem musste ich aus einem Text den allenfalls enthaltenen Smartycode entfernen. Dies geht mit folgendem Regex Snippet:

{$entry->content|regex_replace:"/{[^]]*}/":''|tbTruncateBetter:500:' ...'}

In diesem Beispiel kürze ich mit tbTruncateBetter (ein Plugin des ToolBox Moduls) einen Text auf 500 Zeichen. Nun kann in diesem Text ein Smarty-Tag wie z.B. {Gallery dir =»/irgend/eine/gallery»}  vorkommen. Diese möchte ich in der gekürzten Übersicht natürlich nicht laden. Deshalb habe ich vor den Aufruf von tbTruncateBetter das Regex eingefügt, welches den Smarty-Tag entfernt.

Nochmals kurz:

{$variable|regex_replace:"/{[^]]*}/":''}

 

Philipp Maloney «Auf der Flucht» als Lego-Stop-Motion Film

Vor ein paar Tagen habe ich via Leumund.ch den Lego-Stop-Motion Film der Maloney-Folge «Auf der Flucht» gesehen. Laut dem Erschöpfer des Films, Joel Richard, hat er dafür über 1500 Stunden aufgewendet. Für eine Sekunde im Film hat er im Schnitt ca 1 Stunde aufgewendet. 

Philip Maloney – Auf der Flucht, Teil 1

Philip Maloney – Auf der Flucht, Teil 2

Philip Maloney – Auf der Flucht, Teil 3

Beitrag der Tageschau

Das Schweizer Fernsehen hat in der Tageschau zur Fertigstellung des letzten Teils die Arbeit von Joel Richard dokumentiert und vorgestellt:

Tagesschau Beitrag