Joomla! Documentation™

GSoC 2018
Imagens Adequadas para o Novo Gerenciador de Mídias
Documentação

Joomla! 

4.x

Introdução

O principal objetivo dessa extensão é preservar a mensagem associada à imagem, fornecendo ao usuário uma forma adicionar uma área de foco à imagem. As imagens se tornarão responsivas com a ajuda dessa extensão. Esta extensão é suportada pelo plug-in de ação de mídia e pelo plug-in de conteúdo.

Recursos

• Forneceu um editor de foco para colocar a informação de foco do autor de forma mais intuitiva.
• Corte automático de imagens de acordo com área de visualização do dispositivo usado.
• O corte é feito em volta da área de foco selecionada pelo autor.
• O autor por selecionar larguras de cortes específicas para as imagens.
• O autor pode selecionar focos específicos para dispositivos diferentes.
• O autor pode também remover as imagens redimensionadas e os pontos de foco anteriores para uma imagem específica dentro do editor de foco.
• Se o autor apagar uma imagem no Gerenciador de Mídias, as cópias redimensionadas e o ponto de foco também são apagados.

Obs.: Para usar essa extensão, o administrador deve ativar dois plugins no gerenciador:

1. Plugin Acão para Mídia: Recorte Inteligente
2. Plugin Conteúdo: Adequação de Imagem

Imagens Recortadas

Como configurar o ponto de foco em uma imagem?

1. No Gerenciador de Mídias, localize a imagem que se quer adicionar o ponto de foco.
   800px
2. Editando a imagem, uma nova janela se abre. Vá para a aba Recorte Inteligente.
   800px
3. Selecione agora a área de foco da imagem, com a ajuda do editor.
   800px
4. Após configurar, salve e feche o editor e retorne para o Gerenciador de Mídias.
   800px
5. Agora insira essa imagem normalmente no seu artigo. A imagem se tornou responsiva ao mesmo tempo que a área mais importante foi preservada.

Criando Áreas de Foco Múltiplas

1. Siga os passos básicos para configurar os pontos de foco iniciais.
2. Agora, no canto superior direito do plugin você encontra um menu com várias larguras.
   800px
3. Selecione uma largura depois o ponto de foco no editor.
4. Salve e feche a guia.

Adicionando larguras personalizadas

1. No Gerenciador de Plugins procure por Corte Inteligente da Mídia.
   800px
2. Agora adicione novas larguras e salve o plugin.
   
   800px
3. Na guia Corte Inteligente aparecem as novas larguras.
   800px

Apagando pontos de foco configurados anteriormente

Obs.: Todas as imagens redimensionadas e focos anteriormente salvos serão apagados.

1. Vá para a Guia Corte Inteligente em Editar Imagem.
2. No canto inferior direito da tela está o botão para apagar o foco.
3. Após apagar o foco, recarregue a página ou aperte cancelar para voltar ao Gerenciador de Mídia

800px

Fluxo de Trabalho

This Extension consists of two independent plugins.

Focus Plugin

This is a Media-Action plugin. It is providing the UI for managing the focus points. It takes in the focus points from the user and saves it into the file storage by sending an AJAX request to the controller AdaptiveImageController.php. Finally, when the author is satisfied with the focus he hit Save and Close which raises another AJAX request, this time new images are generated with an efficient algorithm and save them into the directory /media/focus. Nomenclature of resized images is (resize image width)_(base64 encoded full path of the image).

Adaptive Image Plugin

This is a Content plugin. If the focus of a particular image is being set in the currently opened article then this plugin will add the <picture> element to that image and all the associated resized-images will be appended to it from /media/focus/. This plugin will also delete all the resized images if the original image is not found (or deleted).

Extending Extension

Changing storage for focus points

Currently, The focus area is being saved in JSON format in the file storage(JSONFocusStore Driver). This can be changed to any other storage by making a new driver class into Joomla\CMS\AdaptiveImage\.The driver class should implement Joomla\CMS\AdaptiveImage\FocusStoreInterface interface. JSONFocusStore driver class is implementing Joomla\CMS\AdaptiveImage\FocusStoreInterface. FocusStoreInterface has following methods declared:

1. setFocus($dataFocus, $width, $imgSrc)

This method stores/updates the focus area into the storage.

• $dataFocus It has the dimensions of the focus area. It is an array with keys box-left, box-top, box-width, box-height.
• $width It is the size of image for which the focus area is being stored.
• $imgSrc It is the full path of the image corresponding to the focus area.

2. getFocus($imgSrc, $width)

This method returns the focus area of the image. It return all the focus area associated with the image

• $imgSrc It is the full path of the image corresponding to the focus area.
• $width(optional) If the user want to take in the value of focus area for particular width then, it may be mentioned.

3. deleteFocus($imgSrc)

It deletes all the focus associated with the image.

• $imgSrc It is the full path of the image corresponding to the focus area.