"http://home.com/tag:smth/page:2" breaks link to img src

Kirby 2 Solved ✅
1

My project site is twicked to avoid “/blog/” part in URL. Everything works fine untill I go to the next page of tag filtered list of articles. It breaks inner links to images like src=’/assets/images/logo.png’ wich become something like http://mysite.com/tag:%D0%B9%D0%BE%D0%B3%D0%B0/assets/images/logo.png

2

Hi. How are your src='/assets/images/logo.png' URLs generated exactly?

3

Sorry, didn’t get the question. This link is hardcoded exactly this way in blog.php

<h1><img src="assets/images/logo.png" /></h1>

And as I’ve said evetything, but the tag filtering result pagination works fine.

4

This:

<h1><img src="assets/images/logo.png"  /></h1>

will only work if all your pages have URLs that are one level deep, such as:

/ROOT/
/ROOT/some-page
/ROOT/other-page
/ROOT/likewise

and it will break if you have a page with subpages:

/ROOT/other-page/child-page --> woops, "assets/images/logo.png" doesn't resolve anymore
1 Like
5

Try this:

<h1><img src="<?php echo kirby()->urls()->assets() . '/images/logo.png'?>" /></h1>
1 Like
6

Thank you very much indeed.

7

I think the url() helper function should work too:

<h1>
  <img alt="…" src="<?php echo url('assets/images/logo.png') ?>" />
</h1>

Kirby should automatically prepend the correct URL root. (If your setup is a bit special, you can also use the url config option to tell Kirby what the URL root is.)

As a side note: your images should always have a alt attribute for accessibility. You can read more online on how to write good alt text (in-depth article) but if you want a shorter rule of thumb: ask yourself, “if the image fails to load and some text is shown instead of the image, what should that text be?”

Two main cases:

  • Image is mainly or mostly decorative: use alt="" (empty alt attribute helps screen readers know that there is no information to convey; otherwise they might try to read the image’s URL instead).
  • Image has a meaning you want to convey: use words conveying that information.

For instance, if this is a logo for a company whose website you’re building, the alt text should be the name of the company. If the company is named ACME, then for alt text:

  • “ACME” would be alright,
  • “ACME logo” would be okay but superfluous,
  • and “logo” would be plain wrong.
2 Likes