Crop Image from another blueprint field

Kirby 2 Solved ✅
1

Hi People,

this is my first request to this community, looking forward to your help. I’m a convinced ex-wordpress user and still have a lot to learn about the kirby architecture, blueprints, fields and the mighty kirby API.

Right now I’m trying to develop a low-leveled slider for owlslider, just to learn some basics and get right into kirby.

I’m using https://github.com/storypioneers/kirby-selector/ to have a better image select for the slider.

Fields are feeded in an own page, named “slider” – the slider itself shows up on the front page (home).

So basically what I’m trying to do on the home page: echoing the slider fields “title”, “subtitle”, “slideurl” and the “sliderimage”. The last field outputs an image name and has to be cropped – but there’s always an error when I#m using the thumb creation API.

This is the structure of my slider blueprint:

title: Slider
icon:  object-ungroup
pages: false
files: true
options:
    preview: false
    status: false
    template: false
    url: false
    delete: false
fields:
    slide:
        label: Slides
        type: structure
        entry: >
            <table>
                <tr>
                    <td style="vertical-align: top">
                        <img src="/slider/{{sliderimage}}" style="max-width: 200px; height: auto; margin-right: 20px;">
                    </td>
                    <td>
                        <h1>{{title}}</h1>
                        <p>{{subtitle}}</p>
                        <a href="{{slideurl}}" target="_blank">{{slideurl}}</a>
                    </td>
                </tr>
            </table>
        fields:
            title:
                label: Title
                type: text
            subtitle:
                label: Subtitle
                type: textarea
            slideurl:
                label: URL
                type: url
            sliderimage:
                label: Sliderimage
                type:  selector
                mode:  single
                types:
                    - image

This is the output code at the home page:

<section class="slider">
        <div class="container">
            <section class="owl-carousel">
                <?php foreach( page('slider')->slide()->toStructure() as $slide ) : ?>
                <a href="<?php echo $slide->slideurl(); ?>" class="ajax">
                    <article class="article">
                        <div class="content">
                            <h2><?php echo $slide->title(); ?></h2>
                            <p><?php echo $slide->subtitle(); ?></p>
                        </div>
                        <div class="shadow">&nbsp;</div>
                        <img src="<?php echo thumb( $slide->sliderimage(), array('width' => 1100, 'height' => 350, 'crop' => true))->url(); ?>" itemprop="image">
                    </article>
                </a>
                  <?php endforeach ?>
            </section>
        </div>
</section>

Everthing works well except the $slide->sliderimage() – I got a php error “Uncaught The given image is invalid”.

Do you guys have a clue what I can do to get the thumbed image?

2

$slide->sliderimage() is just a string containing the filename. To create a thumb, you need an image object, though.

<section class="slider">
        <div class="container">
            <section class="owl-carousel">
                <?php foreach( page('slider')->slide()->toStructure() as $slide ) : ?>
                <?php $image = page('slider')->image($slide->sliderimage()) ?>
                <a href="<?php echo $slide->slideurl(); ?>" class="ajax">
                    <article class="article">
                        <div class="content">
                            <h2><?php echo $slide->title(); ?></h2>
                            <p><?php echo $slide->subtitle(); ?></p>
                        </div>
                        <div class="shadow">&nbsp;</div>
                        <img src="<?php echo thumb( $image), array('width' => 1100, 'height' => 350, 'crop' => true))->url(); ?>" itemprop="image">
                    </article>
                </a>
                  <?php endforeach ?>
            </section>
        </div>
</section>
3

Wow – this was a precision landing!

It works like a charm, thanks for the quick and very helpful suggestion :slight_smile: