106 lines
3.0 KiB
PHP
106 lines
3.0 KiB
PHP
<?php get_header() ?>
|
|
<div class="wrapper--default">
|
|
<div class="mx-auto wrapper--inner">
|
|
<section class="p-6 xl:container xl:mx-auto xl:pl-9 ">
|
|
<h1 class="text-3xl font-semibold pb-6 xl:pb-0 md:max-w-md"><?php echo get_the_title() ?></h1>
|
|
</section>
|
|
|
|
<section id="app"
|
|
class="p-6 md:p-0 flex flex-col items-center sm:flex-wrap sm:flex-row sm:justify-start xl:container xl:mx-auto xl:pb-10 ">
|
|
<div v-if="isLoaded" v-for="(photo, index) in item.acf.zdjecia" :key="index" class="gallery-item bg-blue"
|
|
@click="() => showImg(index)" :style="`background-image:url(${photo.sizes.large})`"></div>
|
|
<div v-else class="p-6 xl:mx-auto text-2xl">czekaj wczytuje dane...</div>
|
|
<vue-easy-lightbox :visible="visible" :imgs="images" :index="index" @hide="handleHide">
|
|
</vue-easy-lightbox>
|
|
</section>
|
|
<div class="sm:justify-start xl:container xl:mx-auto xl:pb-10 px-2">
|
|
<?php echo get_the_content() ?>
|
|
<?php the_field('description'); ?>
|
|
</div>
|
|
|
|
|
|
<section
|
|
class="p-6 md:p-0 flex flex-col items-center sm:flex-wrap sm:flex-row sm:justify-start xl:container xl:mx-auto xl:pb-10 ">
|
|
|
|
<?php
|
|
|
|
$related = get_posts( array( 'category__in' => wp_get_post_categories($post->ID), 'numberposts' => 3, 'post_type' => 'realizacje', 'post__not_in' => array($post->ID) ) );
|
|
if( $related ) foreach( $related as $post ) {
|
|
setup_postdata($post); ?>
|
|
|
|
<a href="<?php echo the_permalink() ?>" class="recent-realizations-item"
|
|
style="background-image: url(<?php echo get_the_post_thumbnail_url() ?>)">
|
|
|
|
<p
|
|
class="absolute text-xl bg-blue min-w-full min-h-full bg-opacity-90 h-full w-full flex items-center justify-center text-white text-center">
|
|
<?php echo get_the_title() ?></p>
|
|
</a>
|
|
|
|
<?php }
|
|
|
|
wp_reset_postdata();
|
|
|
|
?>
|
|
|
|
</section>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<script>
|
|
var app = Vue.createApp({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
isLoaded: false,
|
|
visible: false,
|
|
index: 0,
|
|
item: {
|
|
id: '34',
|
|
acf: {
|
|
zdjecia: [{
|
|
sizes: {
|
|
large: ''
|
|
}
|
|
}]
|
|
}
|
|
},
|
|
}
|
|
|
|
},
|
|
beforeMount() {
|
|
fetch(`<?php echo get_home_url() ?>/wp-json/wp/v2/realizacje/<?php echo get_the_ID()?>`)
|
|
.then(res => res.json())
|
|
.then(data => this.item = data)
|
|
.then(this.isLoaded = true)
|
|
|
|
},
|
|
|
|
methods: {
|
|
showImg(index) {
|
|
this.index = index
|
|
this.visible = true
|
|
},
|
|
handleHide() {
|
|
this.visible = false
|
|
},
|
|
|
|
},
|
|
computed: {
|
|
images() {
|
|
return this.item.acf.zdjecia.map(PhotoOBJ => PhotoOBJ.sizes.large)
|
|
},
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
|
app.use(VueEasyLightbox)
|
|
app.mount('#app')
|
|
</script>
|
|
|
|
|
|
<?php get_footer()?>
|