xarxaprod
/
xarxaprod-wp-theme
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added and styled galleries in associat member view

This commit is contained in:
jorge 2024-04-01 11:05:33 +02:00
parent 9a740f5fee
commit ebd0bbe819
11 changed files with 244 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
adminstyles.css
View File

@ -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;

2
adminstyles.css.map
View File

File diff suppressed because one or more lines are too long

2
assets/css/adminstyles.css
View File

File diff suppressed because one or more lines are too long

9
sass/base/elements/_media.scss
View File

@ -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;
}
}

8
sass/base/typography/_copy.scss
View File

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

7
sass/components/content/_posts-and-pages.scss
View File

@ -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;

71
sass/components/media/_galleries.scss
View File

@ -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;
}
}
}
}

71
style.css
View File

@ -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
--------------------------------------------------------------*/

2
style.css.map
View File

File diff suppressed because one or more lines are too long

30
template-parts/content-xarxaprod-associat.php
View File

@ -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>
@ -109,9 +133,9 @@
<div class="xarxaprod-associat-osm-map">
<h6 class="">Mapa:</h6>
<figure class="xarxaprod-associats-map">
<?php
xarxaprod_show_leaflet_map();
xarxaprod_show_leaflet_associat_blob();
<?php
xarxaprod_show_leaflet_map(); //defined in pluggin
xarxaprod_show_leaflet_associat_blob(); //defined in pluggin
?>
<?php //the_field('xxp_associat_osm_map'); ?>
</figure>

2
template-parts/section-last-convos.php
View File

@ -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