REDAXO Forum

Hallo zusammen,

ich habe vor kurzem ein (für mich) ganz nützliches AddOn entwickelt, welches ich euch zur Verfügung stellen möchte:

http://www.redaxo.org/de/download/addons/?addon_id=1125
https://github.com/NGWNGW/rex_responsiveimg (für Pullrequests, Bug-Meldungen...)

Kurz zusammengefasst: Das Addon sucht im Frontend nach Bildern mit einem speziellen Imagetype und ersetzt ihn dynamisch (je nach Webseitenauflösung) durch einen anderen Imagetype.

Das Addon folgt dem Mobile-First Prinzip: Im Frontend sollte sich die kleinste Variante des Bildes befinden, damit Smartphones nicht unnötig große Bilder laden.

Hier eine kleine Demo:
http://ng-websolutions.de/demos/responsive-image.html

Viel Spaß damit!

(Falls ihr Verbesserungsvorschläge habt: immer her damit.

)

Gruß
Nico

Danke für das tolle Addon.
Wenn es jetzt noch mit dem TinyMCE nativ funktionieren würde, wäre es super.

Hey Nico,

klasse Idee. Danke sehr!

LG
Oliver

Hab mal aus Interesse was du da machst kurz den code überflogen.. seh ich das richtig, daß du bei jedem load 2 sql Abfragen machst? Wenn ja würd ich das unbedingt mit einem caching versehen..

Hi Jan,

ja, zur Zeit läuft es noch so.

Geplant ist aber das generieren einer JS-Datei beim Update der Breakpoints im Backend damit der EP für die dynamische JS-Generierung komplett wegfällt. (ich packe es mal ins Github)

Gruß
Nico

HI..
klasse Addon.. nur ich verstehs grad ned
(steh aufm Schlauch) wie man es verwendet

breakpoint.js ist im Template drin ....

1. Ich leg mir 3 IM-Types im IM an
- responsive_mobile_first (resize auf 360px)
- responsive_400 (resize auf 400)
- responsive_800 (resize auf 800)

2. Dann ?
Im AddOn ResponisveImage
1. Select Feld wird der Bildtyp festgelegt responsive_mobile_first
2. Feld resize auf max Breite
3. Select Feld ... wähle ich hier dann was?

Sry.. steh da bissl daneben

Danke. grz. Chris

*klatsch aufs hirn*.. läuft.
Nix breakpoint.j sondern die js.js ins template rein ...
sry ..

grz. Chris

Hi Chris,

hast du die Version aus dem Github geladen? Da habe ich vor einigen Tagen noch vieles am JS geändert (breakpoint.js komplett rausgeschmissen und die breakpoint-routine selber programmiert).

Die JS-Datei brauchst du im Template nicht hinterlegen, das geschieht per EP. Es muss nur jQuery im Header eingebunden sein.

Für die Modul/AddOn-Ausgabe solltest du dann den mobile_first IM-Type nutzen.

Gruß
Nico

Hi Nico,

ich hab das Addon in Verbindung mit einem bxSlider (Slideshow) mal ausprobiert.
Jedoch zieht es hier die Perfomance ganz schön runter. Kann sein
das ich hier iwas falsch mache... Das AddOn und der Autausch der ImageTypes funktioniert.
1.
Jedoch kommt es mir so vor als würden die Bilder die bereits über den IM ge-resized wurden erneut geladen ...
2. wenn dann natürlich die Settings im AddON "responsiveimg" für 360,480,640,normal gesetzt sind...
dann wir hier auch 4x das Bild ge-resized.

Generell die Frage, wie man das in der Praxis umsetzen sollte
(Responisve SlideShow und der ImageMager + ResponsiveIMG)

DANKE. grz. Chris

Hallo Chris,

in einer Slideshow habe ich das Skript bisher nicht genutzt. Hast du mal einen Beispiellink für dein Problem?

Gruß
Nico

