Adding a Detail View
In the previous video we concentrated on adding in pagination to our Gallery page output. In this video we have the simpler task of displaying a single image at a larger size. This still likely won't be the full size of the image, and maybe a little later on we could consider creating a dedicated image for this view also. For the moment, we will go with the full size image scaled down to fit the view.
Again, for the moment we will keep things nice and simple and have a hardcoded image filename which we will pass from our Controller action to our Twig template.
The idea here is again, proof of concept. We want to do things as simply as possible to get that "quick win". It's amazing how much momentum can be built up by doing many small tasks. If we try to do too many things, or things that add a bunch of extra complexity then we run the risk of hitting a hard problem, losing momentum, and that dramatically increases the likelihood of giving up.
Enough rambling, let's see the code:
<?php
// /src/AppBundle/Controller/DetailController.php
namespace AppBundle\Controller;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;
class DetailController extends Controller
{
/**
* @Route("/view", name="view")
*/
public function indexAction(Request $request)
{
$image = 'landscape-summer-beach.jpg';
return $this->render('detail/index.html.twig', [
'image' => $image
]);
}
}We've added in a new controller - the DetailController.
It may be that in the detail view we have further information that we wish to display alongside this particular image - download stats, the amount of times this image was viewed, alternative resolutions - that sort of thing.
For the moment, we simply want to display the image.
Again, the image filename is hardcoded. Make sure that this image actually exists in your web/images directory, or change up the $image variable to be some image filename that does exist.
We will update this controller action a little later to accept a 'slug'. A slug is simply-an-alphanumerical-string-with-spaces-replaced-with-hyphens. We will add in some constraints to ensure that slugs are unique in our database, and then we can query on the slug to find the underlying image data. Again, all in good time.
For now, all we care about is the file name.
We pass this through to a Twig template that doesn't yet exist. Let's create it:
<!-- /app/Resources/views/detail/index.html.twig -->
{% extends 'base.html.twig' %}
{% block body %}
<div class="row">
<div class="col-sm-12">
<h1 class="text-center">Image name here</h1>
<div class="thumbnail">
<a href="images/{{ image }}">
<img src="/images/{{ image }}" alt="...">
</a>
<div class="caption">
<h3>My Image Caption</h3>
<ul>
<li>Tag 1</li>
<li>Tag 2</li>
<li>Tag 3</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}You are entirely free to change this up, and I encourage you to do so. Remember this is a visual heavy site, and there's a lot of competition in this space. If you want to put this site live then make it look good.
Note that the img itself is wrapped in a link to the full size image. This allows the viewer to click the image to see the file without all our surrounding template 'mess'.
That's about it here. Nice and easy, but we've got the job done.
One last thing, you might be tempted to tweak the controller action as follows:
/**
* @Route("/view", name="view")
*/
public function indexAction(Request $request)
{
return $this->render('detail/index.html.twig', [
'image' => 'landscape-summer-beach.jpg',
]);
}Whilst this will work for now, we will soon be replacing the "image as a string" concept with "image as an object". The current setup is working with that idea in mind.
