Hello, I did a very simple website (slider) that has a hash navigation with urls based on filenames of pictures (that are themselves ordered into ‘projects’). I only use the index.php page but needed to create folders so my client could put their pictures in every folder. The problem is that on mobile devices there is often a 404 Not Found, but the website is working on other devices. I know it’s probably not the most elegant way to do a slider and I’m a new user to Kirby. Thank you for your help! (I don’t know if the error comes from the fact of the hash navigation or the rewriting of the urls in the htaccess)
the website is: www.vingtsix.co
Hm, for me, the site doesn’t load on my iPhone at all, or only briefly before I get a notice that an error occurred (no 404 page).
You seem to be loading two versions of jquery, one very old and one more modern and a migrate script. I also get a console error on Desktop. So maybe those problems are related.
I removed them, sorry it was an oversight… do you still see the console error?
Yes, console error gone but the problem on iphone remains. Tested multiple browsers without success. Do you use any browser detection stuff?
What does that mean?
I meant that I ask Kirby to find certain images/files in folders/pages (but I don’t use those subpages… just the index.php) (and in any “index/project/” there’s 3 pictures to pick, that are shown in the index)
<?php foreach($site->grandChildren()->listed() as $project): ?>
<?php if($image = $project->images()->nth(0)): ?>
<div class="swiper-slide slide1" data-hash="<?= $image->urltitle() ?>" data-num="<?= $image->imagenumber() ?>" data-index="<?= $image->projectnumber() ?>" data-title="<?= $image->imagetitle() ?>">
<a href="<?= $image->urltitle() ?>">
<img class="swiper-lazy" data-src="<?php echo $image->url(); ?>" width="300px"/>
<?php endif ?>
<?php endforeach ?>
I’m sorry to bring this back, but I really need help on that point… My site is using hashnavigation on the swiper and maybe it comes from that. Do you think hashnavigation can mess it, only on mobile devices? I know this is probably an issue not due to Kirby, sorry for that
Hm, I have no idea what’s the issue, but one problem seems to be that lazy loading of images is not working as expected, because according to network tab, 59 images are loaded at once, so you get a pretty long initial load time and a large payload.
Also, according to Lighthouse report, you get a high LCP on mobile of 4.3 s.
Maybe try to remove some stuff from the website, i.e. use less images and from which number of images the issue turns up.
On a side note: I think there are some problems with the markup on your site: the
span element is an inline element. As such, it may contain phrasing content, but not block elements like
div(<span>: The Content Span element - HTML: HyperText Markup Language | MDN)
Thank you a lot Sonja, i didn’t know Lighthouse and indeed the lazyloading wasn’t working… it works now, thanks for the help