[phpBB Debug] PHP Warning: in file [ROOT]/ext/tas2580/seourls/event/listener.php on line 213: Undefined array key "FORUM_NAME"
Neues Addon: responsiveImg - REDAXO Forum
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/
NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Neues Addon: responsiveImg

27. Sep 2013, 17:50

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. 8) )

Gruß
Nico

iceman-fx
Beiträge: 467
Registriert: 13. Feb 2007, 16:16
Wohnort: Sachsen
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

30. Sep 2013, 08:51

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

_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com

Benutzeravatar
Oliver.Kreischer
Beiträge: 2508
Registriert: 17. Dez 2004, 00:03
Wohnort: Velbert - LA
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

30. Sep 2013, 08:53

Hey Nico,

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!

Benutzeravatar
jdlx
Beiträge: 2615
Registriert: 29. Sep 2005, 10:50
Wohnort: Hamburg
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

30. Sep 2013, 11:34

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

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

30. Sep 2013, 12:38

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

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

18. Okt 2013, 11:02

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

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 :roll:
Danke. grz. Chris

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

18. Okt 2013, 11:10

*klatsch aufs hirn*.. läuft.
Nix breakpoint.j sondern die js.js ins template rein ...
sry .. :oops: :P
grz. Chris

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

18. Okt 2013, 12:24

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

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

8. Nov 2013, 12:40

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

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

11. Nov 2013, 08:40

Hallo Chris,

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


Gruß
Nico

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

11. Nov 2013, 12:21

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? ... :oops:
[/]
ich check das mal durch .. Danke schonmal.
grz. Chris

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: Neues Addon: responsiveImg

11. Nov 2013, 12:36

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

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

22. Nov 2013, 11:38

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

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: Neues Addon: responsiveImg

22. Nov 2013, 13:25

Coole Seite Chris :D 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.'
	}
});

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

22. Nov 2013, 15:28

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

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

22. Nov 2013, 15:37

@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

Benutzeravatar
RexDude
Beiträge: 2543
Registriert: 22. Apr 2010, 11:24

Re: Neues Addon: responsiveImg

22. Nov 2013, 15:50

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

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

26. Nov 2013, 20:10

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

Benutzeravatar
rkemmere
Beiträge: 486
Registriert: 6. Feb 2007, 17:47
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

29. Nov 2013, 13:23

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

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

30. Nov 2013, 18:10

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

Benutzeravatar
rkemmere
Beiträge: 486
Registriert: 6. Feb 2007, 17:47
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

3. Dez 2013, 15:51

Hallo Nico,

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

Viele Grüße
Ronny

iceman-fx
Beiträge: 467
Registriert: 13. Feb 2007, 16:16
Wohnort: Sachsen
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

6. Dez 2013, 12:36

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.
VG iceman

_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com

NGW
Beiträge: 132
Registriert: 1. Mär 2011, 09:12
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

6. Dez 2013, 16:06

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?

Benutzeravatar
darwin
Beiträge: 1725
Registriert: 2. Jan 2007, 17:10
Wohnort: LA

Re: Neues Addon: responsiveImg

6. Dez 2013, 16:53

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

iceman-fx
Beiträge: 467
Registriert: 13. Feb 2007, 16:16
Wohnort: Sachsen
Kontaktdaten: Website

Re: Neues Addon: responsiveImg

9. Dez 2013, 16:51

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.
VG iceman

_____________________________________________________________
www.fotodesign360.de / www.falkomueller.com

Zurück zu „Allgemeines [R4]“