Custom Element mit mehreren Bildern

**Kahmoon** · 05.12.2022, 14:31

Hallo zusammen,

ich verwende bereits ein Custom Element für eine "Wissensdatenbank" mit Text und einem Bild. Ich hätte gerne noch ein weiteres Custom Element, allerdings mit Galerie. Irgendwie komme ich da aber nicht weiter.

Custom Element 1 Bild

Code:

<?php
// rsce_my_element_config.php


return array(
    'label' => array('Präparate', ''),
    'types' => array('content', 'module'),
    'contentCategory' => 'texts',
    'moduleCategory' => 'miscellaneous',
    'standardFields' => array('headline', 'image'),
    'wrapper' => array(
        'type' => 'none',
    ),
    'fields' => array(
        'label' => array(
            'label' => array('Text auf dem Button', ''),
            'inputType' => 'textarea',            
        ),


        'info' => array(
            'label' => array('Infos zum Präparat', ''),
            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),
            'inputType' => 'textarea',            
        ),
    ),
    'standardFields' => array('cssID', 'space', 'start', 'stop'),
);

Dort wird das Bild aktuell mit einem Standard Field "image" implementiert. Kann mir jemand sagen wie ich das zu einer Galerie ändern kann?

VG Frank

**Kahmoon** · 05.12.2022, 15:12

Danke dem Forum hab ich jetzt doch was gefunden was soweit funktkioniert

Code:

<?php
// rsce_my_element_config.php


return array(
    'label' => array('Präparate mit Gallerie', ''),
    'types' => array('content', 'module'),
    'contentCategory' => 'texts',
    'moduleCategory' => 'miscellaneous',
    'standardFields' => array('headline'),
    'wrapper' => array(
        'type' => 'none',
    ),
    'fields' => array(
        'multiSRC' => array
        (
            'label'                   => array('Bilder für Galerie auswählen', ''),
            'inputType'               => 'fileTree',
            'eval'                    => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'mandatory'=>true),
            'sql'                     => "blob NULL",
            'load_callback' => array
            (
                array('tl_content', 'setMultiSrcFlags')
            )
        ), 
   	
        'label' => array(
            'label' => array('Text auf dem Button', ''),
            'inputType' => 'textarea',            
        ),


        'info' => array(
            'label' => array('Infos zum Präparat', ''),
            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),
            'inputType' => 'textarea',            
        ),
    ),
    'standardFields' => array('cssID', 'space', 'start', 'stop'),
);

Allerdings sind die Bilder im Frontend riesig! Wie kann ich da meine Bildgrößen verwenden?

Code:

<?php $rnd = mt_rand(10,40) ?>


<div id="<?php echo $this->cssID ?>" class="<?php echo $this->class ?>"><div class="slider-wrapper<?= $rnd ?>">


<?php $dataSorted = array_map('\StringUtil::binToUuid', deserialize($this->orderSRC, true)); ?>


<?php foreach ( $dataSorted as $data ) : ?>
  <?php if ($image = $this->getImageObject($data, $this->size)) : ?>
		
    <?php if (TL_MODE === 'BE') : ?>
      <?php $strImageCrop = $this->getImage($image->picture['img']['src'], 100, '', 'center_center'); ?>
      <img src="<?= $strImageCrop ?>">
    <?php endif; ?>


    <?php if (TL_MODE === 'FE') : ?>
      <div><?php $this->insert('picture_default', $image->picture); ?></div>
    <?php endif; ?>


  <?php endif; ?>
<?php endforeach ?>


</div></div>

**Kahmoon** · 05.12.2022, 15:22

Und auch hier natürlich die Lösung rausgefunden nachdem ich hier gefragt habe....

Einfach die Ausgabe via Inserttag Figure und die ID der Bildgröße verwenden ;-)

Code:

    <?php if (TL_MODE === 'FE') : ?>
      <div>{{figure::<?= $image->uuid ?>?size=29}}</div>
    <?php endif; ?>

**WebRoxx** · 11.12.2022, 19:55

Zitat von Kahmoon

Und auch hier natürlich die Lösung rausgefunden nachdem ich hier gefragt habe....

Einfach die Ausgabe via Inserttag Figure und die ID der Bildgröße verwenden ;-)

Code:

    <?php if (TL_MODE === 'FE') : ?>
      <div>{{figure::<?= $image->uuid ?>?size=29}}</div>
    <?php endif; ?>