HI Nico,
es hat scheinbar gar nichts mit deinem Addon zu tun.
[kleiner OFFTOPIC]
Scheinbar werden die Bilder über den ImageManager im bxSlider immer wieder
neugeladen (und nicht die ge-cached Bilder) / ge-reseized? ...

[/]
ich check das mal durch .. Danke schonmal.
grz. Chris

Keine Ahnung obs jetzt was damit zu tun hat, aber wegen Caching und IM Bilder bin ich/sind wir hier gerade dran an dem Issue: https://github.com/redaxo/redaxo4/issues/229

Ich habe deswegen auch einen Patch im Angebot: https://github.com/RexDude/resource_inc ... 000cc81daf

HI@all,
hatte nix mit dem Caching zu tun... lediglich der Resize-Aufruf ballerte
die Ganze Zeit.

@Nico
Ruckelt zwar ein wenig, aber dafür läuft es jetzt einwandfrei und
ohne Browser killing

Code: Alles auswählen

$(document).ready(function() {
    /*interval = setInterval(function() {
        $(window).resize(function(){
            $(".responsiveimg").respimg();
        })}
    , 500);
    */
    
    $(".responsiveimg").respimg();
    
    $(window).resize(function() {
        clearTimeout($.data(this, 'resizeTimer'));
        
        $.data(this, 'resizeTimer', setTimeout(function() {
            $(".responsiveimg").respimg();
            // alert("Ich mach mal Pause ... ");
        }, 100));
    });
});

ist hier im Einsatz: Klick
grz. Chris

Coole Seite Chris

Magnific Popup rockt, oder? Die Version die du da jedoch einsetzt hat einen kleinen Makel. Da kommt bei manchen Browsern so ein komischer Rand zum vorschein um die Bilder. Die neueste Version über GitHub gezogen behebt das Prob aber

Und hier noch das deutsch Sprachfile, was ich mir mal zusammengebaut habe. Muss halt vor der Initialisierung eingebunden werden:

Code: Alles auswählen

$.extend(true, $.magnificPopup.defaults, {
	tClose: 'Schließen',
	tLoading: 'Wird geladen...',
	gallery: {
		tPrev: 'Zurück',
		tNext: 'Weiter',
		tCounter: '%curr% von %total%'
	},
	image: {
		tError: 'Das <a href="%url%">Bild</a> konnte nicht geladen werden.'
	},
	ajax: {
		tError: 'Der <a href="%url%">Inhalt</a> konnte nicht geladen werden.'
	}
});

darwin hat geschrieben:HI@all,
hatte nix mit dem Caching zu tun... lediglich der Resize-Aufruf ballerte
die Ganze Zeit.

@Nico
Ruckelt zwar ein wenig, aber dafür läuft es jetzt einwandfrei und
ohne Browser killing

Code: Alles auswählen

$(document).ready(function() {
    /*interval = setInterval(function() {
        $(window).resize(function(){
            $(".responsiveimg").respimg();
        })}
    , 500);
    */
    
    $(".responsiveimg").respimg();
    
    $(window).resize(function() {
        clearTimeout($.data(this, 'resizeTimer'));
        
        $.data(this, 'resizeTimer', setTimeout(function() {
            $(".responsiveimg").respimg();
            // alert("Ich mach mal Pause ... ");
        }, 100));
    });
});

ist hier im Einsatz: Klick
grz. Chris

Hi Chris,

seltsam, ich habe doch eigentlich nen Timer eingebaut. Werde es prüfen und ggf. deinen Code übernehmen! Danke dafür!

Gruß
Nico

@RexDude
Danke. Rockt. Danke auch, für die German language

@Nico timer ja, aber der ballerte immer.
aber mit nem clearTimeout .. is wenigstens ruhe solang man nicht resized

grz. Chris

@chris: auch das magnific popup css austauschen nicht vergessen. da kommt das prob nämlich her

So, die v1.0.1 mit dem aktualisiertem JS Code von darwin ist nun online:

http://www.redaxo.org/de/download/addons/?addon_id=1125 (oder auch im github)

Gruß
Nico

Danke Nico für dieses Addon.

