Vorschaubilder im Backend mit responsive Images riesig!

[Kahmoon]

Tach beisammen,

mir ist in 3.4.x schon aufgefallen das Vorschaubilder im Backend (Inhaltslement) nicht mehr klein skaliert werden, sondern in voller Größe angezeigt werden, sobald man eine Vorlage der responsive Images verwendet. Leider wurde das mit 3.5 nicht geändert... Nicht sooo schön.

Siehe Anhang (Das Bild ist im Original 1100px breit)

Was kann man tun?

VG
Frank

[ciaobello]

Was kann man tun?

Gucken ob es schon ein Ticket/Issue gibt auf Github?! Wenn nicht, gucken ob es in der Demo nachstellen kannst. Die ist zwar noch 3.4.4 aber Du meintest ja dass es dir da schon auffiel.

[Kahmoon]

Ja, kann man in der Demo nachstellen.

Ticket auf Github argh . Ich versuchs mal

Edit:
https://github.com/contao/core/issues/7875

[BugBuster]

Wie ist bei dir eingestellt die maximale Größe bis zu der GD die Bilder umrechnen soll?

[Kahmoon]

3000px ist da bei Breite und Höhe eingestellt

[BugBuster]

Also beim besten Willen, ich bekomme das nicht nachgestellt.
Ein Bild, welches ein markierten wichtigen Teil hat, bewirkt bei mir im Backend und Frontend das genau dieser angezeigt wird.
Auch "Links|Oben" habe ich mal probiert, funktioniert.

Hast du Größen angegeben oder nur die Auswahl?

Bitte mal Schritt für Schritt was genau man tun muss um zu deinem Ergebnis zu kommen.

[Kahmoon]

Also ich bekomme das auch in der Demo ohne viel Einstellungen reproduziert. Siehe Github Ticket. Auch bei Galerien ist das Problem sogar noch schlimmer vorhanden.

Aber es geht hier ja auch nur ums Backend. Hier wird von den Bilder schlicht keine kleine Vorschau mehr erzeugt sobald die responsive Images Technik ausgewählt ist.

Dieses Inhaltselement Galerie ist nicht aufgeklappt sondern sieht von Haus aus so aus. Bei größeren Galerien kannst du dir vorstellen wie lang das wird wenn unterhalb noch andere Elemente kommen

[Spooky]

Im Github Ticket hast du aber auch nicht deine genauen Einstellungen gepostet, ich bekomme es auch nicht hin das Problem zu reproduzieren.

[MacKP]

Ist das eventuell auch ein Browser Problem? Im Backend wird das JS für Browser die das nicht können ja glaube ich nicht geladen oder?

Viele Grüße

[Kahmoon]

Hmm weiß nicht. Aber FF und Chrome sollte es ja können oder?

Gerade aber sicherheitshalber noch mal in Chrome und IE geschaut. Gleicher Fehler.

[Spooky]

Wie gesagt, poste alle Einstellungen deiner verwendeten Bildgröße.

[Kahmoon]

Hier

[BugBuster]

Uh, ach soweit gehst du da rein, von diesen Angaben habe ich bisher Abstand genommen, zu wenig Ahnung.
Werde ich aber heute Abend mal nachbauen. Mal den Vortrag auf der Konferenz und die Demo von Kim rauskramen und vergleichen. Nachtrag: Ups, den gibts noch nicht. Wollte Kim noch tun.

Erste Idee, das 100vw also 100% Viewport (hieß es doch, oder?) überschreibt die maximale Größe die im Backend, keine Ahnung wo, definiert ist.

Die Mediaqueries greifen ja nur im Frontend würde ich denken.

[Kahmoon]

Uh, ach soweit gehst du da rein, von diesen Angaben habe ich bisher Abstand genommen, zu wenig Ahnung.

Ja, ich eigentliuch auch...aber ich brauche ja diese Größe für unterschiedliche Bildschirmgrößen oder nicht?

Ich hoffe das MQ nur im Frontend greifen. Im Backend wäre es ein Bug oder?

Ich habe gerade zum Test mal das Mediaquery für meinen Desktop gelöscht um zu sehen ob sich im Backend was ändert. Negativ! Auch wenn ich das 100vw entferne ändert sich nix.

[Spooky]

Hier

Hm, das sind aber nicht alle Media Queries. Hast du bei den fehlenden bspw. auch überall 1x, 2x bei Pixel densities/scale factors eingetragen?

[Spooky]

Ja, ich eigentliuch auch...aber ich brauche ja diese Größe für unterschiedliche Bildschirmgrößen oder nicht?

Dafür solltest du eigentlich nur das Sizes-Attribut + Skalierungsfaktor verwenden, wie schon in einem anderen Thread erwähnt.

Ich hoffe das MQ nur im Frontend greifen. Im Backend wäre es ein Bug oder?

Media Queries werden vom Browser angewandt. Frontend oder Backend spielt hier keine Rolle (sofern der Code mit Media Queries ausgegeben wird).

[Kahmoon]

Ja, aber ich habs leider nach wie vor nicht ganz gerafft . Im Frontend funktioniert es so auf jeden Fall wie gewünscht.

[Spooky]

Also ich hab's mit deinen Einstellungen gerade getestet, im Backend wird mir wie erwartet auch nur das 710px große Bild angezeigt. Poste mal den Source vom Backend.

[Kahmoon]

Das ist aber viel

