added and styled galleries in associat member view

adminstyles.css

@@ -922,9 +922,8 @@ Add your custom styles in this file so it is easier to update the theme.
 	font-size: 0.8rem;
 }
 
-.edit-post-visual-editor__content-area .editor-styles-wrapper .big p,
 .edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-intro p {
-	font-size: 120%;
+	font-size: 1.8rem;
 }
 
 @font-face {
@@ -1233,7 +1232,7 @@ Add your custom styles in this file so it is easier to update the theme.
 
 .edit-post-visual-editor__content-area .editor-styles-wrapper .fotocopia img,
 .edit-post-visual-editor__content-area .editor-styles-wrapper .multiply img {
-	filter: saturate(150) grayscale(1) contrast(10);
+	filter: grayscale(1) contrast(1);
 	mix-blend-mode: multiply;
 }
 
@@ -2238,9 +2237,8 @@ Add your custom styles in this file so it is easier to update the theme.
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat-info {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
 		grid-template-columns: 1fr;
-		gap: 2rem;
+		gap: 1rem;
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat-info .xarxaprod-associat-contact dt,
@@ -2272,6 +2270,9 @@ Add your custom styles in this file so it is easier to update the theme.
 	}
 
 	.edit-post-visual-editor__content-area .editor-styles-wrapper .single-xarxaprod-associat .xarxaprod-associat-info .xarxaprod-associat-logo {
+		display: inline-flex;
+		align-content: center;
+		justify-content: center;
 		max-height: 11rem;
 	}
 
@@ -2655,6 +2656,66 @@ Add your custom styles in this file so it is easier to update the theme.
 	display: block;
 }
 
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images {
+	--this-aspect-ratio: 16 / 9;
+	display: grid;
+	grid-template-rows: 3fr 1fr;
+	grid-gap: 1rem;
+	overflow: hidden;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav {
+	display: flex;
+	height: 4rem;
+	grid-row-start: 2;
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav a {
+	aspect-ratio: var(--this-aspect-ratio);
+	margin-right: 0.5rem;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav img {
+	aspect-ratio: var(--this-aspect-ratio);
+	object-fit: cover;
+	height: 100%;
+	width: auto;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides {
+	overflow-x: scroll;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
+	display: flex;
+	aspect-ratio: var(--this-aspect-ratio);
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image {
+	position: relative;
+	margin: 0;
+	min-width: 100%;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image img {
+	display: block;
+	max-width: 100%;
+	width: 100%;
+	min-height: 100%;
+	scroll-snap-align: start;
+	object-fit: cover;
+}
+
+.edit-post-visual-editor__content-area .editor-styles-wrapper .xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image p {
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+	backdrop-filter: blur(5px);
+	padding: 0.5rem;
+}
+
 .edit-post-visual-editor__content-area .editor-styles-wrapper .infinite-scroll .posts-navigation,
 .edit-post-visual-editor__content-area .editor-styles-wrapper .infinite-scroll.neverending .site-footer {
 	display: none;

sass/base/elements/_media.scss

@@ -13,18 +13,13 @@ img {
 figure {
 	margin: 1em 0; // Extra wide images within figure tags don't overflow the content area.
 }
-//figure .xarxaprod-associat-logo {
-//  max-height: 11rem;
-//  img {
-//    object-fit: contain;
-//  }
-//}
 
 .fotocopia,.multiply {
   //http://stackoverflow.com/questions/52936926/ddg#52936970
   img{
     //filter: grayscale(1) contrast(1) brightness(1);
-    filter: saturate(150) grayscale(1) contrast(10);
+    //filter: saturate(150) grayscale(1) contrast(1);
+    filter: grayscale(1) contrast(1);
     mix-blend-mode: multiply;
   }
 }

sass/base/typography/_copy.scss

@@ -71,8 +71,8 @@ ins {
 	}
 }
 
-.big, .xarxaprod-intro {
+.xarxaprod-intro {
   p {
-	 font-size:120%;
+	  font-size: $font__size-body*1.8;
   }
 }

sass/components/content/_posts-and-pages.scss

@@ -38,7 +38,6 @@
       line-height: 1.2;
       margin-top: 0;
       margin-bottom: 0;
-      //font-weight: 100;
     }
    /*
     * blocks columns with line below each block
@@ -215,9 +214,8 @@
     }
     .xarxaprod-associat-info {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
       grid-template-columns: 1fr;
-      gap: $grid__gap * 2;
+      gap: $grid__gap * 1 ;
       .xarxaprod-associat-contact,
       .xarxaprod-associat-services {
         dt {
@@ -243,6 +241,9 @@
       .xarxaprod-associat-services li {
       }
       .xarxaprod-associat-logo {
+        display: inline-flex;
+        align-content: center;
+        justify-content: center;
         max-height: 11rem;
         img {
           object-fit: contain;

sass/components/media/_galleries.scss

@@ -21,3 +21,74 @@
 .gallery-caption {
 	display: block;
 }
+
+// carousel
+//.xarxaprod-associat-gallery-images {  //section
+//  .xarxaprod-associat-slides-nav{ //navigation
+//	}
+//	.xarxaprod-associat-slides { //the slides
+//		> .xarxaprod-associat-image { //each slide
+//			img {
+//			}
+//			p{
+//			}
+//		}
+//	}
+//}
+
+// carousel v01
+// https://css-tricks.com/how-to-make-a-css-only-carousel/
+.xarxaprod-associat-gallery-images {  //section
+	--this-aspect-ratio: 16 / 9;
+	display: grid;
+	grid-template-rows: 3fr 1fr;
+	grid-gap: $grid__gap;
+	overflow: hidden;
+  .xarxaprod-associat-slides-nav{ //navigation
+		display: flex;
+		height: 4rem;
+		grid-row-start: 2;
+		overflow-x: scroll;
+		overflow-y: hidden;
+		a {
+	    aspect-ratio: var(--this-aspect-ratio);
+			margin-right: 0.5rem;
+		}
+		img {
+	    aspect-ratio: var(--this-aspect-ratio);
+			object-fit: cover;
+			height: 100%;
+			width: auto;
+		}
+	}
+	.xarxaprod-associat-slides { //the slides
+		overflow-x: scroll;
+		overflow-y: hidden;
+		scroll-snap-type: x mandatory;
+		scroll-behavior: smooth;
+		display: flex;
+	  aspect-ratio: var(--this-aspect-ratio);
+		.xarxaprod-associat-image { //each slide
+			position: relative;
+			margin: 0;
+			min-width: 100%;
+			img {
+				display: block;
+				max-width: 100%;
+				width: 100%;
+				min-height: 100%;
+				scroll-snap-align: start;
+				object-fit: cover;
+			}
+			p{
+				position: absolute;
+				bottom: 1rem;
+				left: 1rem;
+				backdrop-filter: blur(5px);
+				padding: 0.5rem;
+				
+			}
+		}
+	}
+}
+

style.css

@@ -780,9 +780,8 @@ ins {
 	font-size: 0.8rem;
 }
 
-.big p,
 .xarxaprod-intro p {
-	font-size: 120%;
+	font-size: 1.8rem;
 }
 
 /*
@@ -1090,7 +1089,7 @@ figure {
 
 .fotocopia img,
 .multiply img {
-	filter: saturate(150) grayscale(1) contrast(10);
+	filter: grayscale(1) contrast(1);
 	mix-blend-mode: multiply;
 }
 
@@ -2072,9 +2071,8 @@ textarea {
 
 	.single-xarxaprod-associat .xarxaprod-associat-info {
 		display: grid;
-		grid-template-columns: 1fr 1fr 1fr;
 		grid-template-columns: 1fr;
-		gap: 2rem;
+		gap: 1rem;
 	}
 
 	.single-xarxaprod-associat .xarxaprod-associat-info .xarxaprod-associat-contact dt,
@@ -2106,6 +2104,9 @@ textarea {
 	}
 
 	.single-xarxaprod-associat .xarxaprod-associat-info .xarxaprod-associat-logo {
+		display: inline-flex;
+		align-content: center;
+		justify-content: center;
 		max-height: 11rem;
 	}
 
@@ -2518,6 +2519,66 @@ textarea {
 	display: block;
 }
 
+.xarxaprod-associat-gallery-images {
+	--this-aspect-ratio: 16 / 9;
+	display: grid;
+	grid-template-rows: 3fr 1fr;
+	grid-gap: 1rem;
+	overflow: hidden;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav {
+	display: flex;
+	height: 4rem;
+	grid-row-start: 2;
+	overflow-x: scroll;
+	overflow-y: hidden;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav a {
+	aspect-ratio: var(--this-aspect-ratio);
+	margin-right: 0.5rem;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides-nav img {
+	aspect-ratio: var(--this-aspect-ratio);
+	object-fit: cover;
+	height: 100%;
+	width: auto;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides {
+	overflow-x: scroll;
+	overflow-y: hidden;
+	scroll-snap-type: x mandatory;
+	scroll-behavior: smooth;
+	display: flex;
+	aspect-ratio: var(--this-aspect-ratio);
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image {
+	position: relative;
+	margin: 0;
+	min-width: 100%;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image img {
+	display: block;
+	max-width: 100%;
+	width: 100%;
+	min-height: 100%;
+	scroll-snap-align: start;
+	object-fit: cover;
+}
+
+.xarxaprod-associat-gallery-images .xarxaprod-associat-slides .xarxaprod-associat-image p {
+	position: absolute;
+	bottom: 1rem;
+	left: 1rem;
+	backdrop-filter: blur(5px);
+	padding: 0.5rem;
+}
+
 /*--------------------------------------------------------------
 # Plugins
 --------------------------------------------------------------*/

template-parts/content-xarxaprod-associat.php

@@ -100,6 +100,30 @@
 	  </section>
   </section>
 
+	<section class="xarxaprod-associat-gallery-images">
+	<?php if( have_rows('xxp_associat_gallery_images') ){ ?>
+		<nav class="xarxaprod-associat-slides-nav">
+		<?php while( have_rows('xxp_associat_gallery_images') ): the_row(); ?>
+			<?php $image=get_sub_field('xxp_associat_image'); ?>
+      <a href="#<?php echo acf_esc_html( $image['filename'] );?>">
+				 <?php echo wp_get_attachment_image( $image['ID'], 'thumbnail' ); ?>
+      </a>
+		<?php endwhile; //end while has rows ?>
+		</nav>
+
+		<ul class="xarxaprod-associat-slides">
+		<?php while( have_rows('xxp_associat_gallery_images') ): the_row(); ?>
+			<?php $image=get_sub_field('xxp_associat_image'); ?>
+		  <li id="<?php echo acf_esc_html( $image['filename'] );?>" class="xarxaprod-associat-image">
+				 <?php //print_r( $image ); //echo the whole array ?>
+				 <?php //print_r( $image['ID'] ); // echo one fiels of the array?>
+				 <?php echo wp_get_attachment_image( $image['ID'], 'full' ); ?>
+         <p class="caption"><?php //echo acf_esc_html( $image['caption'] );?></p>
+      </li>
+		<?php endwhile; //end while has rows ?>
+    </ul>
+  <?php }; //end if xxp_associat_gallery_images ?>
+	</section>
 	<section class="xarxaprod-associat-convos">
 		<?php get_template_part( 'template-parts/section', 'last-convos' ); ?>
   </section>
@@ -110,8 +134,8 @@
 			<h6 class="">Mapa:</h6>
 			<figure class="xarxaprod-associats-map">
 		  	<?php
-		     xarxaprod_show_leaflet_map();
+		     xarxaprod_show_leaflet_map(); //defined in pluggin
-         xarxaprod_show_leaflet_associat_blob();
+         xarxaprod_show_leaflet_associat_blob(); //defined in pluggin
 		    ?>
 				<?php //the_field('xxp_associat_osm_map'); ?>
       </figure>

template-parts/section-last-convos.php

@@ -48,7 +48,7 @@
         )
       );
     ?>
-      <h3> <a href="<?php echo home_url( '/convos/?xxp_convo_center=' ) . $slug_espai_associat ;?>"><?php echo esc_html__('Últimes convocatòries', 'xarxaprod'); ?> de <?php the_title(); ?></a></h3>
+      <h2> <a href="<?php echo home_url( '/convos/?xxp_convo_center=' ) . $slug_espai_associat ;?>"><?php echo esc_html__('Últimes convocatòries', 'xarxaprod'); ?> de <?php the_title(); ?></a></h2>
     </header>
 	  <main class="xarxaprod-last-convos xarxaprod-ultimes-convocatories">
     <?php } //end populate WP_Query custom post type xarxaprod-associat