Ich bekomme es aber einfach nicht zum laufen.
Auf der einen Referenzseite haben die Images data-min Werte

Code: Alles auswählen

<img title="" alt="" data-min801="pictures/rex_gallery_6/12194-261.jpg" data-min767="pictures/rex_gallery_768/12194-261.jpg" data-min481="pictures/rex_gallery_640/12194-261.jpg" data-min361="pictures/rex_gallery_480/12194-261.jpg" data-min321="pictures/rex_gallery_360/12194-261.jpg" data-min300="pictures/rex_gallery_320/12194-261.jpg" data-active="9999" data-min1="pictures/rex_gallery_6/12194-261.jpg" src="pictures/rex_gallery_6/12194-261.jpg" class="responsiveimg">

Müssen diese eingebaut werden? Wie muss dann die Konfiguration im Image Manager und im responsiveImg Addon sein?

Ich gehe mal davon aus, dass die Typen rex_gallery_640, rex_gallery_480 usw. im Image Manager angelegt sein müssen. Nur wie dann verbinden mit dem responsiveImg Addon?

Viele Grüße
Ronny

Hallo Ronny,

die data-min* Attribute werden vom AddOn automatisch angelegt.

1. Voraussetzung ist, dass jQuery im Header eingebunden ist.

2. Dann legst du im ImageManager die verschiedenen Image-Typen für die Größen an:
Mobile first (kleinste Variante), beliebig viele andere Größen (wie z.B. rex_gallery_640, rex_gallery_480...).

3. Auf der Webseite musst du die Bilder dann mit dem Mobile-First Typen einbinden.

4. Auf der Reponsiveimg-AddOn Einstellungsseite kannst du dann die Breakpoints einrichten:
- Hauptbild (Mobile First) ist der Image-Typ, den du auf der Webseite nutzt (siehe Punkt 3)
- Mindestbreite ist der Breakpoint
- Responsive ist der Image-Typ, der beim Breakpoint zum Einsatz kommen soll.

Dann sollte es funktionieren

Falls nicht, kannst du dich gerne nochmal melden (auch per PN oder Email...)

Gruß
Nico

Hallo Nico,

danke für die Anleitung. Ich werde das bei meinem aktuellen Projekt mal versuchen so umzusetzen.

Viele Grüße
Ronny

Ich hänge mich mal hier ran, da ich es auch noch nicht hinbekommen habe.

Wie muss ich denn bei Verwendung des TinyMCE vorgehen.
Da wähle ich bzw. der Benutzer ja nur das Bild aus dem MP aus, was auch weiterhin so gemacht werden sollte.

Wie das mit Bildern aussieht, die über den TinyMCE eingefügt werden, weiß ich nicht. Das lief doch damals über rex-resize und nicht über den image-manager.

Oder hast du eine extra REX_MEDIA_BUTTON Eingabe?

Hi,
generell würde ich auch eher empfehlen die Module so aufzubauen
das man eine Textarea hat (textile oder tinymce) und ein Media-Button (Bild).
Im tinymce würde ich generell den Bild Btn ausknippsen

.

Könnte dann so aussehen (mit jquery.ui tabs):
[ externes Bild ]

Auch der Aufbau einer Responsive Seite mit den Modulen / Slices kann einfach gelöst werden.
Man fügt dem Modul eine Select-Auswahl hinzu (1-12 Grids) und berechnet den Restwert
für den nächsten Slice (tipp: globale $REX-Variable).

Slice:
[ externes Bild ]
Modul:
[ externes Bild ]

wenns die Zeit zulässt, erstell ich mal n Tut dazu

grz. Chris

grz. Chris

Danke für die Idee, aber diese Lösung ist mir zu sehr eingeschränkt.

Man möchte ja auch mal mehrere Bilder im Text verankern oder die Positionen frei wählen oder ... .
Deshalb bietet man ja einen grafischen Editor an.
Aber das ist reine Ansichtssache.

REDAXO Forum

Neues Addon: responsiveImg

Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg

Re: Neues Addon: responsiveImg