responsive image addon

[gupi]

Hallo,
ich habe hier ein Verständnisproblem bein Umgamg mit dem Addon.
In den Dokuzeilen auf github und der Intallationsanweisung hier wird gefordert, das jquery plugin im header bereit zu stellen.
Von welchem plugin für jquery ist denn hier die Rede?
Oder soll jquery selber im header und nicht am Ende des body installiert werden?

Aktuell taucht am Ende des body jetzt auch

Code: Alles auswählen

<script src="/files/addons/responsiveimg/js.js">

auf. Dies wird anscheinend durch das responsive image addon bewirkt.

Da es aber erst am Ende des body tags eingefügt wird, kommt es möglicherweise zu spät um auch auf die bereits geladenen Images auswirkung zu haben. Zumindest vermute ich das, denn die Hintergrundbilder der Jumbotron Divs am Anfang und Ende meiner Seite werden, ohne Beachtung der tatsächlichen Bildschirmgröße in ihrer vollen Größe geladen. Das sieht bei einem großen Bild, mit einer optimierten Auflösung für einen HD-Screen, sehr seltsam aus, wenn man die Seite auf einem smart phone oder tablet betrachtet.

Was also muss ich tun, um das addon auch bei den background images des Jumbotron greifen zu lassen?

So sieht mein Code im Jumbotron Module aus:

Code: Alles auswählen

$content_image = "REX_MEDIA[1]";
if($content_image != '')
	$content_image = seo42::getImageManagerFile($content_image, "bs_jumbotron");

Sehr schön nachzuvollziehen ist der beschriebene Effekt auch auf der REXponsive Demo von Darwin
http://www.rexponsive.de
Hier habe ich die Ideen für meine eigene Umsetzung geklaut
Danke und ein schönes WE
Gunter

[runstop64]

Hi,

Soweit ich mich erinnere ist Responsiveimg nicht mit den SEO-freundlichen URL von SEO42 kompatibel. Diese SEO42-Option muss ausgeschaltet werden, damit Responsiveimg die auszutauschenden Bilder richtig erkennt.

[gupi]

Hi,

danke für den Hinweis, dem werde ich nachgehen. Aktuell sieht das Ergebnis des seo42 Aufrufs so aus und schien mit deshalb unverdächtig:

Code: Alles auswählen

<div class="jumbotron" style="background-image: url(/imagetypes/bs_jumbotron/fotolia_72047399.jpg); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover;">
<div class="jumbo-content"> </div>
</div>

Wie sollte der Aufruf statt dessen aussehen? Kannst du mir damit auf die Sprünge helfen?

Danke und viele Grüße
Gunter

[runstop64]

Ok, dass es ein Hintergrundbild sein soll, war mir nicht bewusst. Responsive Hintergrundbilder sind mit Responsiveimg nicht möglich.
Responsiveimg arbeitet mit Code-Replacement, um die Erkennungsklassen für das Javascript einzuschleusen, dabei wird nach einer bestimmten HTML-Formatierung gesucht. Im wesentlichen ist das ein Standard-Image-Tag mit dem Bildtyp im original Redaxo-Stil

Code: Alles auswählen

<img src="xxxxx?rex_img_type=bildtyp&rex_img__file=bild.xxx" />

Du könntest Responsiveimg so erweitern, dass es auch Inline-Hintergrundbilder erkennt, oder das Bild als img laden und per JS verschieben, beides ist aber nicht unaufwändig. Eventuell besteht auch die Möglichkeit, über CSS-Styles und Media-Queries die verschiedenen Bildstile auszugeben, inline im Style-Tag funktioniert es allerdings nicht.

[gupi]

Hi,
danke für den Hinweis, dann muss ich also ganz anders vorgehen und nicht mehr meine Zeit mit Fehlesuche verplempern.
Mal sehen wie ich das angehe, wenn ich was brauch- und vorzeigbares hinkriege, werd ich's hier posten.

Danke nochmals und ein schönes WE
Gunter