Falls du da nicht mit ner ID im template arbeiten willst...

ich mach das immer so zum Beispiel:

PHP-Code:


....

'fields' => array(

        'size' => array(

            'inputType' => 'standardField',

        )

)

...

Code:

<?php $size = \Contao\StringUtil::deserialize($this->size);?>
{{picture::...&size=<?= $size[2];?>...}}

Dann kann man auch schnell mal die Bildgrößen ändern ohne in Template zugehen

**Kahmoon** · 12.12.2022, 08:17

Oh nice. Das werde ich nachher mal testen. Danke!

**Kahmoon** · 12.12.2022, 15:08

Ich habe das jetzt eingebaut. Kleiner Fehler noch in deinem Snipped. Es muss ?size= heissen und nicht &size= wenn es das erste Parameter ist.

Er stellt mir jetzt bei der Galerie die Auswahl zwar zur Verfügung....wenn ich es jedoch speichere...springt er auf einen default zurück. Kein Plan warum.

Ich wähle aus: 2SP - Cards - 4SP - 1zu1 (263x263)
Nach dem speichern springt er auf: 2SP - Querformat - 100% Breite (870x)

Code:

<?php
// rsce_my_element_config.php


return array(
    'label' => array('Präparate', ''),
    'types' => array('content', 'module'),
    'contentCategory' => 'texts',
    'moduleCategory' => 'miscellaneous',
    'standardFields' => array('headline', 'image','cssID', 'space', 'start', 'stop'),
    'wrapper' => array(
        'type' => 'none',
    ),
    'fields' => array(
        'label' => array(
            'label' => array('Text auf dem Button', ''),
            'inputType' => 'textarea',            
        ),


        'info' => array(
            'label' => array('Infos zum Präparat', ''),
            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),
            'inputType' => 'textarea',            
        ),
        'multiSRC' => array
        (
            'label'                   => array('Bilder für Galerie auswählen', ''),
            'inputType'               => 'fileTree',
            'eval'                    => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'mandatory'=>false),
            'sql'                     => "blob NULL",
            'load_callback' => array
            (
                array('tl_content', 'setMultiSrcFlags')
            )
        ),  
        'size' => array(
            'inputType' => 'standardField',
        )
    ),
);

Edit:
Er springt hier auf die Größe vom Vorschaubild dieses Elements zurück. Siehe Anhang.

**Spooky** · 12.12.2022, 15:12

Wozu den Insert Tag verwenden? Einfach weiterhin $this->getImageObject nutzen.

**Kahmoon** · 12.12.2022, 15:13

Zitat von Spooky

Wozu den Insert Tag verwenden? Einfach weiterhin $this->getImageObject nutzen.

Wie was wo? Im Template für die Ausgabe? Aktuell klemmt es leider noch erst mal im Backend.

**Spooky** · 12.12.2022, 15:16

Zitat von Kahmoon

Kann mir jemand sagen wie ich das zu einer Galerie ändern kann?

Welche Contao Version?

**Kahmoon** · 12.12.2022, 15:17

Contao 4.13.14

**Kahmoon** · 12.12.2022, 15:18

Wenn ich das verwende kommt x mal das gleiche Bild und nicht 3 unterschiedliche

Code:

        <?php foreach ( $dataSorted as $data ) : ?>
        <?php if ($image = $this->getImageObject($data, $this->size)) : ?>
            <?php if (TL_MODE === 'FE') : ?>
                <div class="col-12 col-md-6 col-lg-3 col-xl-3">
                    <?php $size = \Contao\StringUtil::deserialize($this->size);?>
                    {{picture::<?= $image->uuid ?>?size=<?= $size[2];?>}}
                    
                    <?php if ($image = $this->getImageObject($this->singleSRC, array('', '', $size[2]))): ?>
                        <?php $this->insert('picture_default', $image->picture) ?>
                    <?php endif ?>
                </div>
            <?php endif; ?>
        <?php endif; ?>
        <?php endforeach ?>

Edit:
so ist es korrekt:

Code:

                    <?php if ($image = $this->getImageObject($data, array('', '', $size[2]))): ?>
                        <?php $this->insert('picture_default', $image->picture) ?>
                    <?php endif ?>

Dennoch bleibt das Grundproblem bestehen das die Galerie nach dem Speichern die Bildeinstellung vom Vorschaubild des kompletten Elements übernimmt.

**Spooky** · 12.12.2022, 15:21

Unter Contao 4.13 dann so:

