Homepage won't show image in particular area

Kirby 2 Solved ✅
1

Hello,
I need help to solve this. Some image on my homepage won’t showed up. I don’t know why, either don’t know where to locate the file which need to be fixed in cpanel. If there’s someone who know how to fix this, here’s the url https://ahsanjaya.com/.

2

Without any context, it’s hard to tell what’s going wrong. How do you include your images in the content/templates?

The src attribute of the image tags in the Produk Unggulan Kami section are all empty:

<figure class="service-thumb-category"><img src=""><figcaption class="service-txt"><h5>PROMO TERPAL KOLAM BIOFLOK</h5></figcaption></figure>
3

I think this is:

<div class="service-item">
                   <figure class="service-thumb-category">
                       <img src="<?@$ct->detailImage()->tofile()->crop(540, 540)->url()?>">
                       <figcaption class="service-txt">
                           <h5><?= @$ct->title()->html() ?></h5>
                       </figcaption>
                   </figure>```
4

There’s an echo statement missing, should be:

<img src="<?= @$ct->detailImage()->tofile()->crop(540, 540)->url()?>">

Placing an @ sign before the variable is not really good coding practice, but I guess those are all over the place to suppress errors?

5

I can only guess, yes it was meant to suppress errors.

Now I already put echo statement, and the missing img url have been showed in inspector.
But, the image still not displayed/broken. I run another search and find out this code on a product.php file, which has most same characters with the area which images are broken. Do you think this is the correct page to modify? Is there any wrong with this?

<div class="row mtn-30">
            <?php  $portfolio = $page->children()->visible();?>
            <?php foreach($portfolio as $pf): ?>
            <div class="col-sm-6 col-lg-4">
                <!-- Start Service Item -->
                <div class="service-item">
                    <figure class="service-thumb">
                        <figure class="service-details-thumb">
                            <?php foreach ($pf->images()->sortBy('sort', 'asc') as $key):?>
                            <img src="<?= $key->crop(370, 317)->url()?>" alt="<?= $page->title()->html() ?>" />
                            <?php endforeach;?>
                        </figure>
                        <figcaption class="service-txt">
                            <h5><?= $pf->title()->kirbytext()?></h5>
                            <span><?= $pf->year()->html()?> - <?= $pf->location()->html()?></span>
                        </figcaption>
                    </figure>
                </div>
                <!-- End Service Item -->
6

From looking at the class applied to the figure tag (service-thumb-category), your first code snippet seems the right place (unless there are other similar code snippets). The last code snippet you posted above looks ok and is not used in the home page section with the missing images.

7

You could search for this field in the source code to check in which page folder it is used and in which templates/snippets.

8

Found out that the file should placed directly under public/html, not in subfolder, to be displayed.

Now I don’t know what to do. All of sudden something messed up my homepage’s layout.

9

Are these scripts correct?

this is from home templates

<!--== Start Service Area Wrapper ==-->
<div class="service-area-wrapper sm-top-wt">
    <div class="service-area-top parallax" data-parallax-speed="0.75" data-bg="<?php if (@$page->bannercategory()->toFile()) {
    echo @$page->bannercategory()->toFile()->url();}else {echo  @$site->banner()->toFile()->url();}?>">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 col-xl-5 m-auto text-center">
                    <div class="section-title section-title--light">
                        <!-- <h6>OUR SERVICES</h6> -->
                        <h2 class="mb-0"><?= @$page->titlecategory()->html()?></h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php snippet('section/category')?>
</div>
<!--== End Service Area Wrapper ==-->

and this is the code from category snippet

<div class="service-content-area">
    <div class="container">
        <div class="row mtn-30">
            <?php  @$category = page('category')->children()->visible()->flip(); ?>
            <?php foreach(@$category as $ct): ?>
            <div class="col-sm-6 col-lg-4">
                <!-- Start Service Item -->
                <div class="service-item">
                    <figure class="service-thumb-category">
                    	<img src="<?= @$ct->detailImage()->tofile()->crop(540, 540)->url() ?>">
                        <figcaption class="service-txt">
                            <h5><?= @$ct->title()->html() ?></h5>
                        </figcaption>
                    </figure>

                    <div class="service-content">
                        <div class="service-content-inner">
                            <h5><?= @$ct->title()->html() ?></h5>
                            <p><?= @$ct->text()->html() ?></p>
                            <a href="<?= @$ct->url() ?>" class="stretched-link">
                                <button class="btn btn-info custom-category">Lihat Lanjut</button>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- End Service Item -->
            </div
            <?php endforeach ?>
        </div>
    </div>
</div>

but the homepage show much difference, from what I get with inspector.

10

The closing </div is missing a closing bracket in the category snippet! That’s probably why the section is broken.

11

Great, thank you very much!