Hallo Rob,
De pagina staat achter een inlog.
Gebruik je een plugin voor de slideshow? Zo ja, welke?
Guido
Hi Guido,
Dank voor je berichtje,
O ja,is alleen voor leden, 😉 Nee ik gebruik geen plug-in ervoor, gewoon de standaard slideshow die in de blok-editor van wp zit.
Ik heb de slideshow even gekopieerd naar een openbaar bericht voor je: https://nieuwhw.nl/test-pagina-slideshow/
Hoi Rob,
Volgens mij is dit de slideshow van de Jetpack plugin? Tenminste, dat maak ik op uit de CSS. Ik weet niet of je de caption via de instellingen van Jetpack kunt wijzigen, ik gebruik die plugin niet.
Je kunt de caption verwijderen door dit toe te voegen op pagina Extra CSS van de Customizer in je dashboard:
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {display:none;}
Als je de caption wilt behouden, laat het me weten.
Guido
Hi Guido,
Klopt, Jetpack heb ik inderdaad. De caption wilde ik eigenlijk wel behouden, als het op de juiste wijze word afgebeeld. In het dashboard zie ik de caption gewoon netjes onderin binnen een overlay van een centimeter. En dat is wel mooi.
groetjes, Rob
Hoi,
Omdat ik Jetpack niet gebruik, kan ik niet meekijken in de editor. Kun je de slideshow in je editor via je browser inspecteren en de CSS van het element figcaption hier delen? Dit doe je door op de slideshow te gaan staan met je cursor en dan rechtermuisklik > “Inspecteren”. Dan het element opzoeken en de bijbehorende CSS dus kopiëren en hier plakken.
Guido
Ik denk dat je dit bedoelt?
li.wp-block-jetpack-slideshow_slide:nth-child(16) > figure:nth-child(1) > figcaption:nth-child(2)
of dit wellicht?
html body#colibri.post-template-default.single.single-post.postid-10445.single-format-standard.logged-in.admin-bar.wp-custom-logo.theme-brite.woocommerce-js.give-test-mode.give-page.customize-support div#page-top.site div#content.content.position-relative.colibri-main-content-single div.d-flex.h-section.h-section-global-spacing.position-relative.main-section div.h-section-grid-container.h-section-boxed-container.main-section-inner div.h-row-container.gutters-row-lg-2.main-row div.h-row.gutters-col-lg-2.main-row-inner div.h-col div.style-1787.style-local-7838-m1.h-overflow-hidden.position-relative div#blog-post.h-section.h-section-global-spacing.d-flex.align-items-lg-center.align-items-md-center.align-items-center.style-1788.style-local-7838-m2.position-relative div.h-section-grid-container.h-section-boxed-container div.h-row-container.gutters-row-lg-0.gutters-row-md-0.gutters-row-0.gutters-row-v-lg-0.gutters-row-v-md-0.gutters-row-v-0.colibri-dynamic-list.colibri-single-post-loop.style-1793.style-local-7838-m3.position-relative div.h-row.justify-content-lg-center.justify-content-md-center.justify-content-center.align-items-lg-stretch.align-items-md-stretch.align-items-stretch.gutters-col-lg-0.gutters-col-md-0.gutters-col-0.gutters-col-v-lg-0.gutters-col-v-md-0.gutters-col-v-0 div.h-column.h-column-container.d-flex.h-col-lg-12.h-col-md-12.h-col-12.post-10445.post.type-post.status-publish.format-standard.hentry.category-activiteit.category-leden.masonry-item.style-1794-outer.style-local-7838-m4-outer div.d-flex.h-flex-basis.h-column__inner.h-px-lg-0.h-px-md-0.h-px-0.v-inner-lg-0.v-inner-md-0.v-inner-0.style-1794.style-local-7838-m4.position-relative div.w-100.h-y-container.h-column__content.h-column__v-align.flex-basis-100.align-self-lg-start.align-self-md-start.align-self-start div.h-row-container.gutters-row-lg-0.gutters-row-md-0.gutters-row-0.gutters-row-v-lg-0.gutters-row-v-md-0.gutters-row-v-0.style-1796.style-local-7838-m5.position-relative div.h-row.justify-content-lg-center.justify-content-md-center.justify-content-center.align-items-lg-stretch.align-items-md-stretch.align-items-stretch.gutters-col-lg-0.gutters-col-md-0.gutters-col-0.gutters-col-v-lg-0.gutters-col-v-md-0.gutters-col-v-0 div.h-column.h-column-container.d-flex.h-col-lg-auto.h-col-md-auto.h-col-auto.style-1797-outer.style-local-7838-m6-outer div.d-flex.h-flex-basis.h-column__inner.h-px-lg-3.h-px-md-3.h-px-3.v-inner-lg-3.v-inner-md-3.v-inner-3.style-1797.style-local-7838-m6.position-relative div.w-100.h-y-container.h-column__content.h-column__v-align.flex-basis-100.align-self-lg-center.align-self-md-center.align-self-center div.style-1803.style-local-7838-m12.position-relative.h-element div.colibri-post-content.h-global-transition-all div.wp-block-jetpack-slideshow div.wp-block-jetpack-slideshow_container.swiper-container.swiper-container-fade.swiper-container-initialized.swiper-container-horizontal.swiper-container-pointer-events.wp-swiper-initialized ul#swiper-wrapper-8557cd6855478c1a.wp-block-jetpack-slideshow_swiper-wrapper.swiper-wrapper li.wp-block-jetpack-slideshow_slide.swiper-slide.swiper-slide-duplicate.swiper-slide-next figure figcaption.wp-block-jetpack-slideshow_caption.gallery-caption
Dit zijn de CSS-klassen, ik had de daadwerkelijke CSS (opmaak) nodig.
Maar in de tussentijd zie ik al waar het fout gaat, de CSS van de Colibri pagina bouwer veroorzaakt dit.
Voeg deze fix eens toe op pagina Extra CSS vd Customizer:
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_caption.gallery-caption {top:auto;}
Guido
Hi Guido,
Dat werkt al een stuk beter inderdaad. Thanx! De overlay is nu weer terug naar beneden. Alleen steekt de overlay nu uit, aan weerszijden van de foto. Is dat nog aan te passen?
Hoi Rob,
Probeer dit eens:
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {width:100%;}
Guido
Hallo Guido,
Je laatste advies werkt helaas niet. De overlay blijft uitsteken
Dan de prioriteit verhogen middels de !important statement:
.wp-block-jetpack-slideshow .wp-block-jetpack-slideshow_image {width:100% !important;}
Guido
Nee, helaas nog hetzelfde. Heb je nog een suggestie? Anders laten we het wel zo hoor. Dit is in ieder geval beter dan wat het was.
Hier wel hoor, dus misschien moet je de cache van je browser even legen. Of in een andere browser proberen.
Guido
Hi Guido,
Ik heb je laatste advies inmiddels geprobeerd. Zowel Firefox als Chrome hebben de overlay buiten de foto. Ook na cache wissen en opnieuw opstarten van de laptop.
In de mobiele browser van Firefox werkt het overigens wel goed.
Groetjes, Rob
Hoi Rob,
Ik heb ook in meerdere browsers geprobeerd. Hij steekt alleen in bepaalde schermgroottes uit, dat heeft te maken met het formaat/verhouding van de afbeelding. Overigens staan bij mij de pauze en de volgende/vorige knop dan ook naast de afbeelding.
Je kunt de afbeelding forceren de hele breedte/hoogte te nemen, door dit toe te voegen aan mijn vorige CSS:
object-fit:cover !important;
Guido
