Neues Feld "Maximale Breite in Pixel" für mobile

[meilenstein]

Ein herzliches Hallo an alle!

Ich möchte gerne eine bestehendes Custom-Element erweitern.
In meinem Fall ist es das Element "Überschrift [Erweitert]".
Hier würde ich gerne die Möglichkeit hinzufügen, das man das Feld "Maximale Breite in Pixel" auch für Mobile Seiten einstellen kann.

Das neue Feld habe ich soweit eingefügt und mit neuem neuem Lesbaren Alias "max_width_mobile" versehen.
Entsprechend habe ich auch versucht das Template "customelement_headline_extended" mit den neuen Feldern zu überabeiten.
Genau hier aber habe ich meiner Probleme...

Wenn ich das so mache wir hier angegeben:

<?php if($this->field('max_width_mobile')->value()): ?>max-width:<?php echo $this->field('max_width_mobile')->value(); ?>px;<?php endif; ?>

erscheint die max-width Ausgabe als inline Style. Somit habe ich dann allerdings keine Trennung zwischen Desktop und Mobil Ausgabe.

Hier mangelt es mir zu sehr an Programmiererfahrung. Hat jemand ein Tipp für mich, wie das lösen könnte?
Tausend Dank
Art

[Tim]

Erstelle im Template einen <style> Block und darin das normale CSS inkl. MediaQueries. Es ist nicht nötig inline-styles zu schreiben.

VG,

[meilenstein]

Hallo Tim,
danke für Deine schnelle Antwort.

Leider kann ich Dir nicht ganz folgen... Das liegt nicht an Dir, sondern viel mehr an mir ;-)

Die Werte die man unter "Maximale Breite" eintragen kann, können doch variieren, oder?
Wenn man unter "Maximale Breite" in der Desktop-Version einen Wert eingibt, wird dieser als Inline CSS ausgegeben.
Wie kann ich einerseits freie Pixelangaben machen und dann fest per CSS Style ausgeben? Sorry, bin wirklich nicht vom Fach.
Hast du für mich vielleicht ein Code Snipet, welches mir das veranschaulicht?

Nochmals Dankeschön für deine Unterstützung.
Art

[Tim]

Du setzt einen style Block mit in das Template und befüllst mit den gewünschten Feldern

<style>
@media only screen and (max-width: 767px)
{
.ce_customelement_headline_extended {max-width: <?= $this->field('max_width_mobile')->value().'px'; ?>};
}
</style>

[meilenstein]

Vielen Dank für Deine Mühe Tim!

So hat es funktioniert und ich habe die "wirkungsweise" auch verstanden :-)

Ich musste nur die Klasse ".ce_customelement_headline_extended" auf ".ce_headline_extended" ändern.

VG
Artaki

[meilenstein]

Sorry Tim... ich nochmal...

Deine vorgeschlagene Methode funktioniert prima. Ich kann zwischen Desktop und Mobile unterschiedliche Breiten einstellen.

Nun musste ich leider feststellen, dass wenn man mehrere Inhaltselemente (im meinem Fall die Überschrift erweitert) auf einer Seite verwendet, der eingetragene Wert in "Maximale Breite" sich auf alle Inhaltselemente unter der mobilen Darstellung auswirkt. Das heisst, der eine Wert überschreibt den anderen Wert. Ist ja auch logisch, es ist immer die selbe CSS Klasse die ausgibt. Somit kann man nicht individuell pro Inhaltselement anpassen. Jetzt verstehe ich auch, warum der Wert in der Desktop-Darstellung als inline-Style ausgegeben wird.

Hat jemand vielleicht noch eine zündende Idee?

Tausend Dank!
Art

[Tim]

Ja, so ist das. Du kannst mit der ID des Eintrags arbeiten und damit individuelle CSS-Klassen setzen.

Kannst auch eine CSS-ID setzen. Hauptsache eineindeutig auf die ID.

Beispiel mit myHeadline_ID

[meilenstein]

Danke Tim,

ist auch ein gangbarer Weg...
Ich werde versuchen es umzusetzten!

VG
Art