Advice with kirby-theme customising

Kirby 2 Solved ✅
1

Hi :slight_smile:
Bought a theme for portfolio – Gogro. Great theme actually, but i want to do a small improvement.
It is basically to add some text blocs with descriptions between pictures (see screenshot).
I’m familiar with HTML&CSS. But its all in php, so for me is not easy.

I know i need to change 2 files: a template – project.php in the middle and a blueprint – project.php. See attach.

Maybe anyone can point me how can I do it?

Thanks a lot!

Template

> <?php snippet('header') ?>

> <div class="site-container">

>   <header class="site-header cf">
>       <?php snippet('logo') ?>

>       <div class="cf"></div>

>   </header><!-- / .site-header -->

>   <section class="site-content">

>             <div class="page-desc">
>                  <h1><?php echo $page->title()->html() ?></h1>
>                  <?php echo $page->text()->kirbytext() ?>
>             </div>

>             <article class="project">

>                 <div class="project-assets">


>                     <?php foreach($page->images()->not('thumb.jpg')->sortBy('sort', 'asc') as $image): ?>

>                     <div class="image">
>                       <img src="<?php echo $image->url() ?>" alt="<?php echo $image->alt() ?>">
>                     </div>

>                     <?php endforeach ?>

>                 </div>
>             </article>
>         <!--END .site-content-->
>   </section>

>   <nav role="navigation">
>     <ul class="cd-pagination animated-buttons custom-icons">
>         <li class="button"><a href="<?php echo $page->hasPrevVisible()? $page->prevVisible()->url(): '#' ?>" class="button <?php e(!$page->hasPrevVisible(), ' disabled' ) ?>"><i><?php echo l::get('nav.prev') ?></i></a></li>
>         <li class="button-main"><a href="<?php echo $page->parent()->url() ?>"><i><?php echo html($page->parent()->title()) ?></i></a></li>
>         <li class="button"><a href="<?php echo $page->hasNextVisible()? $page->nextVisible()->url(): '#' ?>" class="<?php e(!$page->hasNextVisible(), ' disabled' ) ?>"><i><?php echo l::get('nav.next') ?></i></a></li>

>     </ul>
>   </nav> <!-- cd-pagination-wrapper -->

> <!--END .site-container-->
> </div>


> <?php snippet('footer') ?>

Blueprint

<?php if(!defined('KIRBY')) exit ?>

title: Project
pages: false
files:
  sortable: true
  fields:
    alt:
      label: alt text
      type: text
fields:
  title:
    label: Title
    type:  text
  text:
    label: Text
    type:  textarea
  thumbimage:
      label: Thumb Image
      type: select
      options: images
      width: 1/2
      help: Thumbnail Image (width:800px)
  tags:
    label: Tags
    type:  tags
    width: 1/2

text_blocks.jpg800×3067 180 KB

2

Here’s my approach: I would cycle throw the subpages with $page->children()->visible() for the textblocks and have the images in the subpages as well. When using the visible subpages, you will have to modify the menu, but you will be able to sort the articles.

I hope this tutorial is helpfull for your needs:

https://getkirby.com/docs/cookbook/one-pager

Good luck with your project.

3

If you don’t want to use subpages, you could look into using the builder field in the project blueprint. It would allow you to define building blocks like an image block and a text block, which you could then sort in any way you want in the Panel.

In your blueprint:

builder:
    label: Sections
    type: builder
    fieldsets:
      picture_block:
        label: Image Block
        snippet: sections/picture
        fields:
          picture:
            label: Image
            type: image
      text_block:
        label: Text block
        snippet: sections/text
        fields:
          text:
            label: Text
            type: textarea

For more details, see the plugin readme.

4

Thank you! :slight_smile: Ill try!

1 Like