I want to add a URL to a specific slide.
blueprints is this:
title: Slide
pages: true
fields:
slides:
label: Slides
type: structure
entry:
fields:
slide_image:
label: Image
type: image
I guess you can just do this
title: Slide
pages: true
fields:
slides:
label: Slides
type: structure
entry:
fields:
slide_image:
label: Image
type: image
slide_url:
label: Url
type: url
Also If you’re using Kirby 3 you could store the url inside the image txt file rather than using a structure field. Just an idea.
now I’m a bit confused.
I thought what you wanted to do is add a link to the slide in the frontend but now looks like you want to add a link to the image in the backend.
Which of the two is it?
yes I want to add it in the front end. This is my home.php
<?php snippet('header') ?>
<style>
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
}
@media only screen and (max-width: 600px) {
#top {
position: scroll;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
}
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(0,0,0,0.8);
}
</style>
<style>
.slideshowBlueBox,
.slideshowBlueBox:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: -1;
}
.slideshowBlueBox li span {
width: 100%;
height: 100%;
position: fixed;
left: 0px;
color: transparent;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
background-color: #a60b37;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
<?php $conteggioslide = $page->children()->find('slide')->slides()->toStructure()->count();
$conteggiosecondi = $conteggioslide*6;?>
<?php $percentuale = 6/$conteggiosecondi;
$percentuale = $percentuale * 100;
$percentuale = floor($percentuale);?>
-webkit-animation: imageAnimation <?php echo $conteggiosecondi;?>s linear infinite 0s;
-moz-animation: imageAnimation <?php echo $conteggiosecondi;?>s linear infinite 0s;
-o-animation: imageAnimation <?php echo $conteggiosecondi;?>s linear infinite 0s;
-ms-animation: imageAnimation <?php echo $conteggiosecondi;?>s linear infinite 0s;
animation: imageAnimation <?php echo $conteggiosecondi;?>s linear infinite 0s;
}
<?php $conteggio = 1;?>
<?php foreach ($page->children()->find('slide')->slides()->toStructure() as $sfondo):?>
<?php
$image = $sfondo->slide_image();
$image = str_replace(" ", "%20", $image);
?>
.slideshowBlueBox li:nth-child(<?php echo $conteggio?>) span {
background-image: url(/home/slide/<?php echo $image?>)<?php if ($conteggio == 1): echo ''; else: echo ';'?>
-webkit-animation-delay: <?php echo ($conteggio-1)*6?>s;
-moz-animation-delay: <?php echo ($conteggio-1)*6?>s;
-o-animation-delay: <?php echo ($conteggio-1)*6?>s;
-ms-animation-delay: <?php echo ($conteggio-1)*6?>s;
animation-delay: <?php echo ($conteggio-1)*6?>s;
<?php endif; ?>
}
<?php $conteggio++ ?>
<?php endforeach; ?>
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
<?php echo $percentuale;?>% { opacity: 1 }
<?php echo $percentuale+8;?>% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
<?php echo $percentuale;?>% { opacity: 1 }
<?php echo $percentuale+8;?>% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
<?php echo $percentuale;?>% { opacity: 1 }
<?php echo $percentuale+8;?>% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
<?php echo $percentuale;?>% { opacity: 1 }
<?php echo $percentuale+8;?>% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
<?php echo $percentuale;?>% { opacity: 1 }
<?php echo $percentuale+8;?>% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
<?php echo $percentuale;?>% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
<?php echo $percentuale;?>% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
<?php echo $percentuale;?>% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
<?php echo $percentuale;?>% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
<?php echo $percentuale;?>% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .slideshowBlueBox li span{
opacity: 1;
}
</style>
<?php $conteggio = 1;?>
<body >
<ul class="slideshowBlueBox">
<?php foreach ($page->children()->find('slide')->slides()->toStructure() as $sfondo):?>
<li style="list-style: none;">
<span>Image <?php echo $conteggio;?></span> </li>
<?php $conteggio++; endforeach;?>
</ul>
<div id="top" class="container-fluid"style="margin-bottom: 100px;">
<?php snippet('footer') ?></div>
<?php snippet('footerjs') ?>
<script>
window.addEventListener?window.addEventListener('load',so_init,false):window.attachEvent('onload',so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
function so_init()
{
if(!d.getElementById || !d.createElement)return;
css = d.createElement('link');
css.setAttribute('href','assets/css/slideshow2.css');
css.setAttribute('rel','stylesheet');
css.setAttribute('type','text/css');
d.getElementsByTagName('head')[0].appendChild(css);
imgs = d.getElementById('slideshow').getElementsByTagName('img');
for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
imgs[0].style.display = 'block';
imgs[0].xOpacity = .99;
setTimeout(so_xfade,3000);
}
function so_xfade()
{
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
cOpacity-=.05;
nOpacity+=.05;
imgs[nIndex].style.display = 'block';
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0)
{
imgs[current].style.display = 'none';
current = nIndex;
setTimeout(so_xfade,3000);
}
else
{
setTimeout(so_xfade,50);
}
function setOpacity(obj)
{
if(obj.xOpacity>.99)
{
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = 'alpha(opacity=' + (obj.xOpacity*100) + ')';
}
}</script>
<div class="d-block d-md-none">
<?php snippet($page->intendedTemplate().'_mobile') ?></div>
since it is too confusing this is link of the shared home.php: https://drive.google.com/file/d/17GI2ik7eCBpPyJL4933kKnvOZioZIJRa/view?usp=sharing
Ok so the entry in the slide.yml blueprint is responsible for what you see in the backend.
Has nothing to with your frontend so we can ignore that.
That said you can do something like this
<ul class="slideshowBlueBox">
<?php foreach ($page->children()->find('slide')->slides()->toStructure() as $sfondo): ?>
<li style="list-style: none;">
<a href="<?= $sfondo->slide_url() ?>">
<img src="<?= $sfondo->slide_image()->toFile()->url() ?>">
</a>
</li>
<?php endforeach;?>
</ul>
This should work. But you definitely want to add more checks to make sure you have a value for the link, that the image exists and so on.
I included link and image as a separate dom elements but you can obviously do whatever you want with them.
it doesn’t work, then see it yourself on my site
