Output images with correct path (+ thumbs)

The CMS Questions
1

Sorry for that post, but I really have a problem with the (basic) output of images with Kirby.

I’m using the extension: Selector – Kirby Fileselect Field for a team page in a collection. The editor can type in e.g. the name and can choose a picture from a generated list of the uploaded images in the page folder. This works well!

Problem A:
I want the correct path for the img tag.
This works for me, but it’s wierd to type in the page name, isn’t it?:

<?php if($member->member_image()->value()) { echo '<img src="team/' . $member->member_image() . '"  alt="Portrait ' . $member->member_name() . '" height="150" />'; }

I played around with: $member->member_image() but the output was just filename.jpg but I need/want the full uri. Then I used
$member->member_image()->url() and the output on my local server was: http://project.dev/filename.jpg → this is wrong. The image is located at http://project.dev/team/filename.jpg
I also tried to combine . page->url() . $member->member_image() or . page->url() . $member->member_image()->url() but than the pagename appeared twice.

What am I doing wrong?

Problem B:
Using the thumb function. I tried:

<?php thumb($member->member_image(), array('width' => 400, 'height' => 250)); ?>` and `<?php thumb($member->member_image(), array('width' => 400, 'height' => 250)); ?>

Problem C (minor):
I can’t see the images in the Panel preview.

Thanks again for helping me out!

Best,
Andreas

2

Problem A:

<?php if($member->member_image()->value()) : ?>
<img src="<?php echo $page->image($member->member_image()->value()) ?>" alt="Portrait <?php echo  $member->member_name()" height="150" />
<?php endif ?>

Problem C:

What do you mean? In the file view in panel? What are the image dimensions? Larger than 2000px?

3

Problem A

Nope, it doesn’t work. Now the output is the whole system path:

<img src="/Users/amh/mamp-htdocs/project.dev/content/2-team/passbild.jpg" alt="Portrait" height="150">

Problem C
The problem is that I don’t know how I can present a preview :-/
In Panel it looks like:

This is the code from the yml blueprint:

teammember:
    label: Team
    type: structure
    entry: >
      <b>{{member_name}}</b> <i>({{employeetype}})</i><br />
      <img src="{{member_image}}" height="75" />
      {{member_job_1}}<br />{{member_job_2}}
    fields:
4

Oops, sorry, I forgot to add the url(), it should of course be

<?php if($member->member_image()->value()) : ?>
<img src="<?php echo $page->image($member->member_image()->value())->url() ?>" alt="Portrait <?php echo  $member->member_name() ?>" height="150" />
<?php endif ?>
1 Like
5

Solution to problem A had a small issue:

<?php if($member->member_image()->value()) : ?>
  <img src="<?php echo $page->image($member->member_image()->value())->url() ?>" alt="Portrait <?php echo $member->member_name() ?>" height="150" />
<?php endif ?>
6

Problem A => Solved :slight_smile:
A big thanks to both of you!

7

Problem B:

<img src="<?php $page->image($member->member_image()->value())->resize(400, 400)->url()" alt="Portrait">

Problem C can unfortunately not be solved easily, because the entry only outputs the raw values and can’t get the page object or the file object of the value. I believe that exact issue has come up somewhere else, still searching for it. :smiley:

Edit: There you go.

8

Problem B:
Almost :wink: There’s was a echo missing. This works!
<img src="<?php echo $page->image($member->member_image()->value())->resize(400, 400)->url(); ?>" alt="Portrait <?php echo $member->member_name() ?>">

Problem C
Ah. O.k.! Then I tried to fake it with an fixed uri + raw output. If this breaks it’s not as bad as on the public pages.

A big Thank You!
Andreas

9

I’ll give it a try.
Sorry, I didn’t found a solution with (my to short) forum search.

10

No worries, it took me quite long to find it too. :wink:

Haha, I think we really shouldn’t work on Sunday evenings. :smiley: