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
Hallo,
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Wir haben in letzter Zeit festgestellt, dass die Kommunikation via Slack viel schneller und zielführender ist als ein Beitrag im Forum. Aufgrund der neuen und besseren Möglichkeiten der Kommunikation haben wir uns entschlossen das Forum nur noch als Archiv zur Verfügung zu stellen. Somit bleibt es weiterhin möglich hier nach Lösungen zu suchen. Neue Beiträge können nicht mehr erstellt werden.
Wir empfehlen, für deine Fragen/Probleme Slack zu nutzen. Dort sind viele kompetente Benutzer aktiv und beantworten jegliche Fragen, gerne auch von REDAXO-Anfängern! Slack wird von uns sehr intensiv und meistens "rund um die Uhr" benutzt
Selbst einladen kannst Du dich hier: https://redaxo.org/slack/
Re: Neues Addon: responsiveImg
Danke für das tolle Addon.
Wenn es jetzt noch mit dem TinyMCE nativ funktionieren würde, wäre es super.
Wenn es jetzt noch mit dem TinyMCE nativ funktionieren würde, wäre es super.
VG iceman
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com
- Oliver.Kreischer
- Beiträge: 2508
- Registriert: 17. Dez 2004, 00:03
- Wohnort: Velbert - LA
- Kontaktdaten: Website
Re: Neues Addon: responsiveImg
Hey Nico,
klasse Idee. Danke sehr!
LG
Oliver
klasse Idee. Danke sehr!
LG
Oliver
> Friends Of REDAXO Gemeinsame REDAXO-Entwicklung!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!
> REDAXO Agenturen. Eintragen erwünscht!
> Komm in den Slack Channel Es lohnt sich!
Re: Neues Addon: responsiveImg
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..
vg, Jan
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
*klatsch aufs hirn*.. läuft.
Nix breakpoint.j sondern die js.js ins template rein ...
sry ..
grz. Chris
Nix breakpoint.j sondern die js.js ins template rein ...
sry ..
grz. Chris
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
Hallo Chris,
in einer Slideshow habe ich das Skript bisher nicht genutzt. Hast du mal einen Beispiellink für dein Problem?
Gruß
Nico
in einer Slideshow habe ich das Skript bisher nicht genutzt. Hast du mal einen Beispiellink für dein Problem?
Gruß
Nico
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
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
Ich habe deswegen auch einen Patch im Angebot: https://github.com/RexDude/resource_inc ... 000cc81daf
Re: Neues Addon: responsiveImg
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
ist hier im Einsatz: Klick
grz. Chris
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));
});
});
grz. Chris
Re: Neues Addon: responsiveImg
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:
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.'
}
});
Re: Neues Addon: responsiveImg
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 killingist hier im Einsatz: KlickCode: 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)); }); });
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
Re: Neues Addon: responsiveImg
@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
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
Re: Neues Addon: responsiveImg
@chris: auch das magnific popup css austauschen nicht vergessen. da kommt das prob nämlich her
Re: Neues Addon: responsiveImg
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
http://www.redaxo.org/de/download/addons/?addon_id=1125 (oder auch im github)
Gruß
Nico
Re: Neues Addon: responsiveImg
Danke Nico für dieses Addon.
Ich bekomme es aber einfach nicht zum laufen.
Auf der einen Referenzseite haben die Images data-min Werte
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
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">
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
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
Hallo Nico,
danke für die Anleitung. Ich werde das bei meinem aktuellen Projekt mal versuchen so umzusetzen.
Viele Grüße
Ronny
danke für die Anleitung. Ich werde das bei meinem aktuellen Projekt mal versuchen so umzusetzen.
Viele Grüße
Ronny
Re: Neues Addon: responsiveImg
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 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.
VG iceman
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com
Re: Neues Addon: responsiveImg
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?
Oder hast du eine extra REX_MEDIA_BUTTON Eingabe?
Re: Neues Addon: responsiveImg
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
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
Re: Neues Addon: responsiveImg
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.
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.
VG iceman
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com
_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com