Passo 23: Redimensionando Imagens
Redimensionando Imagens¶
No design da página da conferência, as fotos são limitadas a um tamanho máximo de 200 por 150 pixels. Que tal otimizar as imagens e reduzir seu tamanho se o original carregado for maior que os limites?
Esse é um trabalho perfeito que pode ser adicionado ao workflow do comentário, provavelmente logo após o comentário ser validado e antes de ser publicado.
Vamos adicionar um novo estado ready e uma transição optimize:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | --- a/config/packages/workflow.yaml
+++ b/config/packages/workflow.yaml
@@ -16,6 +16,7 @@ framework:
- potential_spam
- spam
- rejected
+ - ready
- published
transitions:
accept:
@@ -29,13 +30,16 @@ framework:
to: spam
publish:
from: potential_spam
- to: published
+ to: ready
reject:
from: potential_spam
to: rejected
publish_ham:
from: ham
- to: published
+ to: ready
reject_ham:
from: ham
to: rejected
+ optimize:
+ from: ready
+ to: published
|
Gere uma representação visual da nova configuração do workflow para validar se ela descreve o que queremos:
1 | $ symfony console workflow:dump comment | dot -Tpng -o workflow.png
|
Otimizando Imagens com o Imagine¶
As otimizações da imagem serão feitas graças à biblioteca GD (verifique se sua instalação local do PHP tem a extensão GD habilitada) e ao Imagine:
1 | $ symfony composer req "imagine/imagine:^1.2"
|
O redimensionamento de uma imagem pode ser feito através da seguinte classe de serviço:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | namespace App;
use Imagine\Gd\Imagine;
use Imagine\Image\Box;
class ImageOptimizer
{
private const MAX_WIDTH = 200;
private const MAX_HEIGHT = 150;
private $imagine;
public function __construct()
{
$this->imagine = new Imagine();
}
public function resize(string $filename): void
{
list($iwidth, $iheight) = getimagesize($filename);
$ratio = $iwidth / $iheight;
$width = self::MAX_WIDTH;
$height = self::MAX_HEIGHT;
if ($width / $height > $ratio) {
$width = $height * $ratio;
} else {
$height = $width / $ratio;
}
$photo = $this->imagine->open($filename);
$photo->resize(new Box($width, $height))->save($filename);
}
}
|
Depois de otimizar a foto, nós armazenamos o novo arquivo no lugar do original. Entretanto, você pode querer manter a imagem original por perto.
Adicionando uma Nova Etapa no Workflow¶
Modifique o workflow para lidar com o novo estado:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 | --- a/src/MessageHandler/CommentMessageHandler.php
+++ b/src/MessageHandler/CommentMessageHandler.php
@@ -2,6 +2,7 @@
namespace App\MessageHandler;
+use App\ImageOptimizer;
use App\Message\CommentMessage;
use App\Repository\CommentRepository;
use App\SpamChecker;
@@ -21,10 +22,12 @@ class CommentMessageHandler implements MessageHandlerInterface
private $bus;
private $workflow;
private $mailer;
+ private $imageOptimizer;
private $adminEmail;
+ private $photoDir;
private $logger;
- public function __construct(EntityManagerInterface $entityManager, SpamChecker $spamChecker, CommentRepository $commentRepository, MessageBusInterface $bus, WorkflowInterface $commentStateMachine, MailerInterface $mailer, string $adminEmail, LoggerInterface $logger = null)
+ public function __construct(EntityManagerInterface $entityManager, SpamChecker $spamChecker, CommentRepository $commentRepository, MessageBusInterface $bus, WorkflowInterface $commentStateMachine, MailerInterface $mailer, ImageOptimizer $imageOptimizer, string $adminEmail, string $photoDir, LoggerInterface $logger = null)
{
$this->entityManager = $entityManager;
$this->spamChecker = $spamChecker;
@@ -32,7 +35,9 @@ class CommentMessageHandler implements MessageHandlerInterface
$this->bus = $bus;
$this->workflow = $commentStateMachine;
$this->mailer = $mailer;
+ $this->imageOptimizer = $imageOptimizer;
$this->adminEmail = $adminEmail;
+ $this->photoDir = $photoDir;
$this->logger = $logger;
}
@@ -64,6 +69,12 @@ class CommentMessageHandler implements MessageHandlerInterface
->to($this->adminEmail)
->context(['comment' => $comment])
);
+ } elseif ($this->workflow->can($comment, 'optimize')) {
+ if ($comment->getPhotoFilename()) {
+ $this->imageOptimizer->resize($this->photoDir.'/'.$comment->getPhotoFilename());
+ }
+ $this->workflow->apply($comment, 'optimize');
+ $this->entityManager->flush();
} elseif ($this->logger) {
$this->logger->debug('Dropping comment message', ['comment' => $comment->getId(), 'state' => $comment->getState()]);
}
|
Note que $photoDir é injetado automaticamente, pois nós definimos uma configuração bind no container para esse nome de variável em um passo anterior:
1 2 3 4 | services:
_defaults:
bind:
$photoDir: "%kernel.project_dir%/public/uploads/photos"
|
Armazenando Dados Carregados em Produção¶
Nós já definimos um diretório especial com permissão de leitura e escrita para os arquivos enviados para o servidor no .symfony.cloud.yaml. Mas a montagem é local. Se quisermos que o container web e o worker que consome as mensagens possam acessar a mesma montagem, precisamos criar um serviço de arquivo:
1 2 3 4 5 6 7 8 9 10 | --- a/.symfony/services.yaml
+++ b/.symfony/services.yaml
@@ -19,3 +19,7 @@ varnish:
vcl: !include
type: string
path: config.vcl
+
+files:
+ type: network-storage:1.0
+ disk: 256
|
Utilize-o como diretório para armazenamento de fotos:
1 2 3 4 5 6 7 8 9 10 11 | --- a/.symfony.cloud.yaml
+++ b/.symfony.cloud.yaml
@@ -41,7 +41,7 @@ web:
mounts:
"/var": { source: local, source_path: var }
- "/public/uploads": { source: local, source_path: uploads }
+ "/public/uploads": { source: service, service: files, source_path: uploads }
hooks:
build: |
|
Isso deve ser suficiente que esse recurso funcione em produção.
- « Previous Passo 22: Estilizando a Interface do Usuário com o Webpack
- Next » Passo 24: Executando Crons
This work, including the code samples, is licensed under a Creative Commons BY-NC-SA 4.0 license.