PHP-Code:


return array(

    'label' => array('Präparate', ''),

    'types' => array('content', 'module'),

    'contentCategory' => 'texts',

    'moduleCategory' => 'miscellaneous',

    'standardFields' => array('headline', 'cssID', 'space', 'start', 'stop'),

    'wrapper' => array(

        'type' => 'none',

    ),

    'fields' => array(

        'label' => array(

            'label' => array('Text auf dem Button', ''),

            'inputType' => 'textarea',            

        ),

        'info' => array(

            'label' => array('Infos zum Präparat', ''),

            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),

            'inputType' => 'textarea',            

        ),

        'multiSRC' => array(

            'inputType' => 'standardField',

            'eval' => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'isGallery'=>true, 'extensions'=>'%contao.image.valid_extensions%'),

        ),

    ),

);

**Kahmoon** · 12.12.2022, 15:24

Klappt soweit das ich jetzt auch einzelne Bilder wieder per "x" entfernen kann. Dennoch übernimmt die Galerie die Bildgrößen aus dem "Elternelement". Vermutlich weil "size" außerhalb der Bildanweisung steht?

Code:

        'multiSRC' => array(
            'inputType' => 'standardField',
            'eval' => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'isGallery'=>true, 'extensions'=>'%contao.image.valid_extensions%'),
        ),  
          'size' => array(
            'inputType' => 'standardField',
        )

**Spooky** · 12.12.2022, 15:25

Poste die gesamte PHP Datei und das gesamte Template.

**Kahmoon** · 12.12.2022, 15:26

Code:

<?php
// rsce_my_element_config.php


return array(
    'label' => array('Präparate', ''),
    'types' => array('content', 'module'),
    'contentCategory' => 'texts',
    'moduleCategory' => 'miscellaneous',
    'standardFields' => array('headline', 'image','cssID', 'space', 'start', 'stop'),
    'wrapper' => array(
        'type' => 'none',
    ),
    'fields' => array(
        'label' => array(
            'label' => array('Text auf dem Button', ''),
            'inputType' => 'textarea',            
        ),


        'info' => array(
            'label' => array('Infos zum Präparat', ''),
            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),
            'inputType' => 'textarea',            
        ),
        'multiSRC' => array(
            'inputType' => 'standardField',
            'eval' => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'isGallery'=>true, 'extensions'=>'%contao.image.valid_extensions%'),
        ),  
          'size' => array(
            'inputType' => 'standardField',
        )  
    ),
);

**Spooky** · 12.12.2022, 15:29

Ein paar Anmerkungen:

Du hast ein standardField namens "image" angegeben. So ein standardField gibt es aber (von Haus aus) in Contao nicht.
Du hast definiert, dass dieses RSCE sowohl als Inhaltselement als auch als Modul zur Verfügung steht. Du hast aber auch standardFields verwendet, die nicht als Modul zur Verfügung stehen. Wenn dieses RSCE nur als Inhaltselement genutzt wird bzw. werden kann, dann solltest du das auch so definieren.

**Kahmoon** · 12.12.2022, 15:37

Danke. Ich kopiere mir das Zeug nur zusammen :-).

Ich habe "module" entfernt. Das brauch ich ned und das hatte jetzt auch keine Auswirkungen.

Anscheinend gibts das standardfield "image" schon bzw. es funktioniert auf jeden Fall!? Wenn ich das oben entferne, ist auch das Bildelement für dieses Contentelement weg.

**Spooky** · 12.12.2022, 15:39

Achso du willst ein einzelnes Bild und eine Galerie haben?

image gibt es nicht by default, evt. kommt das aus einer Extension oder DCA Anpassung.

**Kahmoon** · 12.12.2022, 15:40

Ja, ich will ein Vorschaubild und dann (optional) eine zusätzliche Galerie.

**Spooky** · 12.12.2022, 15:44

Das würde ich dann so machen:

PHP-Code:


