Bootstrap Card Columns mit Modal

Ein kleiner Versuch, die Card Columns aus Bootstrap 4 in Contao umzusetzen. Zusätzlich öffnet sich bei Klick auf ein Bild ein Modal.

Alle Fotos von pexels.com.

Fastplant death box roll-in method air hardware. Quarter pipe boardslide invert half-flip cab flip Steve Rocco. Saran Wrap Japan air cab flip freestyle hang ten Mike Vallely. Hurricane noseblunt slide Billy Ruff roll-in bigspin fastplant. Sick Steve Severin speed wobbles stalefish bluntslide poseur. Camel back gap fakie Vernon Courtland Johnson pivot handplant. Rail stoked hang up Bunson over the Junson berm regular footed. Pool switch slappy nose bump sponsored. Love Bowl cab flip kickflip grind noseblunt slide stalefish.

Full pipe vert Rat Bones fakie goofy footed 720 handplant. Speed wobbles coffin hospital flip downhill John Cardiel pop shove-it fastplant. Backside face plant late 50-50 baseplate transfer. Aerial spine nose grab kidney tail grind. Grab downhill nosebone nose slide crail grab rails Santa Monica Beach. Handplant darkslide nose bump vert disaster Mark Gonzales rip grip. Baseplate full-cab helipop Bunson over the Junson berm body varial darkslide. Bigspin nosepicker bail nose grab durometer Jason Jesse axle set. Opposite footed finger flip nosebone drop in sponsored rail.

Bank steps rock and roll grind Mike York 900 nollie. Helipop Vans Calfornia Daze Saran Wrap crailtap wall ride judo air bluntslide. Nose grab lien air nollie durometer cab flip Tracker. Lip slappy crail slide berm yeah shoveit. Feeble Kevin Harris Tracker salad grind risers 720. Half-flip coffin kick-nose shinner nosepicker Steve Severin coper. Finger flip aerial wax 180 stalefish regular footed. Vert nose grab street kingpin snake blunt. Slap maxwell flypaper locals half-cab switch dude

Wie hab ich's gemacht?

Alles ist ohne Erweiterung und nur mit 2 angepassten Templates umgesetzt. Das ginge auch eleganter, z.B. könnte man sich mit der Rock Solid Custom Elements Erweiterung ein eigenes Inhaltselement basteln. Ich fand das für mich so aber praktikabel.

  • zwei Inhaltselemente vom Typ HTML als Wrapper
  • die Bilder sind Inhaltselemente vom Typ Bild mit angepasstem Template
  • die Texte sind Inhaltselemente vom Typ Text mit angepasstem Template
  • der Inhalt der Modale ist dann wieder in HTML Inhaltselementen. Die Syntax dafür ist aus der Bootstrap Doku.

Inhaltselement HTML als Wrapper

Das sind die beiden HTML Inhaltselemente. Die Bilder und Texte sind dazwischen positioniert.

<div class="card-columns mb-6">
</div>

Bilder

Die Bilder sind als Inhaltselement Bild angelegt, und zwar mit folgenden Details:

  • CSS-ID/Klasse: als ID "modal1, modal2" etc. und als Klasse "img-fluid". Die ID dient zum Ansteuern des Modals, die Klasse passt das Bild an die Breite der Card an.
  • Template: angepasstes Template ce_image_bs_card. Damit das Bild auch in einer Bootstrap Card ist.
<!-- ce_image_bs_card.html5 -->
<div class="<?= $this->class ?> card block"<?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
	<?php $this->block('content'); ?>
		<div class="card-img-top">
			<a href="" data-toggle="modal"  <?= str_replace('id="', 'data-target="#', $this->cssID) ?>>
				<?php $this->insert('image', $this->arrData); ?>
			</a>
		</div>
	<?php $this->endblock(); ?>
</div>

Text

Die Texte sind als Inhaltselement Text angelegt, und zwar mit folgenden Details:

  • Template: angepasstes Template ce_text_bs_card. Damit der Text auch in einer Bootstrap Card ist.
<!-- ce_text_bs_card.html5 -->
<div class="card <?= $this->class ?> block"<?= $this->cssID ?><?php if ($this->style): ?> style="<?= $this->style ?>"<?php endif; ?>>
    <?php $this->block('before') ?>
    <?php if ($this->addImage && $this->addBefore): ?>
        <div class="card-img-top">
            <?php $this->insert('image', $this->arrData); ?>
        </div>
    <?php endif; ?>
    <?php $this->endblock() ?>

    <div class="card-body">
        <?php $this->block('title') ?>
        <?php if ($this->headline): ?>
        <<?= $this->hl ?> class="card-title"><?= $this->headline ?></<?= $this->hl ?>>
        <?php endif; ?>
        <?php $this->endblock() ?>

        <?php $this->block('content') ?>
        <?= str_replace('<p>', '<p class="card-text">', $this->text) ?>
        <?php $this->endblock() ?>
    </div>

    <?php $this->block('before') ?>
    <?php if ($this->addImage && !$this->addBefore): ?>
        <div class="card-img-bottom">
            <?php $this->insert('image', $this->arrData); ?>
        </div>
    <?php endif; ?>
    <?php $this->endblock() ?>
</div>

Die Modale

Die Modale sind als Inhaltselement HTML angelegt, das erschien mir mit am wenigsten Aufwand verbunden.

Modal 1 sieht so aus, die weiteren sind ebenso aufgebaut:

<!-- Modal 1 -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="exampleModalCenterTitle">Yar Pirate Ipsum</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Fore hang the jib bowsprit grog blossom Brethren of the Coast ye shrouds provost pressgang execution dock. Bilge rat keelhaul starboard brig belay long boat mizzen Gold Road fathom gunwalls. Maroon draught yawl boom hempen halter scourge of the seven seas prow grog blossom gally landlubber or just lubber.</p>
        <p>Rum spyglass spike hempen halter parrel quarterdeck hulk hearties tackle poop deck. Pirate port ballast chase guns log scuttle boom capstan black jack hands. Draft splice the main brace Jack Tar furl take a caulk pirate chase run a shot across the bow capstan Sea Legs. </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

CSS

Der Rest ist CSS.

Zurück