<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Blog &amp; Fotowall » Aktuelles » - Contao Open Source CMS 3.5</title><base href="http://www.frankdaniels.de/"><meta name="generator" content="Contao Open Source CMS"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="stylesheet" href="assets/css/40b07a3d655d.css"><!--[if IE]><link rel="stylesheet" href="system/themes/flexible/iefixes.css"><![endif]--><link rel="stylesheet" href="system/modules/efg/assets/w50_fix.css"><link rel="stylesheet" href="system/modules/tags/assets/tag.css"><link rel="stylesheet" href="system/modules/m17StickyBEFooter/assets/m17StickyBeFooter.css"><link rel="stylesheet" href="system/modules/multicolumnwizard/html/css/multicolumnwizard.css"><link rel="stylesheet" href="system/modules/easy_themes/html/easy_themes.css" media="screen"><script>var Contao={theme:"flexible",lang:{close:"Schließen",collapse:"Bereich schließen",expand:"Bereich öffnen",loading:"Die Daten werden geladen",apply:"Anwenden",picker:"Bitte gehen Sie zurück zum Seiten- bzw. Dateiwähler und nehmen Sie dort eine Auswahl vor,bevor Sie den Dialog schließen."},script_url:"",path:"",request_token:"d4e66c4b0e26c92a473f3e71cd6806de",referer_id:"10175d69"};</script><script src="assets/js/c645dbb867ea.js"></script><script>Locale.define("en-US","Date",{months:["Januar","Februar","März","April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],days:["Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag"],months_abbr:["Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"],days_abbr:["So","Mo","Di","Mi","Do","Fr","Sa"]});Locale.define("en-US","DatePicker",{select_a_time:"Uhrzeit auswählen",use_mouse_wheel:"Ändern Sie die Werte mit Hilfe des Mausrads",time_confirm_button:"OK",apply_range:"Anwenden",cancel:"Abbruch",week:"W"});</script><script src="system/modules/m17StickyBEFooter/assets/m17StickyBeFooter.js"></script><script src="system/modules/tags/assets/tag.js"></script><script src="system/modules/multicolumnwizard/html/js/multicolumnwizard_be.js"></script><script src="system/modules/easy_themes/html/easy_themes.js"></script><!--[if lt IE 9]><script src="assets/html5shiv/3.7.2/html5shiv.min.js"></script><![endif]--></head><body id="top" class="win firefox gecko fx38 version_3-5-0"><div id="header" class="collapsible"><h1>Contao Open Source CMS 3.5.0</h1><div class="collapsible_area"><div id="tmenu"> <span class="header_user_container"><a href="http://www.frankdaniels.de/contao/main.php?do=login&amp;ref=10175d69" class="header_user" title="Persönliche Daten ändern oder ein neues Passwort setzen">Benutzer fberger</a></span> <span class="header_preview_container"><a href="contao/preview.php" target="_blank" class="header_preview" title="Vorschau der Webseite in einem neuen Fenster" accesskey="f">Frontend-Vorschau</a></span> <span class="header_home_container"><a href="http://www.frankdaniels.de/contao/main.php" class="header_home" title="Zurück zur Backend-Startseite" accesskey="h">Startseite</a></span> <span class="header_logout_container"><a href="http://www.frankdaniels.de/contao/" class="header_logout" title="Die aktuelle Sitzung beenden" accesskey="q">Abmelden</a></span></div></div></div> <div id="container"><ul id="easy_themes" class="easytheme_level_1 easythemes_inject easythemes_short"><li class="easytheme_level_1_group"><a class="navigation" href="contao/main.php?do=themes&amp;act=edit&amp;id=1&rt=d4e66c4b0e26c92a473f3e71cd6806de" title="">frankdaniels.de V2</a><ul class="easytheme_level_2"><li class="easytheme_level_2_link"><a class="navigation" title="Die Stylesheets des Theme ID 1 bearbeiten" href="contao/main.php?do=themes&amp;table=tl_style_sheet&amp;id=1"><span class="icon"><img src="system/themes/flexible/images/css.gif" width="17" height="16" alt="Stylesheets"></span></a></li><li class="easytheme_level_2_link"><a class="navigation" title="Die Frontend-Module des Theme ID 1 bearbeiten" href="contao/main.php?do=themes&amp;table=tl_module&amp;id=1"><span class="icon"><img src="system/themes/flexible/images/modules.gif" width="16" height="16" alt="Module"></span></a></li><li class="easytheme_level_2_link"><a class="navigation" title="Die Seitenlayouts des Theme ID 1 bearbeiten" href="contao/main.php?do=themes&amp;table=tl_layout&amp;id=1"><span class="icon"><img src="system/themes/flexible/images/layout.gif" width="14" height="16" alt="Seitenlayouts"></span></a></li><li class="easytheme_level_2_link"><a class="navigation" title="Die Bildgrößen des Theme ID 1 bearbeiten" href="contao/main.php?do=themes&amp;table=tl_image_size&amp;id=1"><span class="icon"><img src="system/themes/flexible/images/sizes.gif" width="16" height="16" alt="Bildgrößen"></span></a></li></ul></li></ul><script>window.addEvent('domready',function (){
        new EasyThemes({
            mode: 'inject',
            delay: 500
});
});</script><div id="left"><div id="tl_navigation" class="collapsible"><h1>Backend-Module</h1> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=a465d950#skipNavigation" class="invisible">Navigation überspringen</a><ul class="tl_level_1 collapsible_area"><li class="tl_level_1_group trail"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=content&amp;ref=10175d69" title="Bereich schließen" onclick="return AjaxRequest.toggleNavigation(this,'content')"><img src="system/themes/flexible/images/modMinus.gif" width="16" height="16" alt="">Inhalte</a></li><li class="tl_parent" id="content"><ul class="tl_level_2"><li><a href="contao/main.php?do=article&amp;ref=10175d69" class="navigation article" title="Artikel und Inhaltselemente verwalten.">Inhalte</a></li><li><a href="contao/main.php?do=news&amp;ref=10175d69" class="navigation news active" title="Nachrichten Inhaltselemente verwalten." style="background-image:url('system/modules/news/assets/icon.gif')">Blog & Fotowall</a></li><li><a href="contao/main.php?do=form&amp;ref=10175d69" class="navigation form" title="Individuelle Formulare gestalten und deren Daten speichern oder versenden.">Formulare</a></li><li><a href="contao/main.php?do=cameraslideshow&amp;ref=10175d69" class="navigation cameraslideshow" title="Slideshows verwalten" style="background-image:url('system/modules/cameraslideshow/assets/images/camera.png')">Slideshows</a></li><li><a href="contao/main.php?do=comments&amp;ref=10175d69" class="navigation comments" title="Kommentare bzw. Gästebuch-Einträge verwalten" style="background-image:url('system/modules/comments/assets/icon.gif')">Kommentare</a></li></ul></li><li class="tl_level_1_group"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=formdata&amp;ref=10175d69" title="Bereich öffnen" onclick="return AjaxRequest.toggleNavigation(this,'formdata')"><img src="system/themes/flexible/images/modPlus.gif" width="16" height="16" alt="">Formular-Daten</a></li><li class="tl_level_1_group easy_themes_toggle easy_themes_expanded"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=design&amp;ref=10175d69" title="Bereich schließen" onclick="return AjaxRequest.toggleNavigation(this,'design')"><img src="system/themes/flexible/images/modMinus.gif" width="16" height="16" alt="">Layout</a></li><li class="tl_parent" id="design"><ul class="tl_level_2"><li><a href="contao/main.php?do=themes&amp;ref=10175d69" class="navigation themes" title="Frontend-Module, Stylesheets, Seitenlayouts und Templates verwalten">Themes</a></li><li><a href="contao/main.php?do=page&amp;ref=10175d69" class="navigation page" title="Die Seitenstruktur der Webseite(n) erstellen">Seitenstruktur</a></li><li><a href="contao/main.php?do=tpl_editor&amp;ref=10175d69" class="navigation tpl_editor" title="Templates im Backend bearbeiten">Templates</a></li></ul></li><li class="tl_level_1_group"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=accounts&amp;ref=10175d69" title="Bereich schließen" onclick="return AjaxRequest.toggleNavigation(this,'accounts')"><img src="system/themes/flexible/images/modMinus.gif" width="16" height="16" alt="">Benutzerverwaltung</a></li><li class="tl_parent" id="accounts"><ul class="tl_level_2"><li><a href="contao/main.php?do=member&amp;ref=10175d69" class="navigation member" title="Mitgliederkonten verwalten (Frontend-Benutzer)">Mitglieder</a></li><li><a href="contao/main.php?do=mgroup&amp;ref=10175d69" class="navigation mgroup" title="Mitgliedergruppen verwalten (Frontend-Benutzergruppen)">Mitgliedergruppen</a></li><li><a href="contao/main.php?do=memberfields&amp;ref=10175d69" class="navigation memberfields" title="Dieses Modul erlaubt Ihnen die Erstellung zusätzlicher Mitgliederfelder für TYPOlight Mitglieder." style="background-image:url('system/modules/xtmembers_fieldeditor/assets/memberfields.png')">Mitgliederfelder</a></li><li><a href="contao/main.php?do=user&amp;ref=10175d69" class="navigation user" title="Benutzerkonten verwalten (Backend-Benutzer)">Benutzer</a></li><li><a href="contao/main.php?do=group&amp;ref=10175d69" class="navigation group" title="Benutzergruppen verwalten (Backend-Benutzergruppen)">Benutzergruppen</a></li></ul></li><li class="tl_level_1_group"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=system&amp;ref=10175d69" title="Bereich schließen" onclick="return AjaxRequest.toggleNavigation(this,'system')"><img src="system/themes/flexible/images/modMinus.gif" width="16" height="16" alt="">System</a></li><li class="tl_parent" id="system"><ul class="tl_level_2"><li><a href="contao/main.php?do=files&amp;ref=10175d69" class="navigation files" title="Dateien und Ordner verwalten oder neue Dateien auf den Server übertragen">Dateiverwaltung</a></li><li><a href="contao/main.php?do=log&amp;ref=10175d69" class="navigation log" title="Das System-Log durchsuchen und die Aktivität auf der Webseite analysieren">System-Log</a></li><li><a href="contao/main.php?do=settings&amp;ref=10175d69" class="navigation settings" title="Die Contao-Konfiguration prüfen und optimieren">Einstellungen</a></li><li><a href="contao/main.php?do=maintenance&amp;ref=10175d69" class="navigation maintenance" title="Contao warten oder aktualisieren">Systemwartung</a></li><li><a href="contao/main.php?do=BackupDB&amp;ref=10175d69" class="navigation BackupDB" title="Liefert eine Backup-Kopie der Datenbank als Download" style="background-image:url('system/modules/BackupDB/iconBackup.gif')">Backup Datenbank</a></li><li><a href="contao/main.php?do=undo&amp;ref=10175d69" class="navigation undo" title="Gelöschte Datensätze wiederherstellen">Wiederherstellen</a></li><li><a href="contao/main.php?do=repository_catalog&amp;ref=10175d69" class="navigation repository_catalog" title="Das Extension Repository durchsuchen und Erweiterungen installieren" style="background-image:url('system/modules/repository/themes/default/images/catalog16.png')">Erweiterungskatalog</a></li><li><a href="contao/main.php?do=repository_manager&amp;ref=10175d69" class="navigation repository_manager" title="Installierte Erweiterungen verwalten oder entfernen" style="background-image:url('system/modules/repository/themes/default/images/install16.png')">Erweiterungsverwaltung</a></li></ul></li><li class="tl_level_1_group"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;mtg=devtools&amp;ref=10175d69" title="Bereich öffnen" onclick="return AjaxRequest.toggleNavigation(this,'devtools')"><img src="system/themes/flexible/images/modPlus.gif" width="16" height="16" alt="">Entwickler-Tools</a></li></ul> <a id="skipNavigation" class="invisible">&nbsp;</a></div></div> <div id="main"><h1 class="main_headline">Blog & Fotowall » Aktuelles » </h1> <form action="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=a465d950" class="tl_form" method="post"><div class="tl_formbody"> <input type="hidden" name="FORM_SUBMIT" value="tl_filters"> <input type="hidden" name="REQUEST_TOKEN" value="d4e66c4b0e26c92a473f3e71cd6806de"><div class="tl_panel"><div class="tl_filter tl_subpanel"><strong>Filtern:</strong> <select name="type" id="type" class="tl_select"><option value="tl_type">Elementtyp</option><option value="tl_type">---</option><option value="image">Bild</option><option value="gallery">Galerie</option><option value="alias">Inhaltselement</option><option value="text">Text</option></select> <select name="protected" id="protected" class="tl_select"><option value="tl_protected">Element schützen</option><option value="tl_protected">---</option><option value="">nein</option></select> <select name="guests" id="guests" class="tl_select"><option value="tl_guests">Nur Gästen anzeigen</option><option value="tl_guests">---</option><option value="">nein</option></select> <select name="invisible" id="invisible" class="tl_select"><option value="tl_invisible">Unsichtbar</option><option value="tl_invisible">---</option><option value="">nein</option></select></div><div class="clear"></div></div><div class="tl_panel"><div class="tl_submit_panel tl_subpanel"> <input type="image" name="filter" id="filter" src="system/themes/flexible/images/reload.gif" class="tl_img_submit" title="Die Änderungen anwenden" alt="Anwenden"></div><div class="tl_limit tl_subpanel"><strong>Anzeigen:</strong> <select name="tl_limit" class="tl_select" onchange="this.form.submit()"><option value="tl_limit">Datensätze</option><option value="0,50" selected>1 - 5</option><option value="all">Alle</option></select></div><div class="tl_search tl_subpanel"><strong>Suchen:</strong> <select name="tl_field" class="tl_select"><option value="alt">Alternativer Text</option><option value="imageUrl">Bildlink-Adresse</option><option value="caption">Bildunterschrift</option><option value="code">Code</option><option value="html">HTML-Code</option><option value="mooClasses">Klassennamen</option><option value="rel">Lightbox</option><option value="url">Link-Adresse</option><option value="linkTitle">Link-Text</option><option value="titleText">Link-Titel</option><option value="text">Text</option><option value="title">Titel</option><option value="headline">Überschrift</option><option value="summary">Zusammenfassung</option></select> <span> = </span> <input type="search" name="tl_value" class="tl_text" value=""></div><div class="clear"></div></div></div></form><div id="tl_buttons"> <a href="contao/main.php?do=news&amp;table=tl_news&amp;id=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=a4b5380f" class="header_back" title="Zurück zur vorherigen Seite" accesskey="b" onclick="Backend.getScrollOffset()">Zurück</a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;act=paste&amp;mode=create&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" class="header_new" title="Ein neues Element erstellen" accesskey="n" onclick="Backend.getScrollOffset()">Neues Element</a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;act=select&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" class="header_edit_all" title="Mehrere Datensätze auf einmal bearbeiten" onclick="Backend.getScrollOffset()" accesskey="e">Mehrere bearbeiten</a></div><div class="tl_listing_container parent_view"><div class="tl_header click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"> <a href="contao/main.php?do=news&amp;table=tl_news&amp;id=287&amp;act=edit&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" class="edit" title="Die Artikeleinstellungen bearbeiten"><img src="system/themes/flexible/images/header.gif" width="16" height="16" alt="Artikel bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=2&amp;pid=287&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neue Formatdefinition oben erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neue Formatdefinition oben erstellen"></a></div><table class="tl_header_table"><tr><td><span class="tl_label">Titel:</span> </td><td>Auftragsshooting Mädelsabend</td></tr><tr><td><span class="tl_label">Autor:</span> </td><td>Frank</td></tr><tr><td><span class="tl_label">Änderungsdatum:</span> </td><td>11.06.2015 18:31</td></tr><tr><td><span class="tl_label">Beitrag veröffentlichen:</span> </td><td>ja</td></tr><tr><td><span class="tl_label">Anzeigen ab:</span> </td><td>-</td></tr><tr><td><span class="tl_label">Anzeigen bis:</span> </td><td>-</td></tr></table></div><ul id="ul_287"><li id="li_1672"><div class="tl_content even click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"><a href="contao/main.php?do=news&amp;table=tl_content&amp;act=edit&amp;id=1672&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1672 bearbeiten" class="edit"><img src="system/themes/flexible/images/edit.gif" width="12" height="16" alt="Element bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=copy&amp;id=1672&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1672 duplizieren" class="copy" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/copy.gif" width="14" height="16" alt="Element duplizieren"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=cut&amp;id=1672&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1672 verschieben" class="cut" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/cut.gif" width="16" height="16" alt="Element verschieben"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=delete&amp;id=1672&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1672 löschen" class="delete" onclick="if(!confirm('Soll der Eintrag ID 1672 wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"><img src="system/themes/flexible/images/delete.gif" width="14" height="16" alt="Element löschen"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;tid=1672&amp;state=&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Die Sichtbarkeit des Inhaltselements ID 1672 ändern" class="toggle" onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,1672)"><img src="system/themes/flexible/images/visible.gif" width="17" height="16" alt="Sichtbarkeit ändern"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=show&amp;id=1672&amp;popup=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Details des Inhaltselements ID 1672 anzeigen" onclick="Backend.openModalIframe({'width':768,'title':'Details des Inhaltselements ID 1672 anzeigen','url':this.href});return false" class="show"><img src="system/themes/flexible/images/show.gif" width="14" height="16" alt="Elementdetails"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=1&amp;pid=1672&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neues Element nach dem Inhaltselement ID 1672 erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neues Element nach dem Inhaltselement ID 1672 erstellen"></a> <img src="system/themes/flexible/images/drag.gif" width="14" height="16" alt="" class="drag-handle" title="Inhaltselement ID 1672 verschieben"></div><div class="cte_type published">Bild</div><div class="limit_height"><div class="ce_image protected block"> <figure class="image_container protected">      <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/3/2015-05-09_M%C3%A4delsabend_8960_web-479e2b83.jpg 1x, assets/images/d/2015-05-09_M%C3%A4delsabend_8960_web-1271e08d.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/d/2015-05-09_M%C3%A4delsabend_8960_web-1d47e84d.jpg 1x, assets/images/7/2015-05-09_M%C3%A4delsabend_8960_web-e4d24957.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_8960_web-772f25aa.jpg" media="(max-width: 767px)"><source srcset="assets/images/1/2015-05-09_M%C3%A4delsabend_8960_web-c6c675f1.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/3/2015-05-09_M%C3%A4delsabend_8960_web-3ff87193.jpg" sizes="100vw" alt="{{news_title::287}}" title="{{news_title::287}}"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></div></div></div></li><li id="li_1673"><div class="tl_content odd click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"><a href="contao/main.php?do=news&amp;table=tl_content&amp;act=edit&amp;id=1673&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1673 bearbeiten" class="edit"><img src="system/themes/flexible/images/edit.gif" width="12" height="16" alt="Element bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=copy&amp;id=1673&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1673 duplizieren" class="copy" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/copy.gif" width="14" height="16" alt="Element duplizieren"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=cut&amp;id=1673&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1673 verschieben" class="cut" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/cut.gif" width="16" height="16" alt="Element verschieben"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=delete&amp;id=1673&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1673 löschen" class="delete" onclick="if(!confirm('Soll der Eintrag ID 1673 wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"><img src="system/themes/flexible/images/delete.gif" width="14" height="16" alt="Element löschen"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;tid=1673&amp;state=&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Die Sichtbarkeit des Inhaltselements ID 1673 ändern" class="toggle" onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,1673)"><img src="system/themes/flexible/images/visible.gif" width="17" height="16" alt="Sichtbarkeit ändern"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=show&amp;id=1673&amp;popup=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Details des Inhaltselements ID 1673 anzeigen" onclick="Backend.openModalIframe({'width':768,'title':'Details des Inhaltselements ID 1673 anzeigen','url':this.href});return false" class="show"><img src="system/themes/flexible/images/show.gif" width="14" height="16" alt="Elementdetails"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=1&amp;pid=1673&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neues Element nach dem Inhaltselement ID 1673 erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neues Element nach dem Inhaltselement ID 1673 erstellen"></a> <img src="system/themes/flexible/images/drag.gif" width="14" height="16" alt="" class="drag-handle" title="Inhaltselement ID 1673 verschieben"></div><div class="cte_type published">Text</div><div class="limit_height"><div class="ce_text block"><div class="ce_inside"> <p>Servus beisammen,</p><p>in diesem Blogbeitrag zeige ich euch ein paar Fotos aus einem Auftragsshooting mit Manu und Ihren Schwestern, bei dem lustige und lockere Fotos als Erinnerung und Geschenk entstehen sollten.</p><p>Bei dieser Gelegenheit kam auch direkt mal unser neuer Buzzer für einen Fotobooth zum Einsatz. Sprich die Mädels durften die Kamera selbst auslösen und dabei rumblödeln was das Zeug hält. Am Schluss gab es dann noch ein paar Portraits mit Ringlicht.</p><p>Danke für euer Vertrauen. Es war ein lustiger Abend!</p></div></div></div></div></li><li id="li_1674"><div class="tl_content even click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"><a href="contao/main.php?do=news&amp;table=tl_content&amp;act=edit&amp;id=1674&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1674 bearbeiten" class="edit"><img src="system/themes/flexible/images/edit.gif" width="12" height="16" alt="Element bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=copy&amp;id=1674&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1674 duplizieren" class="copy" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/copy.gif" width="14" height="16" alt="Element duplizieren"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=cut&amp;id=1674&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1674 verschieben" class="cut" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/cut.gif" width="16" height="16" alt="Element verschieben"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=delete&amp;id=1674&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1674 löschen" class="delete" onclick="if(!confirm('Soll der Eintrag ID 1674 wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"><img src="system/themes/flexible/images/delete.gif" width="14" height="16" alt="Element löschen"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;tid=1674&amp;state=&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Die Sichtbarkeit des Inhaltselements ID 1674 ändern" class="toggle" onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,1674)"><img src="system/themes/flexible/images/visible.gif" width="17" height="16" alt="Sichtbarkeit ändern"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=show&amp;id=1674&amp;popup=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Details des Inhaltselements ID 1674 anzeigen" onclick="Backend.openModalIframe({'width':768,'title':'Details des Inhaltselements ID 1674 anzeigen','url':this.href});return false" class="show"><img src="system/themes/flexible/images/show.gif" width="14" height="16" alt="Elementdetails"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=1&amp;pid=1674&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neues Element nach dem Inhaltselement ID 1674 erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neues Element nach dem Inhaltselement ID 1674 erstellen"></a> <img src="system/themes/flexible/images/drag.gif" width="14" height="16" alt="" class="drag-handle" title="Inhaltselement ID 1674 verschieben"></div><div class="cte_type published">Galerie</div><div class="limit_height"><div class="ce_gallery protected block"> <!-- indexer::stop --><ul class=" responsive"><li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/9/2015-05-09_M%C3%A4delsabend_8987_web-c98da059.jpg 1x, assets/images/a/2015-05-09_M%C3%A4delsabend_8987_web-d63a2d9a.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/f/2015-05-09_M%C3%A4delsabend_8987_web-f7b0578f.jpg 1x, assets/images/3/2015-05-09_M%C3%A4delsabend_8987_web-10544f73.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/b/2015-05-09_M%C3%A4delsabend_8987_web-41e9f06b.jpg" media="(max-width: 767px)"><source srcset="assets/images/7/2015-05-09_M%C3%A4delsabend_8987_web-544a7227.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/7/2015-05-09_M%C3%A4delsabend_8987_web-1553c5d7.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_8987_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> <li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/6/2015-05-09_M%C3%A4delsabend_8991_web-4c995df6.jpg 1x, assets/images/1/2015-05-09_M%C3%A4delsabend_8991_web-e73c6391.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/5/2015-05-09_M%C3%A4delsabend_8991_web-e84aaeb5.jpg 1x, assets/images/4/2015-05-09_M%C3%A4delsabend_8991_web-95f0eba4.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_8991_web-e612e9da.jpg" media="(max-width: 767px)"><source srcset="assets/images/9/2015-05-09_M%C3%A4delsabend_8991_web-be8109e9.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/b/2015-05-09_M%C3%A4delsabend_8991_web-ff601d6b.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_8991_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> <li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/1/2015-05-09_M%C3%A4delsabend_8997_web-97ae6cb1.jpg 1x, assets/images/b/2015-05-09_M%C3%A4delsabend_8997_web-ee4ba9cb.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/1/2015-05-09_M%C3%A4delsabend_8997_web-add0b601.jpg 1x, assets/images/0/2015-05-09_M%C3%A4delsabend_8997_web-1bedc950.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_8997_web-eaf6438a.jpg" media="(max-width: 767px)"><source srcset="assets/images/6/2015-05-09_M%C3%A4delsabend_8997_web-b7e92c36.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/9/2015-05-09_M%C3%A4delsabend_8997_web-d22cb7a9.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_8997_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> <li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/c/2015-05-09_M%C3%A4delsabend_9005_web-6a6d285c.jpg 1x, assets/images/c/2015-05-09_M%C3%A4delsabend_9005_web-65e5999c.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/c/2015-05-09_M%C3%A4delsabend_9005_web-a3d0273c.jpg 1x, assets/images/f/2015-05-09_M%C3%A4delsabend_9005_web-8cefd5ff.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/d/2015-05-09_M%C3%A4delsabend_9005_web-5e282ddd.jpg" media="(max-width: 767px)"><source srcset="assets/images/2/2015-05-09_M%C3%A4delsabend_9005_web-1c7a8e42.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/0/2015-05-09_M%C3%A4delsabend_9005_web-000919e0.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_9005_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> <li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/5/2015-05-09_M%C3%A4delsabend_9010_web-85d9a9d5.jpg 1x, assets/images/7/2015-05-09_M%C3%A4delsabend_9010_web-10185127.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/7/2015-05-09_M%C3%A4delsabend_9010_web-641ef777.jpg 1x, assets/images/9/2015-05-09_M%C3%A4delsabend_9010_web-9061b349.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/e/2015-05-09_M%C3%A4delsabend_9010_web-74f5b3fe.jpg" media="(max-width: 767px)"><source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_9010_web-d10362da.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/7/2015-05-09_M%C3%A4delsabend_9010_web-8a360387.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_9010_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> <li class="col_0 col_first col_last" style="width:100%;"><figure class="image_container protected">          <picture><!--[if IE 9]><video style="display: none;"><![endif]--><source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-22a91afa.jpg 1x, assets/images/1/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-aa3e9961.jpg 2x" media="(max-width: 360px)"><source srcset="assets/images/7/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-a89681e7.jpg 1x, assets/images/7/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-94a7afe7.jpg 2x" media="(max-width: 480px)"><source srcset="assets/images/c/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-68a29ddc.jpg" media="(max-width: 767px)"><source srcset="assets/images/d/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-8b27d48d.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]--><img src="assets/images/7/2015-05-09_M%C3%A4delsabend_H%C3%A4nde_Kollage_web-ea0fc5b7.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_Hände_Kollage_web.jpg"></picture><script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure></li> </ul><!-- indexer::continue --></div></div></div></li><li id="li_1679"><div class="tl_content odd click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"><a href="contao/main.php?do=news&amp;table=tl_content&amp;act=edit&amp;id=1679&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1679 bearbeiten" class="edit"><img src="system/themes/flexible/images/edit.gif" width="12" height="16" alt="Element bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=copy&amp;id=1679&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1679 duplizieren" class="copy" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/copy.gif" width="14" height="16" alt="Element duplizieren"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=cut&amp;id=1679&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1679 verschieben" class="cut" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/cut.gif" width="16" height="16" alt="Element verschieben"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=delete&amp;id=1679&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1679 löschen" class="delete" onclick="if(!confirm('Soll der Eintrag ID 1679 wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"><img src="system/themes/flexible/images/delete.gif" width="14" height="16" alt="Element löschen"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;tid=1679&amp;state=&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Die Sichtbarkeit des Inhaltselements ID 1679 ändern" class="toggle" onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,1679)"><img src="system/themes/flexible/images/visible.gif" width="17" height="16" alt="Sichtbarkeit ändern"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=show&amp;id=1679&amp;popup=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Details des Inhaltselements ID 1679 anzeigen" onclick="Backend.openModalIframe({'width':768,'title':'Details des Inhaltselements ID 1679 anzeigen','url':this.href});return false" class="show"><img src="system/themes/flexible/images/show.gif" width="14" height="16" alt="Elementdetails"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=1&amp;pid=1679&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neues Element nach dem Inhaltselement ID 1679 erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neues Element nach dem Inhaltselement ID 1679 erstellen"></a> <img src="system/themes/flexible/images/drag.gif" width="14" height="16" alt="" class="drag-handle" title="Inhaltselement ID 1679 verschieben"></div><div class="cte_type published">Inhaltselement ID 1536</div><div class="limit_height"><div class="ce_text akquisition block"><div class="ce_inside"> <p>Hat euch der Beitrag gefallen? Dann hinterlasst mir doch ein Feedback in den <a href="{{env::request}}#kommentare" rel="nofollow">Kommentaren</a>.</p></div></div></div></div></li><li id="li_1680"><div class="tl_content even click2edit toggle_select" onmouseover="Theme.hoverDiv(this,1)" onmouseout="Theme.hoverDiv(this,0)"><div class="tl_content_right"><a href="contao/main.php?do=news&amp;table=tl_content&amp;act=edit&amp;id=1680&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1680 bearbeiten" class="edit"><img src="system/themes/flexible/images/edit.gif" width="12" height="16" alt="Element bearbeiten"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=copy&amp;id=1680&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1680 duplizieren" class="copy" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/copy.gif" width="14" height="16" alt="Element duplizieren"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=paste&amp;mode=cut&amp;id=1680&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1680 verschieben" class="cut" onclick="Backend.getScrollOffset()"><img src="system/themes/flexible/images/cut.gif" width="16" height="16" alt="Element verschieben"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=delete&amp;id=1680&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Inhaltselement ID 1680 löschen" class="delete" onclick="if(!confirm('Soll der Eintrag ID 1680 wirklich gelöscht werden?'))return false;Backend.getScrollOffset()"><img src="system/themes/flexible/images/delete.gif" width="14" height="16" alt="Element löschen"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;tid=1680&amp;state=&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Die Sichtbarkeit des Inhaltselements ID 1680 ändern" class="toggle" onclick="Backend.getScrollOffset();return AjaxRequest.toggleVisibility(this,1680)"><img src="system/themes/flexible/images/visible.gif" width="17" height="16" alt="Sichtbarkeit ändern"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=show&amp;id=1680&amp;popup=1&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Details des Inhaltselements ID 1680 anzeigen" onclick="Backend.openModalIframe({'width':768,'title':'Details des Inhaltselements ID 1680 anzeigen','url':this.href});return false" class="show"><img src="system/themes/flexible/images/show.gif" width="14" height="16" alt="Elementdetails"></a> <a href="contao/main.php?do=news&amp;table=tl_content&amp;act=create&amp;mode=1&amp;pid=1680&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=10175d69" title="Neues Element nach dem Inhaltselement ID 1680 erstellen"><img src="system/themes/flexible/images/new.gif" width="12" height="16" alt="Neues Element nach dem Inhaltselement ID 1680 erstellen"></a> <img src="system/themes/flexible/images/drag.gif" width="14" height="16" alt="" class="drag-handle" title="Inhaltselement ID 1680 verschieben"></div><div class="cte_type published">Inhaltselement ID 487</div><div class="limit_height"><div class="ce_text block" id="autoreninfo"><div class="ce_inside"><h4>Über den Autor: Frank Berger</h4> <figure class="image_container protected float_left"> <img src="assets/images/2/team_Franky_Autor-1a9bdc72.jpg" width="75" height="101" alt="Frank Berger von frankdaniels.de" title="Frank Berger von frankdaniels.de"> </figure> <p><a href="https://plus.google.com/111768936872948636114?rel=author" target="_blank"><strong>Frank Berger</strong></a> aus München ist leidenschaftlicher Fotograf und Mediendesigner. Bereits seit 2011 beschäftigt er sich intensiv mit der People- und Eventfotografie. Sie können Frank per <a title="{{link_title::12}}" href="{{link_url::12}}">Mail</a>, <a href="https://plus.google.com/111768936872948636114/posts?hl=de" rel="nofollow" target="_blank">Google+</a> oder auch <a title="Frank Berger auf Facebook" href="https://www.facebook.com/kuerbisPilot" rel="nofollow" target="_blank">Facebook</a> kontaktieren.</p></div></div></div></div></li></ul><script>Backend.makeParentViewSortable("ul_287");</script></div></div><div class="clear"></div></div><div id="footer"><div> <span class="footer_top_container"><a href="contao/main.php?do=news&amp;table=tl_content&amp;id=287&amp;rt=d4e66c4b0e26c92a473f3e71cd6806de&amp;ref=a465d950#top" class="footer_top" title="An den Anfang der Seite springen" accesskey="t">Nach oben</a></span> <span class="footer_preview_container"><a href="contao/preview.php" target="_blank" class="footer_preview" title="Vorschau der Webseite in einem neuen Fenster">Frontend-Vorschau</a></span></div></div> </body></html>

[Spooky]

Macht ja nichts . Hilft aber leider auch nicht, das müsste man sich mal direkt bei dir im Backend ansehen.

[Kahmoon]

Im Source finde ich folgendes:

<script>window.respimage&&window.respimage({elemen ts: [document.images[document.images.length - 1]]});</script>

<figure class="image_container protected">
<picture><!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="assets/images/6/2015-05-09_M%C3%A4delsabend_8991_web-4c995df6.jpg 1x, assets/images/1/2015-05-09_M%C3%A4delsabend_8991_web-e73c6391.jpg 2x" media="(max-width: 360px)">
<source srcset="assets/images/5/2015-05-09_M%C3%A4delsabend_8991_web-e84aaeb5.jpg 1x, assets/images/4/2015-05-09_M%C3%A4delsabend_8991_web-95f0eba4.jpg 2x" media="(max-width: 480px)">
<source srcset="assets/images/a/2015-05-09_M%C3%A4delsabend_8991_web-e612e9da.jpg" media="(max-width: 767px)">
<source srcset="assets/images/9/2015-05-09_M%C3%A4delsabend_8991_web-be8109e9.jpg" media="(min-width: 980px) AND (max-width: 1140px)"><!--[if IE 9]></video><![endif]-->
<img src="assets/images/b/2015-05-09_M%C3%A4delsabend_8991_web-ff601d6b.jpg" sizes="100vw" alt="2015-05-09_Mädelsabend_8991_web.jpg"></picture>
<script>window.respimage&&window.respimage({elements: [document.images[document.images.length - 1]]});</script></figure>

Kann es das sein?

Edit:
Wenn ich mein Backend per strg + M skaliere und die Seite neu lade, nimmt er tatsächlich eine der reponsive Größen. Eigentlich sollte sowas ja nicht im Backend sein oder?

[Spooky]

Kann es das sein?

Nein das sieht alles normal aus.

Eigentlich sollte sowas ja nicht im Backend sein oder?

Nein, wie gesagt, es spielt keine Rolle ob du dich im Frontend oder Backend befindest.

[Kahmoon]

Ja, dann ist es aber verständlich das er die größte Version im Backend nimmt. Nur scheint das diese automatische Verkleinerung im Backend + das Zuklappen des Inhaltselements bei Galerien zu "deaktivieren".

[Spooky]

Ja, dann ist es aber verständlich das er die größte Version im Backend nimmt.

Naja du solltest eigentlich das 710px große Bild sehen, nicht das Original.

Nur scheint das diese automatische Verkleinerung im Backend + das Zuklappen des Inhaltselements bei Galerien zu "deaktivieren".

Eigentlich nicht, es funktioniert alles wie es soll . Vielleicht gibt es hier ein Misverständnis?

[BugBuster]

zum Verhalten beim verkleinern des Browsers siehe hier
http://pmueller.de/blog/responsive-grafiken.html

Da gibts je nach Browser unterschiede wie die sich verhalten. "...Die Grafiken werden nur noch geändert, wenn man den Browser in einem kleinen Fenster startet und dann vergrößert."
Hilft jetzt nicht den Bug zu finden, aber zum Testen sollte man das beachten.

Update: Firefox versteht seit Version 38 responsive Grafiken und tauscht im Gegensatz zu Chrome/Opera die Grafiken auch beim Verkleinern des Viewport von groß nach klein - allerdings erst nach einem Neuladen der Seite.

[Kahmoon]

Ich kenne Galerien halt noch so das sie auch "zusammengeklappt" werden in der Vorschau - siehe Anhang. Allerdings scheint das wohl schon eine Weile nicht mehr so zu sein.

Update: Firefox versteht seit Version 38 responsive Grafiken und tauscht im Gegensatz zu Chrome/Opera die Grafiken auch beim Verkleinern des Viewport von groß nach klein - allerdings erst nach einem Neuladen der Seite.

Jepp, das wusste ich. Macht er auch ganz brav im Frontend. Nur haben die eingestellten Bildgrößen fürs Frontend eigentlich imho nichts in der Backendansicht zu suchen!?

[Spooky]

Ich kenne Galerien halt noch so das sie auch "zusammengeklappt" werden in der Vorschau - siehe Anhang. Allerdings scheint das wohl schon eine Weile nicht mehr so zu sein.

Was genau meinst du mit "zusammengeklappt"?

Für die Ansicht von Galerie Inhaltselementen im Backend lädt Contao folgendes CSS:

.ce_gallery ul {
    overflow:hidden;
}
.ce_gallery li {
    float:left;
    margin:0 6px 6px 0;
} 

Siehe https://github.com/contao/core/blob/...main.css#L1140 bzw. https://github.com/contao/core/blob/...main.css#L1149

Dadurch werden die Bilder auch im Backend nebeneinander dargestellt, sofern es deine Bildgrößeneinstellungen zulassen. Wenn die einzelnen Bilder aufgrund deiner Bildgrößeneinstellung zu groß sind, bricht es natürlich um.

Nur haben die eingestellten Bildgrößen fürs Frontend eigentlich imho nichts in der Backendansicht zu suchen!?

Das wäre dann ein Feature Request, momentan hast du, zumindest bei diesen Inhaltselemente, im Backend einfach den selben HTML Output wie im Frontend.

[Kahmoon]

Mit "zusammengeklappt" meine ich das das Inhaltselement verkürzt ist (Ich rede von der Backendansicht). Auf dem Screenshot sind 4 Fotos nebeneinander und es gibt einen grünen Pfeil um das Element groß darzustellen. Aktuell zeigt er mir alle Fotos dieser Galerie an und nicht nur eine Vorschau wie im Screenshot.

Hmm das ist aber eigentlich doof...ich sehe das eher als Bug statt Feature Request :-). Ich mein ich kann/muss damit leben....schön ist es aber nicht.