return array(

    'label' => array('Präparate', ''),

    'types' => array('content', 'module'),

    'contentCategory' => 'texts',

    'moduleCategory' => 'miscellaneous',

    'standardFields' => array('headline', 'cssID', 'space', 'start', 'stop'),

    'wrapper' => array(

        'type' => 'none',

    ),

    'fields' => array(

        'label' => array(

            'label' => array('Text auf dem Button', ''),

            'inputType' => 'textarea',            

        ),

        'info' => array(

            'label' => array('Infos zum Präparat', ''),

            'eval' => array('rte' => 'tinyMCE', 'mandatory' => true,),

            'inputType' => 'textarea',            

        ),

        'singleSRC' => array(

            'label' => array('Vorschaubild', 'Das Vorschaubild für dieses Präparat.'),

            'inputType' => 'standardField',

            'eval' => array('filesOnly'=>true, 'fieldType'=>'radio', 'mandatory'=>true, 'tl_class'=>'clr', 'extensions'=>'%contao.image.valid_extensions%'),

        ),

        'multiSRC' => array(

            'inputType' => 'standardField',

            'eval' => array('multiple'=>true, 'fieldType'=>'checkbox', 'orderField'=>'orderSRC', 'files'=>true, 'isGallery'=>true, 'extensions'=>'%contao.image.valid_extensions%'),

        ),

    ),

);

**lbableck** · 12.12.2022, 15:45

Zitat von Spooky

image gibt es nicht by default, evt. kommt das aus einer Extension oder DCA Anpassung.

Image kommt anscheinend von RSCE selber. Siehe https://rocksolidthemes.com/de/conta...endet%20werden.

**Kahmoon** · 12.12.2022, 15:45

Das könnte sein. Von dort an habe ich angefangen diese Element zu bauen.

@Spooky
Mit deinem Code fehlen mir jetzt aber beim Bild und bei der Galerie die Einstellung für die Bildgrößen

**Spooky** · 12.12.2022, 15:46

Das heißt du willst unabhängig eine Bildgröße für das "Vorschaubild" und für die Galerie im Backend des Inhaltselementes festlegen können?

**Kahmoon** · 12.12.2022, 15:47

Zitat von Spooky

Das heißt du willst unabhängig eine Bildgröße für das "Vorschaubild" und für die Galerie im Backend des Inhaltselementes festlegen können?

Ja, das wäre der Plan. Vorschaubild ist immer ein anderes Format als die Galerie. Ich kann es aber auch im Template festnageln.

**Spooky** · 12.12.2022, 15:56

Klingt eher so wie wenn du es im Template festnageln willst - denn die Redakteur*innen wissen ja nicht unbedingt, was sie dort auswählen sollen. Ich würde empfehlen die Bildgröße über die config.yaml festzulegen:

Code:

contao:
    image:
        sizes:
            supplement_preview:
                width: 1280
                height: 720
                resize_mode: crop
                densities: 1.5x
            supplement_gallery:
                width: 320
                height: 168
                resize_mode: crop
                densities: 2x

Und dann verwendest du im Template als zweiten Parameter für $this->getImageObject einmal [0, 0, '_supplement_preview'] und einmal [0, 0, '_supplement_gallery'].

**Kahmoon** · 12.12.2022, 15:57

Oder noch einfacher mit der ID der Bildgröße in getImageObject

Code:

<?php if ($image = $this->getImageObject($data, array('', '', 24))): ?>
     <?php $this->insert('picture_default', $image->picture) ?>
<?php endif ?>

Bildgrößen verwalten tue ausschließlich ich. Contentpflege auch..haha

**Kahmoon** · 12.12.2022, 16:01

Mäh...Nachtrag:
Mit diesem Code ist keine Lightbox auf den Bildern

**Kahmoon** · 12.12.2022, 16:08

Mit deiner Lösung aus einem anderen Thread geht es.

Bildgröße ID24 und Lightbox

Code:

<?php if ($image = $this->getImageObject($data, 24, null, null, ['fullsize' => '1'])): ?>
    <?php $this->insert('image', (array) $image); ?>
<?php endif ?>

**Spooky** · 12.12.2022, 16:11

Zitat von Kahmoon

Oder noch einfacher mit der ID der Bildgröße in getImageObject

Da musst du die Bildgröße aber zuerst in der Datenbank anlegen. Über die config wäre die Bildgröße immer da, egal wie der Stand der Datenbank ist.

**Kahmoon** · 12.12.2022, 16:12

Ja, ich greife da nur auf bereits bestehende und recht umfangreiche Bildkonfigurationen zurück.

**WebRoxx** · 12.12.2022, 17:52

Das mit & kam daher da ich davor nochmehr übergebe, sorr dafür

Schau mal hier (weiß ne ob das aktuell noch funktioniert) komm auch die tage ne an ein PC um das zutesten oder zuschauen wo ich das mal so hatte

https://help.rocksolidthemes.com/dis...type-imagesize