update on frontpage boxes

dergoldbroiler · Nov 4, 2023 · a273855 · a273855
1 parent e75636c
commit a273855
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 30 deletions.
diff --git a/scss/includes/_content.scss b/scss/includes/_content.scss
@@ -26,13 +26,36 @@
             &:nth-child(1n) {
                 margin-right: 20px;
             }
-            &:nth-child(2n) {
+            &:nth-child(2n) { 
                 margin-right: 0;
             }
         }
         @media (max-width: 768px) {
             margin-right: 0 !important;
         }
+
+
+        .single-post-image{
+            width: 100%;
+            height: 240px;
+            background-color: $lightgrey;
+
+            &.bg-contain{
+                background-size: auto;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+            &.bg-cover{
+                background-size: cover;
+                background-repeat: no-repeat;
+                background-position: center;
+            }
+        }
+        .single-post-content{
+            width: 100%;
+            height: 240px;
+            background-color: #fff;
+        }
     }
 }
 

diff --git a/scss/includes/_variables.scss b/scss/includes/_variables.scss
@@ -4,3 +4,4 @@ $orange:#e8a422;
 $green:#89b459;
 $red:#ea612e;
 $blue:#245861;
+$lightgrey:#f7f8f8;
diff --git a/scss/styles.css b/scss/styles.css
@@ -179,6 +179,26 @@ body header .contact .clock:before {
     margin-right: 0 !important;
   }
 }
+.posts-grid .single-post .single-post-image {
+  width: 100%;
+  height: 240px;
+  background-color: #f7f8f8;
+}
+.posts-grid .single-post .single-post-image.bg-contain {
+  background-size: auto;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.posts-grid .single-post .single-post-image.bg-cover {
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.posts-grid .single-post .single-post-content {
+  width: 100%;
+  height: 240px;
+  background-color: #fff;
+}
 
 #about-banner {
   min-height: 100px;

diff --git a/template-parts/posts/postgrid.php b/template-parts/posts/postgrid.php
@@ -3,34 +3,11 @@
 
 <div class="posts-grid p-0 w-100">
 
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
-
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
-
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
-        <div class="single-post">
-        
-        </div>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_1', 'options')); ?>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_2', 'options')); ?>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_3', 'options')); ?>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_4', 'options')); ?>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_5', 'options')); ?>
+    <?php get_template_part('template-parts/posts/single','', get_field('box_6', 'options')); ?>
 
 </div>
diff --git a/template-parts/posts/single.php b/template-parts/posts/single.php
@@ -0,0 +1,27 @@
+
+
+<div class="single-post bg-white">
+
+        <?php if(isset($args['bild'])): ?>
+
+            <?php $image = wp_get_attachment_image_src($args['bild'],'full'); ?>
+
+
+            <?php if($args['bild_volle_breite']): ?>
+                <div class="single-post-image d-flex flex-column justify-content-center align-items-cente bg-cover" style="background-image:url('<?php echo $image[0]; ?>');"></div>
+            <?php else: ?>
+                <div class="single-post-image d-flex flex-column justify-content-center align-items-center bg-contain" style="background-image:url('<?php echo $image[0]; ?>');"></div>
+            <?php endif; ?> 
+
+        <?php endif; ?>    
+
+    <div class="single-post-content d-flex flex-column justify-content-center align-items-center">
+        <?php if(isset($args['headline'])): ?>
+            <h2><?php echo $args['headline']; ?></h2>
+        <?php endif; ?>    
+
+        <?php if(isset($args['subline'])): ?>
+            <p class="single-post-content-p"><?php echo $args['subline']; ?></p>
+        <?php endif; ?>    
+    </div>
+</div>