[Spooky]

Mit "zusammengeklappt" meine ich das das Inhaltselement verkürzt ist (Ich rede von der Backendansicht). Auf dem Screenshot sind 4 Fotos nebeneinander und es gibt einen grünen Pfeil um das Element groß darzustellen. Aktuell zeigt er mir alle Fotos dieser Galerie an und nicht nur eine Vorschau wie im Screenshot.

Hm, da stimmt aber was nicht bei dir, dieses Verhalten ist in allen Contao Versionen gleich. Wenn die Höhe des Inhalts des Inhaltselements einen gewissen Wert übersteigt, wird dem Inhaltselement eine Maximalhöhe gegeben und mit dem grünen Pfeil kann das Element auf die volle Größe expandiert werden. Das ist auch noch in Contao 3.5 so und ist auch bei mir lokal so, bspw. mit einer Galerie mit den von dir geposteten Bildgrößeneinstellungen.

[Kahmoon]

Hmm bei mir auf zwei unterschiedlichen Installationen C3.4 und C3.5 nicht (auch ohne responsive Images). Vielleicht funkt da ein Modul rein.

Edit:
Nein...auch im abgesicherten Modus wird da nix verborgen/verkleinert. In der Contao Demo tuts das aber...keine Ahnung warum bei mir nicht mehr.

