Bildgrößen > als Original werden ignoriert

Hallo Zusammen,

ich verwende in einem Projekt SVG Grafiken (Problem ist aber Format unabhängig).
Manchmal soll die SVG größer dargestellt werden als im Original.

Beispiel mit Datei 100 x 100 Pixel im Textelement > Bild hinzufügen

Bildgröße Proportional: 90
Ausgabe 90 x 90 Pixel
korrekt

Bildgröße Proportional: 120
Ausgabe 100 x 100 Pixel
gewünscht wäre 120 x 120 Pixel


Wie kann ich das Problem für mich lösen?
Im picture_default.html5 scheine ich kein Zugriff zu haben auf sizes[0] ect.

Danke für eure Mühen
Dennis

Contao bläst Bilder nicht auf. Du müsstest die Bilder vom Browser aufblasen lassen.

ja verstehe.
Wie kann ich an die 120 vom Beispiel dran kommen im picture template?
Diesen Wert möchte ich im css inline verwenden. Insbesondere bei SVGs ist aufblaßen ja kein Problem.
Feste Werte aus einer CSS Datei kommen nicht in Frage, der Redakteur soll es feinabstimmen können pro Grafik.

Danke für möglichen Ideen
Dennis

Pro Bildgröße kannst du eine CSS Klasse vergeben und damit dann per CSS das Bild entsprechend skalieren lassen.

ich habe eine picture_svg.html5
es wäre mir wichtig den tatsächlich eingeben Wert zu erhalten auch wenn dieser größer ist als die original SVG

PHP-Code:

---

if ($this->sources): ?>
  <picture>
<?php endif;
    $xml = new SimpleXMLElement(file_get_contents('http://'.$this->Environment->httpHost.'/'.$this->img['src']));
    $xml->addAttribute("width",$this->picture["img"]["width"]);
    $xml->addAttribute("height",$this->picture["img"]["height"]);
    $xml->addAttribute("style","width: " . str_replace('px','',$this->img['width']) / 10 . "rem; height:auto");
    echo $xml->asXML();
if ($this->sources): ?>
  </picture>
<?php endif; ?>

---

Meine Lösung für SVGs:

templates/image_svg.html5

PHP-Code:

---

<figure class="image_container<?= $this->floatClass ?>"<?php if ($this->margin): ?> style="<?= $this->margin ?>"<?php endif; ?>>
  <?php if ($this->imageHref || $this->href): ?>
    <a href="<?= $this->imageHref ?: $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
  <?php endif; ?>

  <?php 
  $size = deserialize($this->size);
  $picture = $this->picture;
  if($size[0]){
      $picture["rem"] = $size[0] / 10;
  }
  $this->insert('picture_svg', $picture); ?>

  <?php if ($this->imageHref || $this->href): ?>
    </a>
  <?php endif; ?>

  <?php if ($this->caption): ?>
  <?php if ($this->imageHref || $this->href): ?>
    <a href="<?= $this->imageHref ?: $this->href ?>"<?php if ($this->linkTitle): ?> title="<?= $this->linkTitle ?>"<?php endif; ?><?= $this->attributes ?>>
  <?php endif; ?>
    <figcaption class="caption"><?= $this->caption ?></figcaption>
  <?php if ($this->imageHref || $this->href): ?>
    </a>
  <?php endif; ?>
  <?php endif; ?>
</figure>

---

templates/picture_svg.html5

PHP-Code:

---

<?php 
    $xml = new SimpleXMLElement(file_get_contents('https://'.$this->Environment->httpHost.'/'.$this->img['src']));
    $xml->addAttribute("width",$this->img["width"]);
    $xml->addAttribute("height",$this->img["height"]);
    $xml->addAttribute("style","width: " . $this->rem . "rem; height:auto");
    echo $xml->asXML();
?>

---

templates/ce_text_svg.html5

PHP-Code:

---

<?php $this->extend('block_searchable'); ?>

<?php $this->block('content'); ?>
  <?php if (!$this->addBefore): ?>
  <div class="text"><div class="inner">
    <?= $this->text ?>
  </div></div>  
  <?php endif; ?>

  <?php if ($this->addImage): ?>
    <?php $this->insert('image_svg', $this->arrData); ?>
  <?php endif; ?>

  <?php if ($this->addBefore): ?>
  <div class="text"><div class="inner">
    <?= $this->text ?>
  </div></div>
  <?php endif; ?>
<?php $this->endblock(); ?>

---