Set cover image

I’m trying to set a cover image for a project and I can’t get the image to display properly, just the image name is coming up.

my code is:

<div class="container">
    <ul class="love-stories">
    <?php foreach ($page->children()->listed() as $project): ?>
        <li>
            <a href="<?= $project->url() ?>">
                <figure class="effect-sadie">
                    <?php if ($cover = $project->cover()): ?>
                        <?= $cover->crop(1020, 740) ?>  
                    <?php end if ?>
                    <figcaption>
                            <h2><?= $project->title() ?></h2>
                            <p><?= $project->location() ?></p>    
                    </figcaption>
                </div>
             </a>
        </li>
        <?php endforeach ?>
    </ul>   
</div>

and my blueprint is:

title: Wedding 

columns:
  left:
    width: 1/2
    sections:         
      content:
        type: fields
        fields:
          location:
            type: text  
          intro:
            type: textarea
          cover:
            type: files
            multiple: false
            layout: cards
            cover: true
            size: large

  right:
    width: 1/2
    sections: 
      gallery:
        type: files
        layout: cards
        limit: 999
        image:
          ratio: 4/3

You have to convert the field value to a file object first:

<?php if ($cover = $project->cover()->toFile()): ?>
    <?= $cover->crop(1020, 740) ?>  
<?php end if ?>

I had tried that at first but I kept getting an error, ‘This page is currently offline due to an unexpected error.’

Could you please enable debug in your /site/config/config.php (create file if it doesn’t exist), then tell us what the error says?

Does your page have a page model?

ParseError

syntax error, unexpected ‘if’ (T_IF)

endif not end if!

🤦 of course. I should probably sleep before logging onto the forum.