[Spooky]

Ah, evt. hast du die Option Elemente nicht verkürzen unter System - Einstellungen - Backend-Einstellungen aktiviert?

[Kahmoon]

OK, Problem eins haben wir schon mal behoben! Wusste gar nicht das es so eine Einstellung gibt vor allem warum sie an ist!????

Bleiben noch die Bildgrößen

[mandrake]

Contao verwendet zur Darstellung der Bilder bei Inhaltselementen im BE die jeweiligen Angaben unter "Bildbreite und Bildhöhe", d.h. es werden auch die Vorgaben zu den responsive Images 1:1 umgesetzt. Dieses Verhalten war - so weit ich es beurteilen kann - schon immer so und hat sich auch seit Einführung der responsive Images Funktionen nicht geändert.

Diese Vorgehensweise bringt mitunter - verschärft bei Verwendung von Viewport Einheiten (vh,vw,vmin,vmax) bei den responsive Images Einstellungen - allerdings u.a. zwei nicht unwesentliche Nachteile mit sich:

01: Erhöhung der Ladezeit von BE Seiten, in deren Artikel viele Bilder enthalten sind.

02: Erhöhung der Unübersichtlichkeit bzw. Verminderung der Benutzerfreundlichkeit bei der redaktionellen Bearbeitung betreffender Inhaltselemente.

