Inhalte aufrufen

Profilbild
- - - - -

Responsive HTML-Inhalte in SmartStore.NET 3


  • Bitte melden Sie sich an, um eine Antwort zu verfassen.
2 Antworten zu diesem Thema

#1 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3411 Beiträge

Geschrieben: 24 May 2017 - 14:25

HTML-Inhalte können in SmartStore.NET an mehreren Stellen über einen HTML-Editor erfasst werden, z.B. in der ausführlichen Produktbeschreibung, in Widgets oder HTML-Seiten, im Content Slider, dem Mega Menu usw. Für die responsive Darstellung dieser Inhalte in SmartStore.NET 3, gilt ein paar Dinge im Hinterkopf zu behalten. 
 
Responsive Bilder 
 
Nachdem ein Bild über den HTML-Editor eingefügt wurde, muss mann einmal in den HTML-Quellcode gehen, den man bequem über einen Button im HTML-Editor erreichen kann. Das style Attribut des img-Elements sollte entfernt werden und das Bild sollte mit der Klasse img-fluid augestattet werden.
<img class="img-fluid" scr="#" ... />
 
Tabellarisches Layout 
 
Es kommt relativ häufig vor, dass man Inhalte über mehrere Spalten aufteilen möchte. Da SmartStore.NET 3 mit Bootstrap 4 erstellt wurde, kann man die Klassen welche von Bootstrap zur Verfügung gestellt werden für diese Zwecke nutzen.
 
Ein paar einfache Beispiele sind unter folgendem Link einsehbar:
 
 
##################
## To be continued ##
################

  • bauer-music gefällt das

Michael Herzog
Smartstore AG


#2 MediArt

MediArt

    Profi

  • Members
  • 1538 Beiträge

Geschrieben: 24 May 2017 - 14:38

Hallo zusammen,

 

was bedeutet das für die Bilder in den diversen HTML-Texten nach dem Update auf die V3: Die muss dann ja wohl hoffentlich nicht händisch alle im Quelltext nachbearbeiten?


  • mara gefällt das
Grüßle, Marion

#3 kusnez

kusnez

    V.I.P

  • Members
  • 2380 Beiträge

Geschrieben: 25 May 2017 - 09:25

Hallo

 

 

muss mann einmal in den HTML-Quellcode gehen

Um nicht jedes Bild bearbeiten zu müssen habe ich in "_custom.scss" folgendes eingefügt:

 

#pd-tabs-1 img{ max-width: 100%; height: auto !important;}
.page-body img{ max-width: 100%; height: auto !important;}

1. Zeile für Produkt-Langtext
2. Zeile für Warengruppe-Langtext

danach werden auch die Tabellen (mit Bilder) ordentlich angezeigt (skaliert).


  • MediArt, noco und mara gefällt das
M.f.G.
E. Kusnezov
www.stahldeko-shop.de