Newbie's adventure with K : episode 1

Kirby 2 Questions 🤔
1

Hello, Ok I will give a try

Now step by step, I will do my best to built my website combining two existings themes !

This is the big adventure of my life !

And now EPISODE 1

I don’t really understand the difference between the blueprint and the template.

For example this slideshow template. I want to put the text before the image. I didn’t find the exact solution yet
[I just understand that it is to play with ’ div class=“container”>

 <?php echo kirbytext($page->text()) ?>
 </div>

But should I work with the template, with the blueprint or both ?

Here is the entire code BTW

 <!-- site/templates/slideshow.small.php --
<?php snippet('header') ?>

<?php if(!$page->pagewidth()->empty()): ?>
    <?php if($page->pagewidth() == 'small'): ?>
    <section class="small" style="background-color: <?php echo $page->backgroundcolor() ?>">
    <?php endif ?>
    <?php if($page->pagewidth() == 'large'): ?>
    <section class="large" style="background-color: <?php echo $page->backgroundcolor() ?>">
    <?php endif ?>
<?php else: ?>
<section class="small" style="background-color: <?php echo $page->backgroundcolor() ?>">
<?php endif ?>

<article>

<div id="slideshow">
<?php foreach($page->images()->sortBy('sort', 'desc')->flip() as $img): ?>
<div class="item"><img src="<?php echo $img->url() ?>" alt="<?php echo $img->title() ?>" title="<?php echo $img->title() ?>" data-description="<?php echo $img->description() ?>"></div>
<?php endforeach ?>
</div>

<!--
<div class="container">
    <ul id="status">
    <?php if($page-navigation() == '1'): ?>
    <li><a class="prev">Previous</a| <a class="next">Next</a><?php if($page->rewind() == '1'): ?| <a class="goTo">First</a><?php endif ?></li>
    <?php endif ?   
    <?php if($page->pagination() == '1'): ?>
    <li><span class="currentItem">(<span class="result"></span></spanof <span class="owlItems"><span class="result"></span>)</span></li>
    <?php endif ?   
    <?php if($page->play() == '1'): ?>
    <li class="right"><a class="play">Play</a| <a class="stop">Stop</a></li>
    <?php endif ?>
    </ul>
</div>
-->

<div class="container" id="controler">
    <ul id="status">
    <?php if($page-navigation() == '1'): ?>
    <li><a class="prev"><i class="fa fa-arrow-left"></i></a></a><a class="next"><i class="fa fa-arrow-right"></i></a></a><?php if($page->rewind() == '1'): ?><a class="goTo"><i class="fa fa-undo"></i></a><?php endif ?></li>
    <?php endif ?   
    <?php if($page->pagination() == '1'): ?>
    <li><span class="currentItem">( <span class="result"></span></span>of <span class="owlItems"><span class="result"></span>)</span></li>
    <?php endif ?   
    <?php if($page->play() == '1'): ?>
    <li class="right"><a class="play"><i class="fa fa-play"></i></a><a class="stop"><i class="fa fa-pause"></i>
</a></li>
    <?php endif ?>
    </ul>
</div>


<div class="container">
<?php echo kirbytext($page->text()) ?>
</div>

</article>
</section>

<!-- Slideshow Javascript / Start -->
<script type="text/javascript">
$(document).ready(function() {
 
  var owl = $("#slideshow"),
        status = $("#status");
 
  owl.owlCarousel({
        singleItem: true,
        pagination: false,
        paginationNumbers: false,
        afterAction : afterAction,
        slideSpeed: 200,
        rewindSpeed: 200,
        responsiveRefreshRate : 200,
         autoHeight: true,
  });
  
  // Count
  function updateResult(pos,value){
    status.find(pos).find(".result").text(value);
  }
 
  function afterAction(){
    updateResult(".owlItems", this.owl.owlItems.length);
    updateResult(".currentItem", this.owl.currentItem);
  }
 
  // Custom Navigation Events
  $(".next").click(function(){
    owl.trigger('owl.next');
  })
  $(".prev").click(function(){
    owl.trigger('owl.prev');
  })
  $(".play").click(function(){
    owl.trigger('owl.play',2000); //owl.play event accept autoPlay speed as second parameter
  })
  $(".stop").click(function(){
    owl.trigger('owl.stop');
  })
  $('.goTo').click(function(){
    owl.trigger('owl.goTo',0)
  });
 
});
</script>
<!-- Slideshow Javascript / End -->

<?php snippet('footer') ?>

THANKS

1 Like
2

Let me answer the difference between templates and blueprints by quoting myself:

So if you want to change the way your content is displayed on the website, you need to modify your template.

To put the text before the slider, you need to put this part:

<div class="container">
<?php echo kirbytext($page->text()) ?>
</div>

before this bit:

<div id="slideshow">
<?php foreach($page->images()->sortBy('sort', 'desc')->flip() as $img): ?>
<div class="item"><img src="<?php echo $img->url() ?>" alt="<?php echo $img->title() ?>" title="<?php echo $img->title() ?>" data-description="<?php echo $img->description() ?>"></div>
<?php endforeach ?>
</div>

BTW: to make your code more readable, could you pls. enclose it within three backticks at the beginning and the end of the code block in a separate line. I have edited your code above. To see how this works, you can click on the pencil icon to get into editing mode.