#Neuigkeiten

Übersetzungen von Artikeln, meine Notizen und Beobachtungen

#RSCE: Image

von Rashid Bairamov

Um Bilder hinzuzufügen, muss darauf geachtet werden, wo die Bilder platziert werden und wofür sie verwendet werden sollen.
Dabei kann es sich um Inhaltsbilder oder um Icons und Logos auf der Website handeln. Für erstere ist es sinnvoll, die Tags zu verwenden
figure und picture. Im letzteren Fall reicht das img-Tag aus.

Bild mit den Tags figure und picture

Die Verwendung von Figure- und Picture-Tags ist in diesem Fall notwendig, um das Bild an die verschiedenen Bildschirme des Geräts anzupassen.

Config-Code:

#############
### Image ###
#############

### group ###
'image_group' => array(
  'label' => array('BILD ', 'Hier können Sie ein Bild hinzufügen'),
  'inputType' => 'group',
),

### image ###
'image' => array(
  'label' => array(
    'de' => array('Bild', 'Hier können Sie das Bild auswählen'),
  ),
  'inputType' => 'fileTree',
  'eval' => array(
    'fieldType' => 'radio',
    'filesOnly' => true,
    'extensions' => 'jpg,jpeg,png,gif,svg',
    'tl_class'=>'clr',
    'mandatory' => true,
  ),
),

### image alt ###
'image_alt' => array(
  'label' => array(
    'de' => array('Alt-Attribute', 'Hier können Sie einen Alt-Attribute für das Bild eingeben'),
  ),
  'inputType' => 'text',
  'eval' => array('tl_class' => 'w50 clr'),
),

### image title ###
'image_title' => array(
  'label' => array(
    'de' => array('Bildtitel', 'Hier können Sie den Titel des Bildes eingeben (title-Attribut)'),
  ),
  'inputType' => 'text',
  'eval' => array('tl_class' => 'w50 clr'),
),

### image size checkbox ###
'image_size_checkbox' => array(
  'label' => array(
    'de' => array('Bildgröße', 'Bildgröße selbst festlegen'),
  ),
  'inputType' => 'checkbox',
  'eval' => array('tl_class' => 'w50 clr'),
),

### image size ###
'image_size' => array(
  'label' => array(
    'de' => array('Bildgröße', 'Hier können Sie die Abmessungen des Bildes und den Skalierungsmodus festlegen.'),
  ),
  'inputType' => 'imageSize',
  'options' => \System::getImageSizes(),
  'eval' => array('tl_class' => 'w50 clr'),
  'dependsOn' => [
    'field' => 'image_size_checkbox',
  ],
),

### group ### - Ermöglicht die Gruppierung aller unten angegebenen Felder für das Bild,

### image ### - Hier wird das Bild selbst angegeben. Man kann das Bildformat einschränken und das Bildauswahlfeld zur Pflicht machen,

### image title ###, ### image alt ### - einfache Textfelder zum Hinzufügen von Titel- und Alt-Attributen,

### image size checkbox ### - Feld, in dem man die Größe des zu verwendenden Bildes überschreiben kann,

### image size ### - Auswahlfeld für die Bildgröße. Es hängt davon ab, ob das vorherige Kästchen angekreuzt ist oder nicht.

 

#Code für die Datenausgabe:

<?php if ( $this->image_size ): ?>
	<div class="image">
	  <?php if ( $image = $this->arrData['getImageObject']($this -> image, $this->image_size ) ): ?>
	    <?php $image->picture['alt'] = $this->image_alt ?>
	    <?php $image->picture['title'] = $this->image_title ?>
	    <?php $this->insert('image', (array) $image); ?>
	  <?php endif; ?>
	</div>
<?php else: ?>
	<div class="image">
	  <?php if ( $image = $this->arrData['getImageObject']($this -> image, [null, null, 19] ) ): ?>
	    <?php $image->picture['alt'] = $this->image_alt ?>
	    <?php $image->picture['title'] = $this->image_title ?>
	    <?php $this->insert('image', (array) $image); ?>
	  <?php endif; ?>
	</div>
<?php endif; ?>

Vektorbilder, Icons und dekorative Bilder (ohne Verwendung von figure und picture):

Diese Option ist ideal für die Darstellung von Logos, Symbolen sozialer Netzwerke und dekorativen Elementen sowie für alle Bilder, bei denen kein Zuschneiden des Bildes nötig ist.

Config-Code:

#############
### Image ###
#############

### group ###
'image_group' => array(
  'label' => array('BILD ', 'Hier können Sie ein Bild hinzufügen'),
  'inputType' => 'group',
),

### image ###
'image' => array(
  'label' => array(
    'de' => array('Bild', 'Hier können Sie das Bild auswählen'),
  ),
  'inputType' => 'fileTree',
  'eval' => array(
    'fieldType' => 'radio',
    'filesOnly' => true,
    'extensions' => 'jpg,jpeg,png,gif,svg',
    'tl_class'=>'clr',
    'mandatory' => true,
  ),
),

### image alt ###
'image_alt' => array(
  'label' => array(
    'de' => array('Alt-Attribute', 'Hier können Sie einen Alt-Attribute für das Bild eingeben'),
  ),
  'inputType' => 'text',
  'eval' => array('tl_class' => 'w50 clr'),
),

### image title ###
'image_title' => array(
  'label' => array(
    'de' => array('Bildtitel', 'Hier können Sie den Titel des Bildes eingeben (title-Attribut)'),
  ),
  'inputType' => 'text',
  'eval' => array('tl_class' => 'w50 clr'),
),

Code für die Datenausgabe:

<?php if ( $icon= $this->arrData['getImageObject']($this -> image )): ?>
    <img
            class="rsce_dev__icon"
            src="<?php echo $icon->src ?>"
            alt="<?php echo $icon->alt ?: $this->image_alt ?>"
            title="<?= $this->image_title ?>"
        <?php echo $icon->imgSize ?>
    >
<?php endif; ?>