Der Kernpunkt der Diskussion müsste meinen Ansicht nach also wie folgt lauten: Ist diese Vorgehensweise prinzipiell überhaupt sinnvoll oder notwendig?

Auch wenn ich den Sachverhalt jetzt vielleicht nicht in allen Einzelheiten und für alle denkbaren Anwendungsfälle durchdacht habe, stelle ich einfach einmal die Frage in den Raum, warum für die Darstellung von Bildern in Inhaltselementen im BE nicht auch einfach generell Thumbnails wie in der Dateiverwaltung genutzt werden?!

Wie ist Eure Meinung dazu?

[Kahmoon]

Du triffst von Anfang bis Ende den Nagel auf den Kopf.

[Marion]

Ich hatte dasselbe Problem, aber auch im Frontend, nicht nur im Backend. Schuld waren fehlende Module auf dem Server (GD-Library und Imagick). Sind die beiden auf deinem Server drauf und enabled?
Siehe https://community.contao.org/de/show...ails-angezeigt

[Kahmoon]

Jepp, sonst würde es ja ohne responsive Images auch nicht funktionieren oder?

[Marion]

Auch wieder wahr. Und da Contao die Thumbnails im gleichen Bildformat wie das Original speichert, kann es auch nicht an einer Einstellung in der GD-Library liegen.