Is there a way to add anchored links to images in Panel?

[morDub]

I have a website with a photography portfolio that I am migrating over to kirby. How can I make it so the user can add anchored links to the photos uploaded into kirby. I looked every where for a solution, but there does not seem to be a way to serve all of the files saved into a page on panel into a gallery and have each photo anchored with a link. If only there was a way to add this function to the image editing field in panel. I added a url to image panel but that did not seem to work. When I click/hover over the image during testing nothing happens -nothing is anchored to any of the images even though there is one attached to the images’ meta. I am using the kirby-images plugin.

     <?php foreach($page->slideshow()->yaml() as $image): ?>   
  <?php if($image = $page->image($image)): ?>
    <?= $image->crop(158,105)->html(); ?>  		    
  <?php endif ?>
<?php endforeach; ?>

  title: Home

pages: false



files:
  sortable: true
  fields:
    caption:
      label: Caption
      type: text
    url:
      label: url
      type: url
    tags:
      label: tags
      type: tags
    date:
      label: Date
      type: date


fields:
 slideshow:
  label:       Slideshow
  type:        images

[texnixe]

You have to output that link in your template:

<?php foreach($page->slideshow()->yaml() as $image): ?>   
  <?php if($image = $page->image($image)): ?>
   <a href="<?= $image->link() ?>"> <?= $image->crop(158,105)->html(); ?> </a>	    
  <?php endif ?>
<?php endforeach; ?>

Note that I renamed your url field to link, so as not to confuse that with the image url.

[morDub]

@texnixe

<?php foreach($page->slideshow()->yaml() as $image): ?>
<?php if($image = $page->image($image)): ?>
<a href=“<?= $image->link() ?>”> <?= $image->crop(158,105)->html(); ?> </a>
<?php endif ?>
<?php endforeach; ?>

This unfortunately did not work. Images still not going to the url attached to them. Nothing happen when I click on the images.

[texnixe]

Is the link correctly printed if you inspect the source code?
Have you changed the name of the field in your blueprint and in the files’ meta text files?
No JavaScript preventing a regular link click?

[morDub]

When I inspect the page the photos are anchored to their internal links that go to themselves, but not to the url that I set the to with the the url field that I added to images in panel-furthermore the images still do not appear to be anchored when I try to click on them. Sorry if this is confusing-I thought this would be a simple thing, I just started using kirby.

[texnixe]

As I said, you should rename your field from url to link, otherwise you have the problem that it prints the url of the image instead of the link you want to link to.

Try to avoid using field names that conflict with existing page/file methods: https://getkirby.com/docs/panel/blueprints/form-fields#field-names

Other than that, there is nothing particularly complex about putting a link around an image.

[morDub]

I did that and it is still not working. Your original code

<?php foreach($page->slideshow()->yaml() as $image): ?> <?php if($image = $page->image($image)): ?>

<?= $image->crop(158,105)->html(); ?>

<?php endif ?> <?php endforeach; ?>

Did not render the gallery at all, even when I changed the field name to link.

However the gallery rendered when the anchor portion is taken out of the code. The link is also still the same when inspected, I know its probably something simple I am missing here.

[texnixe]

That’s a bit weird, why should the images disappear if you put an anker tag around them? Are they really not rendered or just not shown (have you checked the source code). If nothing is rendered on the page with the code, please enable debugging in your config, maybe there is some PHP error:

c::set('debug', true);

I don’t see what should be wrong with the code.

Without actually seeing the content of the meta data files and your actual code, it’s a bit hard to debug from remote.

Please check again if all meta data files have the correct field names. Also, have you cleared the cache?

[morDub]

Im going to try and take some screenshots.

[morDub]

Here are some screenshots of what I’m working on. Files from the panel are fed to gallery, but the anchors on the images just wont work.

[morDub]

[morDub]

There is the link field that I created with google as the anchor.

[morDub]

Using the kirby images plugin.

[morDub]

yml file

[texnixe]

Looks ok so far, but there is no anker tag around the image in your snippet…

[morDub]

I will try that again and then I will post screens, for some reason that just did not work. One moment plz-thank you for your help so far btw texnixe.

[morDub]

Here is the other code.

[morDub]

…and with the new code the gallery does not show at all.

[texnixe]

May I see the source code, please?

[morDub]

The above pictures of the code is pretty much it for the gallery.