es ist mir schon häufiger aufgefallen, dass bei den Blogbeiträgen, wenn ich bei der Bearbeitung auf “html” klicke am Ende des üblichen Codes einen riesen Buchstabensalat habe (anders kann mans nicht nennen).
Zunächst kommt der korrekte Code und danach sowas:
Merken
Inzwischen habe ich festgestellt, dass dieser Quatsch erst erscheint, wenn ein Bild über “Bild einfügen/verändern” eingefügt wird (also das Baumsymbol im Editor). Die Bilder liegen alle im Mediamanager - Album Blog. Ein Bild, das über die Bildauswahl eingefügt wird, verursacht dieses Problem scheinbar nicht.
Dennoch muss es irgendwie möglich sein, im Fließtext Bilder unterzubringen.
Da am Ende des Codes “Merken” steht: Das ist für mich eigentlich der Hinweis auf Pinterest. Allerdings habe ich kein Plugin dazu im Shop installiert. Aber ein Browser-Addon habe ich dazu, so wird mir auf allen Internetseiten bei Fotos der Pin-Button angezeigt. Das dürfte sch aber doch nicht im Blogcode verewigen?!?
Also über mediaselection ist dieser Anhang nicht da, soweit so gut.
Allerdings sind auch hier einfach durch einfügen von Bild 1, dann Leerschriftt, einfügen Bild 2, die Bilder nicht nebeneinander zu bekommen. Ist das ohne Tabelle nicht machbar? Die Tabelle ist optisch bescheiden, da jede zweite Zeile eine Hintergrundfarbe hat vom Template her.
du kannst ansich auch statt einer Tabelle einen < span> - oder einen < div > - Bereich machen, dem du eine Klasse gibst (beispielsweise < div class = „left“ > … < /div > ) und die Klasse dann einfach in deiner LESS-Datei entsprechend hinterlegst, beispielsweise mit:
.left {
float: left;
}
oder:
.left {
display: inline-block;
}
Tabellen sind eher 80er Jahre , da sie ansich auch nicht wirklich responsiv umsetzbar sind. < span > - und < div > - Bereich dagegen schon.
Ich weiß, dass Tabellen veraltet sind. Aber wie das in diesem Fall mit den Less-Dateien funktioniert, weiß ich nicht.
Da es hier um Blogbeiträge geht, die manchmal Bilder im Fließtext haben, manchmal nicht oder nur eins, ist mir nicht klar, wie sich das zusammenfindet. Die Less-Dateien beziehen sich doch auf den gesamten Shop oder nicht?
Da würde ich schon lieber nur bei Bedarf im Beitrag was basteln. Ich versuchs mal mit Span oder div, aber wie du weißt, schmeiß ich ja gerne die Dinge durcheinander
prinzipiell beziehen sich die LESS-Dateien natürlich auf den ganzen Shop, du kannst die Klasse ja aber beispielsweise „ich-bin-eine-blog-klasse-float-left“ nennen, die wird dann also auch nur dort vorhanden sein und angewendet werden.
Wenn du natürlich schon mit HTML arbeitest, könntest du auch einmal probieren, ob der Editor auch:
.left {
display: inline-block;
}
annimmt, so bräuchtest du keine LESS-Datei extra. Bei float solltest du beachten, auch ein span am Ende mit einer Klasse mit clear: left; zu machen.
„Quicky and dirty“ könntest du natürlich auch folgenden Code nutzen:
Also jetzt mal Butter bei die Fische, Tabellen sind nicht oldschool, sondern haben natürlich immer noch ihre Berechtigung im Web. Man sollte sie nur nicht mehr zum Layouten nehmen, so wie das eben früher gemacht worden ist. Und natürlich können Tabellen auch responsive sein, Da gibt es mittlerweile sogar 'ne Menge an Darstellungsarten, wie z.B hier zu sehen ist: http://codepen.io/search/pens?q=responsive+tables&limit=all&type=type-pens
Tabellen sind also nur schlecht, wenn sie zu Layoutzwecken missbraucht werden! Inhalte, die tabellarische Daten enthalten, sind natürlich in Tabellen am besten aufgehoben
Heutzutage benutzt man eben Elemente wie z.B. div oder span, was auch nicht immer nur toll ist. Ich empfehle hierzu gerne mal die Suchbegriffe “DIV-Suppe”, SPAN-Suppe".oder gerne auch “DIV-Wahnsinn”.
Ich denke Du solltest dich einfach mal ein bisschen mehr mit HTML und CSS beschäftigen, denn so schwer ist das eigentlich gar nicht. Sieht am Anfang alles ganz “wild” aus, aber das ist alles letzendlich doch recht easy und bildet halt auch die Grundbasis, die Du einfach beherrschen solltest, wenn Du an Deinem Shop ein paar Kleinigkeiten verändern oder anpassen willst. Vergiss also erst mal das total unnötige LESS Gedönse und versuch einfach mal eine neue, leere CSS Datei in Deinen Shop einzubinden. In dieser kannst Du dann erst mal die gewünschten bzw. selbsterstellten Dinge stylen, wie z.B. Deine DIVs; Tabellen, Bilder oder was auch immer. Das ist alle mal besser wie ein Haufen unnötiger Inline-Styles in den Code zu ballern.
Also ich habe mich in das Less-Gedöns 2015 eingelesen, ebenso mit dem ableiten des Templates befasst, als ich den Shop erstellt habe. Ich hab mich zurecht gefunden, für das was ich benötigt habe - also eher im Kleinen. Da ich aber sonst in der Regel nichts damit zu tun habe und dann monatelang was anderes mache (meine eigentliche Arbeit), muss ich mich da ggf. wieder neu einlesen. Da bleibt nicht viel hängen.
Mit CSS habe ich mich vor Jahren schon befasst, im Bereich “einfacher” Internetseiten, da ließ sich auch alles anwenden, wie es bei den entsprechenden Grundlagenseiten zu lesen ist. Nur bei SW greift das so nicht immer. Was wohl am großen Ganzen liegt, das nicht so einfach zu überblicken ist - für mich zumindest.
Ich habe hier aber einen Beitrag gefunden, indem jemand das gleiche Bilderproblem mit Bildern in der Artikelbeschreibung hat, dort scheinen die mir fehlenden Infos erklärt zu sein. Also hab ich mal nen Ansatz.
Ich hab mir jetzt tiefgreifende Gedanken gemacht. Vlt sagst du mir, ob ich richtig liege?
Wenn ich zukünftig im Blog die Bilder nebeneinander anordnen möchte, gebe ich im Blogbeitrag wie folgt an:
< div class = "bildernebeneinander" >
< /div >
Bei der Less ist mir nicht klar, ob vorhandene nehmen oder neue anlegen oder ist das egal? Es gibt bereits eine Blog.less unter _modules. Lege ich nun in meinem Theme unter modules eine blog.less an oder kann/muss ich da eine „meine.less“ anlegen?
Diese Less in meinem Theme bekommt dann vorerst nur den Inhalt:
.bildernebeneinander {
float: left;
}
Sofern das so halbwegs richtig ist:
„bildnebeneinander“ würde ich natürlich nicht verwenden, da zu lang. Könnte ich die div-Klasse “bildernebeneinander” dann z.b. auch in der Artikel- oder Kategoriebeschreibung verwenden oder greift es nur im Blog (wenn die blog.less verwendet wird)?
Wenn das überall greift, bin ich geneigt, eine meine.Less anzulegen und dort nur meine Formatierungen abzulegen. Ist dann leicht zu finden.
Aber an der Stelle weiß ich eben nie, was wo greift. Und was ist, wenn ich zufällig eine div-Klasse wähle, die SW von Haus aus schon verwendet?
NACHTRAG nach mutigem Selbstversuch:
habe unter modules eine mein.less angelegt und in der all.less angegeben. In der mein.less:
.imgleft {
float: left;
}
Im Blogbeitrag geht es nicht wie oben mit div, aber so sind die Bilder nebeneinander:
Allerdings geht der Text jetzt rechts neben den Bildern weiter.
Floating ist nicht mehr wirklich schick - weil man es eben auch besser machen kann! Float wird - mit zunehmenden Browser-Support - auf kurz oder lang von display:flex ersetzt werden.
Dass ich dieses float nochmal aufheben muss dachte ich mir, habs auch hinbekommen:
Im responsinator sehe ich, dass die Bilder bei kleineren Displays untereinander angeordnet werden, also etwa wie in deinem letzten Beitrag murmeltier.
Was mir bei meiner Variante unklar ist:
Wann werden die Bilder zusätzlich nochmal in div gesetzt und warum genügt es bei mir hier mit einer div um beide Bilder?
Hängt das damit zusammen, ob es mehrere Klassen gibt (bei mir jetzt nur eine)?
funktioniert oben zB nicht, also die Klasse muss zu img, aber es genügt beim ersten Bild, muss nicht zu jedem.
Zu deinem letzten Beitrag murmeltier (ich muss die beiden Möglichkeiten gedanklich etwas trennen): Vielen Dank für die Mühe und die Nachtarbeit :-)
Kannst du mir noch schreiben, was die 3 Klassen jeweils bewirken? Übersetzen kann ich das nicht wirklich.
LG
, da sie ansich auch nicht wirklich responsiv umsetzbar sind. < span > - und < div > - Bereich dagegen schon.
Aber wie das in diesem Fall mit den Less-Dateien funktioniert, weiß ich nicht.
