New component for Podcasts

wp-content/themes/Divi/css/custom.scss

@@ -3,7 +3,7 @@
 	display: flex;
 	align-items: center;
 
-  >.et_pb_column:first-child {
+	> .et_pb_column:first-child {
 		h2 {
 			line-height: 1.5;
 			margin-bottom: 25px;
@@ -15,9 +15,10 @@
 		}
 	}
 
-  >.et_pb_column:last-child {
+	> .et_pb_column:last-child {
 		.et_pb_image_wrap {
-      img {}
+			img {
+			}
 		}
 	}
 }
@@ -185,7 +186,6 @@
 }
 
 .wpfMainWrapper {
-
 	#wpfBlock_1,
 	#wpfBlock_2,
 	#wpfBlock_3 {
@@ -207,7 +207,8 @@
 		font-weight: 700;
 	}
 
-  .learn-more-content {}
+	.learn-more-content {
+	}
 }
 
 #stock_notifier_main_form {
@@ -302,7 +303,7 @@ body {
 					width: 100%;
 					background-color: #f3f3f3;
 
-          >a {
+					> a {
 						display: flex;
 						flex-direction: column;
 						justify-content: space-between;
@@ -379,7 +380,7 @@ body {
 	.et_pb_menu__menu {
 		nav.et-menu-nav {
 			.et-menu {
-        >li {
+				> li {
 					&.menu-item {
 						@media (min-width: 1631px) {
 							padding-left: 8px;
@@ -435,17 +436,17 @@ div[id^='wpfMainWrapper-'] .wpfFilterWrapper {
 //* Opinie page
 body.page-id-105 {
 	#main-content {
-    >.container {
+		> .container {
 			&::before {
 				display: none;
 			}
 
 			#content-area {
-        >#sidebar {
+				> #sidebar {
 					display: none;
 				}
 
-        >#left-area {
+				> #left-area {
 					width: 100%;
 					padding-right: 0;
 
@@ -543,8 +544,8 @@ body.tax-product_cat {
 }
 
 #curses-filter-box {
-  >.et_pb_code_inner {
+	> .et_pb_code_inner {
-    >.wpfMainWrapper {
+		> .wpfMainWrapper {
 			flex-wrap: nowrap;
 
 			@media (max-width: 880px) {
@@ -565,7 +566,7 @@ body.tax-product_cat {
 .wpfMainWrapper {
 	flex-wrap: nowrap !important;
 
-  >div:first-child {
+	> div:first-child {
 		padding-left: 0 !important;
 	}
 
@@ -598,3 +599,81 @@ body.tax-product_cat {
 .et_pb_slide_description {
 	display: none !important;
 }
+
+#box-podcasts {
+	.podcasts-lists {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+		gap: 60px;
+
+		article.podcast-item {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			background: #fbfbfd;
+
+			&:hover {
+				.podcast-img {
+					img {
+						transform: scale(1.1);
+					}
+				}
+			}
+
+			.podcast-img {
+				line-height: 0;
+				overflow: hidden;
+
+				img {
+					width: 100%;
+					max-width: fit-content;
+					// height: 250px;
+					transition: all 0.5s ease-out;
+
+					aspect-ratio: 16 / 9;
+					object-fit: cover;
+				}
+			}
+			.podcast-data {
+				display: flex;
+				flex-direction: column;
+				row-gap: 15px;
+				align-items: center;
+				padding: 25px;
+
+				.data-head {
+					display: flex;
+					flex-direction: row;
+					align-items: center;
+
+					.podcast-title {
+						color: #e02b20;
+						font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
+						font-size: 16px;
+						font-weight: 600;
+						display: inline-block;
+						padding-right: 10px;
+						border-right: 1px solid #eee;
+						margin-right: 10px;
+					}
+					.podcast-date {
+						color: #000000;
+						font-size: 16px;
+						font-weight: 500;
+						font-family: 'Lato', Helvetica, Arial, Lucida, sans-serif;
+					}
+				}
+				.data-text {
+					h2 {
+						color: #000000;
+						font-family: 'Poppins', Helvetica, Arial, Lucida, sans-serif;
+						font-weight: 400;
+						line-height: 1.25;
+						font-size: 16px;
+						padding-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}

wp-content/themes/Divi/functions.php

@@ -8868,3 +8868,16 @@ function enqueue_custom_script() {
 	wp_enqueue_script('custom-script', get_template_directory_uri() . '/custom-code.js', array('jquery'), '1.0.0', true);
 }
 add_action('wp_enqueue_scripts', 'enqueue_custom_script');
+
+function podcasts_list_shortcode($atts = [], $content = null) {
+    ob_start();
+
+    $file = get_template_directory() . '/includes/podcasts-list.php';
+    if (file_exists($file)) {
+        include $file;
+    }
+
+    return ob_get_clean();
+}
+
+add_shortcode('podcasts_list', 'podcasts_list_shortcode');

wp-content/themes/Divi/includes/podcasts-list.php

@@ -0,0 +1,147 @@
+<?php
+    $podcasts = [
+        [
+            'title' => 'Odcinek 01',
+            'date' => '21.12.2022',
+            'description' => 'Prolog czyli o czym i z kim będą rozmowy o zdrowiu',
+            'image' => '/wp-content/uploads/2022/12/Prolog-czyli-o-czym-i-z-kim-beda-rozmowy-o-zdrowiu-mp3-image.png',
+            'link' => '/strefa-wiedzy/podcast/prolog-czyli-o-czym-i-z-kim-beda-rozmowy-o-zdrowiu/'
+        ],
+        [
+            'title' => 'Odcinek 02',
+            'date' => '21.12.2022',
+            'description' => 'Czy głowa musi bolec? Cz.1',
+            'image' => '/wp-content/uploads/2022/12/glowa-1-rafal-podcast-website-1200px.jpg',
+            'link' => '/strefa-wiedzy/podcast/czy-glowa-musi-bolec-cz-1/'
+        ],
+        [
+            'title' => 'Odcinek 03',
+            'date' => '18.09.2025',
+            'description' => 'Czy głowa musi bolec? Cz.2',
+            'image' => '/wp-content/uploads/2022/08/maxresdefault.jpg',
+            'link' => '/strefa-wiedzy/podcast/czy-glowa-musi-bolec-cz-2/'
+        ],
+        [
+            'title' => 'Odcinek 04',
+            'date' => '18.09.2025',
+            'description' => 'W czym może pomóc terapeutka uroginekologiczna.',
+            'image' => '/wp-content/uploads/2022/08/maxresdefault-1.jpg',
+            'link' => '/strefa-wiedzy/podcast/w-czym-moze-pomoc-terapeutka-uroginekologiczna/'
+        ],
+        [
+            'title' => 'Odcinek 05',
+            'date' => '18.09.2025',
+            'description' => 'Cesarskie cięcie, rozejście prostego brzucha i nietrzymanie moczu.',
+            'image' => '/wp-content/uploads/2022/08/p5.jpg',
+            'link' => '/strefa-wiedzy/podcast/cesarskie-ciecie-rozejscie-prostego-brzucha-i-nietrzymanie-moczu/'
+        ],
+        [
+            'title' => 'Odcinek 06',
+            'date' => '18.09.2025',
+            'description' => 'Aktywność fizyczna kobiet w ciąży. Cele, znaczenie i wskazania.',
+            'image' => '/wp-content/uploads/2022/08/p6.png',
+            'link' => '/strefa-wiedzy/podcast/aktywnosc-fizyczna-kobiet-w-ciazy-cele-znaczenie-i-wskazania/'
+        ],
+        [
+            'title' => 'Odcinek 07',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p7.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 08',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p8.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 09',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p9.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 10',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p10.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 11',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p11.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 12',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p12.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 13',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p13.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 14',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p14.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 15',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p15.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 16',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p16.jpg',
+            'link' => ''
+        ],
+        [
+            'title' => 'Odcinek 17',
+            'date' => '18.09.2025',
+            'description' => '',
+            'image' => '/wp-content/uploads/2022/08/p17.jpg',
+            'link' => ''
+        ],
+    ];
+?>
+
+<section id="box-podcasts">
+    <div class="podcasts-lists">
+        <?php foreach($podcasts as $podcast): ?>
+            <?php if($podcast['link'] == '') continue; ?>
+            <article class="podcast-item">
+                <a href="<?php echo $podcast['link']; ?>">
+                    <div class="podcast-img">
+                        <img src="<?php echo $podcast['image']; ?>" alt="">
+                    </div>
+                    <div class="podcast-data">
+                        <div class="data-head">
+                            <span class="podcast-title"><?php echo $podcast['title']; ?></span>
+                            <span class="podcast-date"><?php echo $podcast['date']; ?></span>
+                        </div>
+                        <div class="data-text">
+                            <h2><?php echo $podcast['description']; ?></h2>
+                        </div>
+                    </div>
+                </a>
+            </article>
+        <?php endforeach; ?>
+    </div>
+</section>