Connecting Template with Blueprint to display images in browser

The CMS Questions
1

I have one hero image and one side image on my page. Both are displaying in the browser, but I seem to have different types of code to achieve the same thing. And I’m confused about what is the right way to do it.

title: Default Page

columns:
	main:
		width: 2/3
		sections:

			section1:
				type: fields
				fields:
					hero_image:
						label: Hero image
						type: files
						multiple: false
						layout: cards
						size: huge
						image:
							back: white

	sidebar:
		width: 1/3
		sections:
			section3:
				type: fields
				fields:
					side_image:
						label: Side image
						type: files
						multiple: false
						layout: cards
						size: medium
						image:
							back: white

Then my Template uses two different ways to get the images to display in the browser

<?php if ($moondust = $page->hero_image()->toFile()): ?>
	<div class="hero-image">
		<?= $moondust->crop(1600, 800) ?>
	</div>
<?php endif ?>

<?php if($image = $page->side_image()->toFile()): ?>
	<img src="<?= $image->url() ?>" alt="">
<?php endif ?>

I want the hero image to be cropped. Does this account for the different code?

2

No, in your first example, you are using a shortcut, that prints the html for the file (the file object has a magic method __toString() that is responsible for that). Personally, I wouldn’t use this shortcut and always go with the long version (second example above), to have full control over the output.

3

So this?

<?php if($image = $page->hero_image()->toFile()): ?>
	<img src="<?= $image->crop(1600, 800)->url() ?>" alt="">
<?php endif ?>
4

Exactly. I mean, ideally, you would use responsive images… but for a start.

5

:grinning:

Yeah, it’s a start in the right direction! Cropping and responsive could be beyond me!

6

It shouldn’t be, it’s essential to reduce the amount of stuff that needs to be transferred and thereby load times. Images are a huge factor in that.

There’s a whole recipe about responsive images: Responsive images | Kirby CMS