Hab kurz dazu eine temporäre Lösung geschrieben die als Ansatz dienen könnte. Folgende Schritte sind notwendig:
1. Installiert die Erweiterung "retina_image"
2. Fügt in eurem Layout-Template folgende Zeile im Head Bereich hinzu (dieser Codeblock muss, von der Reihenfolge her, vor allen anderen Javascript Dateien eingefügt werden):
Code:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';</script>
3 Erstellt euch im /template Verzeichnis eine Datei Namens "ce_image.html5" und fügt folgenden Inhalt ein:
Code:
<?php
if(isset($_COOKIE['resolution'])){
$screenResolution = explode(",", $_COOKIE['resolution']);
$screenWidth = (int) $screenResolution[0];
$screenPixelRatio = isset($screenResolution[1]) ? $screenResolution[1] : 1;
$imgWidth = $this->arrSize[0];
$imgHeight = $this->arrSize[1];
$imgPathinfo = pathinfo($this->src);
$imgSrcRetina = $screenPixelRatio>1 ? $imgPathinfo["dirname"] . "/" . $imgPathinfo["filename"] . "@2x" . "." . $imgPathinfo["extension"] : $imgSrc;
$imgSrc = $screenPixelRatio>1 && file_exists($imgSrcRetina) ? $imgSrcRetina : $this->src;
} else {
$imgSrc = $this->src;
}
?>
<div class="<?php echo $this->class; ?> block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
<?php if ($this->headline): ?>
<<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
<?php endif; ?>
<figure class="image_container"<?php if ($this->margin): ?> style="<?php echo $this->margin; ?>"<?php endif; ?>>
<?php if ($this->href): ?>
<a href="<?php echo $this->href; ?>"<?php if ($this->linkTitle): ?> title="<?php echo $this->linkTitle; ?>"<?php endif; ?><?php echo $this->attributes; ?>>
<?php endif; ?>
<img src="<?php echo $imgSrc; ?>"<?php echo $this->imgSize; ?> alt="<?php echo $this->alt; ?>"<?php if ($this->title): ?> title="<?php echo $this->title; ?>"<?php endif; ?>>
<?php if ($this->href): ?>
</a>
<?php endif; ?>
<?php if ($this->caption): ?>
<figcaption class="caption" style="width:<?php echo $this->arrSize[0]; ?>px"><?php echo $this->caption; ?></figcaption>
<?php endif; ?>
</figure>
</div>
Ab jetzt werden alle Dateien die als Bildartikel eingefügt werden serverseitig als Retina-Bild eingefügt. D.h. es muss zur Laufzeit kein Javascript mehr benutzt werden um das "@2x" zum Bildattribut "src" hinzuzufügen, der Vorteil dadurch ist dass auf Retina Geräten die Bilddateien nicht mehr zwei mal geladen werden müssen (also bild.jpg + bild@2x.jpg). Ich hoffe die Extension kann dahingehend erweitert werden, dass dies für alle Bilder + Insert Tags und nicht nur für Bilder innerhalb von Artikeln gilt.
Viele Grüße
darki
[retina_image] Hochauflösende Bilder für iPad, iPhone, Macbook Pro Retina und Co.
Zitieren
Zitat von Babelfisch
Lesezeichen