Inhalte aufrufen

Profilbild
- - - - -

Responsive HTML-Inhalte in SmartStore.NET 3


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

#1 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 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="#" ... />
 
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
  • 1598 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
  • 2779 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;}
.category-description 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
www.stahldeko-shop.com


#4 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 Beiträge

Geschrieben: 27 July 2017 - 16:56

Hi,

 

mit dem nächsten Release wird das Zufügen der Klasse und auch der Workaround über das eigene CSS nicht mehr nötig sein:

https://github.com/s...88893331dcea7af

 

MfG


Michael Herzog
Smartstore AG


#5 Michael Herzog

Michael Herzog

    SmartStore AG

  • Administrators
  • 3497 Beiträge

Geschrieben: 10 August 2017 - 14:06

Responsive Tabellen

 

auf Layouting mit Hilfe von Tabellen muss generell verzichtet werden, statt dessen sollte der Link berücksichtigt werden, der weiter oben (unter Layout) aufgeführt ist.

 

Wenn man allerdings eine tabellerarische Auflistung darstellen möchte, kommt man um die Nutzung eines Table-Tags nicht herum. Um dieses responsive zu machen genügt das Zufügen von CSS-Klassen wie in folgendem Beispiel:

<table class="table table-responsive">
...
</table>

Michael Herzog
Smartstore AG


#6 stefanmueller

stefanmueller

    SmartStore AG

  • Administrators
  • 459 Beiträge

Geschrieben: 16 March 2021 - 15:49

Zu diesem Thema gibt es hier einen Blogbeitrag "Tipps & Tricks: Bootstrap für Shopbetreiber":

 

https://smartstore.c...ricks-bootstrap


Stefan