Inhalt in fehlenden Bricks hinzugefügt.

Image Brick: das Bild wird zentriert.

lib/QUI/Bricks/Controls/BoxContent.html

 <div class="quiqqer-box-content">
-{foreach from=$entries item=entry}
+    {if $this->getAttribute('content')}
+    <div class="grid-100 grid-parent">
+        {$this->getAttribute('content')}
+    </div>
+    {/if}
+    {foreach from=$entries item=entry}
     <div class="box-content-entry{$extraClass}">
         <h4 title="{$entry.title|escape:"html"}">
-            {$entry.title}
+        {$entry.title}
         </h4>
         <p>{$entry.text}</p>
     </div>
-{/foreach}
+    {/foreach}
 </div>
\ No newline at end of file

lib/QUI/Bricks/Controls/ContentSwitcher.html

 
+{if !$this->getAttribute('content') == ""}
+<div class="grid-100 grid-parent">
+    {$this->getAttribute('content')}
+</div>
+{/if}
+
 {foreach from=$entries item=entry key=key}
 {assign var=img value=$entry.img}
 
 <!-- display on desktops, replace text and image position by adding a new entry  -->
-<section class="content-switcher hide-on-mobile">
+<div class="content-switcher hide-on-mobile">
     {assign var=modKey value=$key+1}
     {if $modKey && $modKey % 2 !== 0 }
         <div class="content-switcher-image">
@@ -27,10 +33,10 @@
             {/if}
         </div>
     {/if}
-</section>
+</div>
 
 <!-- for small screens: image always comes above the text -->
-<section class="content-switcher hide-on-desktop">
+<div class="content-switcher hide-on-desktop">
     <div class="content-switcher-image">
         {if $img != ""}
             {image src=$entry.img width=300}
@@ -40,6 +46,6 @@
         <h1>{$entry.title}</h1>
         <p>{$entry.content}</p>
     </div>
-</section>
+</div>
 
 {/foreach}
\ No newline at end of file

lib/QUI/Bricks/Controls/Image.css

-.brick-image > p {
-    margin-bottom: 20px;
+.brick-image-text {
+    margin-bottom: 40px;
+}
+
+.brick-image-picture-container {
+    text-align: center;
 }
 
 a.brick-image-link:hover {
@@ -13,6 +17,6 @@ a.brick-image-link {
     display: block;
 }
 
-img.brick-image {
+.brick-image-picture {
     max-width: 100%;
 }
\ No newline at end of file

lib/QUI/Bricks/Controls/Image.html

@@ -2,16 +2,20 @@
 {assign var=link value=$brickLink}
 <dev class="content-body brick-image">
 
+    {if !$this->getAttribute('content') == ""}
+    <div class="grid-100 grid-parent brick-image-text">
     {$this->getAttribute('content')}
-
-    {if $link != ""}
-    <a class="brick-image-link" href="{$link}">
+    </div>
     {/if}
 
-        {image src=$img class="brick-image"}
-
-    {if $link != ""}
-    </a>
-    {/if}
+    <div class="grid-100 grid-parent brick-image-picture-container">
+        {if $link != ""}
+        <a class="brick-image-link" href="{$link}">
+        {/if}
+        {image src=$img class="brick-image-picture"}
+        {if $link != ""}
+        </a>
+        {/if}
+    </div>
 
 </dev>
\ No newline at end of file