responsive pics
Version 1.8.3
ResponsivePics é um plugin para WordPress que permite aos autores de temas WordPress redimensionar automaticamente imagens * em layouts responsivos.
*ReponsivePics não lida com imagens no editor wysiwig do WordPress, só é útil para autores de temas que usam imagens ou fotos em seus temas. Ele lida automaticamente com imagens retina ou HDPI por meio de consultas de mídia.
Para documentação completa e exemplos, visite:responsive.pics
| Pré-requisito | Como verificar |
|---|---|
| PHP >= 5.6.x | php -v |
| WordPress >= 3.5.x | wp core version |
| WP-Cron habilitado ou um cron job real configurado | test WP-Cron |
Você pode instalar este plugin através da linha de comando ou do painel de administração do WordPress.
Se você estiver usando o Composer para gerenciar o WordPress, adicione ResponsivePics às dependências do seu projeto.
composer require clarifynl/responsive-picsEm seguida, ative o plugin via wp-cli.
wp plugin activate responsive-pics Atualmente, o elemento <picture> e os atributos srcset e sizes no elemento <img> são suportados em todos os navegadores modernos, exceto no Internet Explorer 11 .
Para habilitar o suporte para o elemento de imagem e recursos associados em navegadores que ainda não os suportam, você pode usar um polyfill. Recomendamos o uso do Picturefill.
Para instalar o Picturefill em seu tema wordpress como um módulo de nó, execute o seguinte comando no diretório de seu tema:
npm install --save picturefill
yarn add picturefill
E importe o pacote no arquivo javascript global do seu tema: import 'picturefill';
ResponsivePics usa as seguintes variáveis padrão:
| Variável | Tipo | Padrão | Definição |
|---|---|---|---|
$columns | número | 12 | A quantidade de colunas que seu layout de grade usa |
$gutter | número | 30 | A largura da medianiz em pixels (espaço entre as colunas da grade) |
$breakpoints | variedade | ['xs' => 0, 'sm' => 576, 'md' => 768, 'lg' => 992, 'xl' => 1200, 'xxl' => 1400] | Os pontos de interrupção de consulta de mídia que o ResponsivePics usará para criar e servir suas fontes de imagem |
$grid_widths | variedade | ['xs' => 576, 'sm' => 540, 'md' => 720, 'lg' => 960, 'xl' => 1140, 'xxl' => 1320] | As larguras máximas do seu layout em pixels que o ResponsivePics usará para redimensionar suas imagens |
$max_width_factor | número | 2 | O fator máximo de largura a ser usado para redimensionar e cortar a altura de uma fonte de imagem |
$lazyload_class | corda | lazyload | A classe css a ser adicionada à tag img quando lazyload estiver ativado |
$lqip_width | número | 100 | A largura da imagem a ser usada para o LQIP (espaço reservado para imagem de baixa qualidade) |
$lqip_class | corda | blur-up | A classe css a ser adicionada à tag img quando LQIP (espaço reservado para imagem de baixa qualidade) estiver ativado |
$image_quality | número | 90 | A qualidade de compactação da imagem em porcentagem usada no WP_Image_Editor ao redimensionar imagens |
$wp_rest_cache | booleano | false | Quer habilitar o cache nos cabeçalhos de resposta da API WP Rest |
$wp_rest_cache_duration | número | 3600 | A duração do cache (idade máxima) em segundos do cabeçalho WP Rest API Cache-Control |
Por padrão, ResponsivePics usará as variáveis SCSS do Bootstrap 4 para definir:
A quantidade de colunas da grade : $grid-columns: 12;
A largura da medianiz da grade em pixels: $grid-gutter-width: 30px;
Os pontos de interrupção da grade em pixels:
$grid-breakpoints : (
xs : 0 ,
sm : 576 px ,
md : 768 px ,
lg : 992 px ,
xl : 1200 px ,
xxl : 1400 px
);E as larguras máximas dos containers em pixels:
$container-max-widths : (
sm : 540 px ,
md : 720 px ,
lg : 960 px ,
xl : 1140 px ,
xxl : 1320 px
); Nota: ResponsivePics adicionará a largura máxima do contêiner xs para você (= 576), com base no ponto de interrupção da grade sm padrão (= 576px).
Se você personalizou os padrões de bootstrap ou se estiver usando um sistema de grade diferente (Foundation, Materialize etc.), ou mesmo se quiser adicionar pontos de interrupção e larguras de contêiner extras, você pode passar suas próprias variáveis de grade para a biblioteca ResponsivePics.
Adicione estas linhas ao arquivo functions.php do seu tema e certifique-se de verificar se a classe ResponsivePics existe:
/*
* Set ResponsivePics variables
*/
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setColumns ( 12 );
ResponsivePics:: setGutter ( 30 );
ResponsivePics:: setBreakPoints ([
' xs ' => 0 ,
' sm ' => 576 ,
' md ' => 768 ,
' lg ' => 992 ,
' xl ' => 1200 ,
' xxl ' => 1400 ,
' xxxl ' => 1600 ,
' xxxxl ' => 1920
]);
ResponsivePics:: setGridWidths ([
' xs ' => 576 ,
' sm ' => 768 ,
' md ' => 992 ,
' lg ' => 1200 ,
' xl ' => 1400 ,
' xxl ' => 1600 ,
' xxxl ' => 1920
]);
ResponsivePics:: setMaxWidthFactor ( 4 );
ResponsivePics:: setLazyLoadClass ( ' lozad ' );
ResponsivePics:: setLqipWidth ( 200 );
ResponsivePics:: setLqipClass ( ' blurred ' );
ResponsivePics:: setImageQuality ( 85 );
ResponsivePics:: setRestApiCache ( true );
ResponsivePics:: setRestApiCacheDuration ( 86400 );
}Você pode recuperar quaisquer variáveis usadas em ResponsivePics executando uma destas funções auxiliares:
ResponsivePics:: getColumns (); // Will return $columns
ResponsivePics:: getGutter (); // Will return $gutter
ResponsivePics:: getBreakpoints (); // Will return $breakpoints
ResponsivePics:: getGridWidths (); // Will return $grid_widths
ResponsivePics:: getMaxWidthFactor (); // Will return $max_width_factor
ResponsivePics:: getLqipWidth (); // Will return $max_width_factor
ResponsivePics:: getLazyLoadClass (); // Will return $lazyload_class
ResponsivePics:: getLqipWidth (); // Will return $lqip_width
ResponsivePics:: getLqipClass (); // Will return $lqip_class
ResponsivePics:: getImageQuality (); // Will return $image_quality
ResponsivePics:: getRestApiCache (); // Will return $wp_rest_cache
ResponsivePics:: getRestApiCacheDuration (); // Will return $wp_rest_cache_duration Para inserir um elemento <img> responsivo em seu modelo, use a função get_image ou o endpoint da API responsive-pics/v1/image com os parâmetros disponíveis.
ResponsivePics:: get_image (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
| Parâmetro | Tipo | Obrigatório | Padrão | Definição |
|---|---|---|---|---|
| eu ia | número | sim | O ID da imagem do WordPress (por exemplo, 1). | |
| tamanhos | corda | sim | Uma sequência separada por vírgula de tamanhos de imagem preferidos (por exemplo, 'xs-12, sm-6, md-4, lg-3' ). Consulte a seção Tamanhos para obter mais informações. | |
| cortar | número/sequência | opcional | false | Um fator de corte da largura para a altura desejada dentro do intervalo padrão de 0-2 (por exemplo, 0.75 ) com posições de corte (opcional) (por exemplo, 0.75|ct ). Consulte a seção Recorte para obter mais informações. |
| aulas | corda | opcional | null | Uma string separada por vírgula de classes CSS adicionais que você deseja adicionar ao elemento img (por exemplo, 'my_img_class' ou 'my_img_class, my_second_img_class' ). |
| carga lenta | booleano/string | opcional | false | Quando true habilita classes lazyload e atributos de srcset de dados. Quando native habilita o atributo loading="lazy" nativo. Consulte a seção Lazyloading para obter mais informações. |
| lqip | booleano | opcional | false | Quando true ativa as classes LQIP e o atributo src. Consulte a seção LQIP para obter mais informações. |
Para recuperar os dados responsivos <img> em seu tema, você pode usar a função get_image_data ou o endpoint da API responsive-pics/v1/image-data com os parâmetros disponíveis id , sizes , crop , classes , lazyload e lqip .
ResponsivePics:: get_image_data (id, sizes, crop, classes, lazyload, lqip); GET /wp-json/responsive-pics/v1/image-data/<id>?sizes=<sizes>&crop=<crop>&classes=<classes>&lazyload=<lazyload>&lqip=<lqip>
Isso retornará um array contendo as fontes de imagem disponíveis por ponto de interrupção, texto alternativo, tipo MIME, valores booleanos para canal alfa e carregamento lento, um URL para a imagem lqip e um array para as classes css.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' lqip ' => ( string ) $ lqip ,
' classes ' => ( array ) $ classes
]; Para inserir um elemento <picture> responsivo em seu modelo, use a função get_picture ou o endpoint da API responsive-pics/v1/picture com os parâmetros disponíveis.
ResponsivePics:: get_picture (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
| Parâmetro | Tipo | Obrigatório | Padrão | Definição |
|---|---|---|---|---|
| eu ia | número | sim | O ID da imagem do WordPress (por exemplo, 1). | |
| tamanhos | corda | sim | Uma sequência separada por vírgula de tamanhos de imagem preferidos (por exemplo, 'xs-12, sm-6, md-4, lg-3' ). Consulte a seção Tamanhos para obter mais informações. | |
| aulas | corda | opcional | null | Uma string separada por vírgula de classes CSS adicionais que você deseja adicionar ao elemento picture (por exemplo, 'my_picture_class' ou 'my_picture_class, my_second_picture_class' ). |
| carga lenta | booleano/string | opcional | false | Quando true habilita classes lazyload e atributos de srcset de dados. Quando native habilita o atributo loading="lazy" nativo. Consulte a seção Lazyloading para obter mais informações. |
| intrínseco | booleano | opcional | false | Quando true habilita classes intrinsic e atributos de espectro de dados. Consulte a seção Aspectratio intrínseca para obter mais informações. |
Para recuperar os dados <picture> responsivos em seu tema, você pode usar a função get_picture_data ou o endpoint da API responsive-pics/v1/picture-data com os parâmetros disponíveis id , sizes , classes , lazyload e intrinsic .
ResponsivePics:: get_picture_data (id, sizes, classes, lazyload, intrinsic); GET /wp-json/responsive-pics/v1/picture-data/<id>?sizes=<sizes>&classes=<classes>&lazyload=<lazyload>&intrinsic=<intrinsic>
Isso retornará um array contendo as fontes de imagem disponíveis por ponto de interrupção, texto alternativo, tipo MIME, valores booleanos para canal alfa e intrínseco, um array para as classes css de imagem e um array para as classes css img.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' lazyload ' => ( bool ) $ lazyload ,
' intrinsic ' => ( bool ) $ intrinsic ,
' picture_classes ' => ( array ) $ picture_classes ,
' image_classes ' => ( array ) $ image_classes
]; Para inserir uma imagem de fundo responsiva em seu modelo, use a função get_background ou o endpoint da API responsive-pics/v1/background com os parâmetros disponíveis.
ResponsivePics:: get_background (id, sizes, classes); GET /wp-json/responsive-pics/v1/background/<id>?sizes=<sizes>&classes=<classes>
| Parâmetro | Tipo | Obrigatório | Padrão | Definição |
|---|---|---|---|---|
| eu ia | número | sim | O ID da imagem do WordPress (por exemplo, 1). | |
| tamanhos | corda | sim | Uma sequência separada por vírgula de tamanhos de imagem preferidos (por exemplo, 'xs-12, sm-6, md-4, lg-3' ). Consulte a seção Tamanhos para obter mais informações. | |
| aulas | corda | opcional | null | Uma string separada por vírgula de classes CSS adicionais que você deseja adicionar ao elemento de fundo (por exemplo, 'my_bg_class' ou 'my_bg_class, my_second_bg_class' ). |
Para recuperar os dados da imagem de fundo responsiva em seu tema, você pode usar a função get_background_data ou o endpoint da API responsive-pics/v1/background-data com os parâmetros disponíveis id , sizes e classes .
ResponsivePics:: get_background_data (id, sizes, classes); GET /wp-json/responsive-pics/v1/background-data/<id>?sizes=<sizes>&classes=<classes>
Isso retornará um array contendo as fontes de imagem de fundo disponíveis por ponto de interrupção, texto alternativo, tipo MIME, um valor booleano se a imagem tiver um canal alfa, um id para o fundo e um array para as classes CSS de fundo.
[
' sources ' => ( array ) $ sources ,
' alt ' => ( string ) $ alt ,
' mimetype ' => ( string ) $ mime_type ,
' alpha ' => ( bool ) $ alpha ,
' id ' => ( string ) $ id ,
' classes ' => ( array ) $ classes
];Os seguintes formatos de arquivo de imagem são suportados:
| Formato de arquivo | Tipo MIME | Propriedades |
|---|---|---|
| jp(e)g | imagem/jpeg | |
| webp | imagem/webp | Requer Wordpress versão 5.8 ou superior. |
| png | imagem/png | Quando o png contém um canal alfa , uma classe extra 'has-alpha' será adicionada ao elemento de imagem para estilo adicional. |
| gif | imagem/gif | Quando o gif é animado (ele verificará vários quadros de cabeçalho), nenhum redimensionamento ou corte da imagem será feito para evitar o descarte da animação. |
Quaisquer outros formatos de imagem não serão redimensionados ou cortados.
A seguinte sintaxe está disponível para cada tamanho de imagem no parâmetro sizes :
breakpoint:width| Parâmetro | Tipo | Obrigatório | Padrão | Definição |
|---|---|---|---|---|
| ponto de interrupção | número ou string | sim | Se indefinido e width for um número, o ponto de interrupção será igual à largura. Se indefinido e width for uma definição de coluna, o ponto de interrupção será o ponto de interrupção correspondente (por exemplo, se a largura for 'xs-8' , o ponto de interrupção será 'xs' ). | |
| largura | número ou string | sim | Uma definição de coluna é uma chave em $grid_widths mais um traço e um número de intervalo de coluna (por exemplo, 'xs-8' ).Se o número do intervalo da coluna tiver o sufixo -full (por exemplo, 'xs-8-full' ), a largura da coluna será calculada como uma porcentagem de $grid_width , mas como a próxima largura $breakpoint correspondente (como em um .container-fluid ).Você também pode usar full como número de extensão (por exemplo, 'xs-full' ) para o tamanho da largura total com base na próxima largura $breakpoint correspondente. |
Como o elemento <picture> e as imagens de fundo suportam imagens direcionadas à arte, a seguinte sintaxe completa está disponível para cada tamanho de imagem no parâmetro sizes :
breakpoint:width [/factor|height]|crop_x crop_yOs seguintes parâmetros estão disponíveis na sintaxe de tamanhos:
| Parâmetro | Tipo | Obrigatório | Padrão | Definição |
|---|---|---|---|---|
| ponto de interrupção | número ou string | sim | Se indefinido e width for um número, o ponto de interrupção será igual à largura. Se indefinido e width for uma definição de coluna, o ponto de interrupção será o ponto de interrupção correspondente (por exemplo, se a largura for 'xs-8' , o ponto de interrupção será 'xs' ). | |
| largura | número ou string | sim | A largura (máx.) desejada da imagem (por exemplo, 800 ). Uma definição de coluna é uma chave em $grid_widths mais um traço e um número de intervalo de coluna (por exemplo, 'xs-8' ).Se o número do intervalo da coluna tiver o sufixo -full (por exemplo, 'xs-8-full' ), a largura da coluna será calculada como uma porcentagem de $grid_width , mas como a próxima largura $breakpoint correspondente (como em um .container-fluid ).Você também pode usar full como número de extensão (por exemplo, 'xs-full' ) para o tamanho da largura total com base na próxima largura $breakpoint correspondente. | |
| altura | número | opcional | A altura desejada (máx.) da imagem (por exemplo, 500 ). | |
| fator | número | opcional | Um fator de corte da largura para a altura desejada dentro do intervalo padrão de 0-2 (por exemplo, 0.75 ). | |
| colheita_x | número ou string | opcional | c | Posição de corte na direção horizontal (por exemplo, c ). Consulte a seção Recorte para obter mais informações. |
| cortar_y | número ou string | opcional | c | Posição de corte na direção vertical (por exemplo, b ). Consulte a seção Recorte para obter mais informações. |
As seguintes opções estão disponíveis como posições de corte válidas:
Você pode usar as seguintes abreviações de posição de corte na direção horizontal (x):
l : esquerdac : centror : certof : ponto focal (veja a seção Ponto Focal para mais informações)E na direção vertical (y):
t : topoc : centrob : inferior Se a direção vertical não for definida, a direção horizontal x será tratada como um atalho:
c : centro centrot : centro superiorr : centro direitob : centro inferiorl : centro esquerdof : ponto focal (veja a seção Ponto Focal para mais informações)Você também pode usar porcentagens como sintaxe válida de posição de corte:
75 10 : 75% da esquerda, 10% do topo25 80 : 25% da esquerda, 80% do topo50 100 : 50% da esquerda, 100% da parte superior (igual center bottom ) Neste caso, ambas as coordenadas x e y precisam ser passadas.
Quando quiser cortar uma imagem, mas manter uma determinada área da imagem à vista, você pode usar o recurso de abreviação f(ocal) . Para definir esta área focal de uma imagem, adicionamos uma interface de seleção de ponto focal a várias visualizações da estrutura de mídia Wordpress.
Ao clicar em uma miniatura da visualização em grade da Biblioteca de mídia do Wordpress, você verá o modal Attachment details . Esta será a visualização mais precisa para selecionar seu ponto focal: 
Ao definir ou substituir uma imagem em destaque em uma página ou postagem, você verá o modal Featured image . Nesta visualização você pode selecionar seu ponto focal na miniatura na parte superior da barra lateral direita: 
Ao fazer upload ou editar uma imagem no editor WYSIWYG ou metacampo em uma página ou postagem, você verá o modal Edit image . Nesta visualização você pode selecionar seu ponto focal na miniatura no canto superior esquerdo: 
Existem 3 maneiras de definir o ponto focal de uma imagem com a interface:
Ao usar uma dessas opções, uma pós-meta-chave chamada responsive_pics_focal_point será adicionada ou atualizada ao anexo com um valor de matriz contendo as coordenadas x e y como porcentagens:
[
' x ' => ' 86 ' ,
' y ' => ' 39 '
]Para usar esse valor em outro lugar do seu tema, você pode recuperá-lo chamando:
$ focal_point = get_post_meta ( $ attachment_id , ' responsive_pics_focal_point ' , true );ResponsivePics é feita, esta biblioteca adicionará a tarefa de redimensionar e/ou cortar imagem como um trabalho à fila de processos em segundo plano usando o Action Scheduler.A biblioteca de processamento em segundo plano Action Scheduler possui uma tela de administração integrada para monitorar, depurar e acionar manualmente trabalhos agendados de redimensionamento de imagem. A interface de administração é acessível através de:
Tools > Scheduled ActionsCada trabalho de redimensionamento será agrupado pelo ID da imagem wordpress
Quando você estiver usando o WP-Cron integrado, a fila de processos em segundo plano processará apenas quaisquer tarefas em cada carregamento de página.
Se você desabilitou WP-Cron em sua configuração e estiver usando seu próprio cron job em seu servidor, o Action Scheduler usará o intervalo definido nesse cron job para processar o próximo lote de jobs.
define ( ' DISABLE_WP_CRON ' , true ); Se você estiver usando Trellis como nós ❤️, o intervalo cron padrão é definido para cada 15 minutos.
Você pode substituir isso para, por exemplo, 1 minuto definindo a variável cron_interval (ou cron_interval_multisite para multisite) por site wordpress como */1 :
Por exemplo, trellis/group_vars/development/wordpress_sites.yml :
wordpress_sites :
example.com :
site_hosts :
- canonical : example.test
redirects :
- www.example.test
local_path : ../site # path targeting local Bedrock site directory (relative to Ansible root)
admin_email : [email protected]
multisite :
enabled : false
ssl :
enabled : false
provider : self-signed
cache :
enabled : false
cron_interval : ' */1 'Não se esqueça de provisionar novamente seu servidor após alterar esse valor.
Se ocorrer um erro durante o processo de redimensionamento ou se houver sintaxe inválida, ResponsivePics exibirá ou retornará um erro.
Erros de ResponsivePics - o ponto de interrupção xxs não está definido nem é um número
{
"code" : " responsive_pics_invalid " ,
"message" : " breakpoint xxs is neither defined nor a number " ,
"data" : {
"xs" : 0 ,
"sm" : 576 ,
"md" : 768 ,
"lg" : 992 ,
"xl" : 1200 ,
"xxl" : 1400
}
}As ações a seguir permitem que você se conecte à linha do tempo do processo de redimensionamento de imagens. Você pode colocá-los no arquivo functions.php do seu tema.
responsive_pics_request_scheduledEsta ação é acionada quando ResponsivePics agenda uma nova solicitação de redimensionamento de imagem para a fila ActionScheduler.
do_action ( ' responsive_pics_request_scheduled ' , ( int ) $ post_id , ( array ) $ resize_request ); $post_id
(inteiro) O ID do anexo
$resize_request
(array) Os parâmetros da solicitação de redimensionamento:
[
' id ' => ( int ) The attachment ID ,
' quality ' => ( int ) The requested image quality,
' width ' => ( int ) The requested image width,
' height ' => ( int ) The requested image height,
' crop ' => ( array ) The requested image crop positions,
' ratio ' => ( float ) The requested image ratio,
' path ' => ( string ) The requested image file path,
' rest_route ' => ( string ) The requested rest api route
]responsive_pics_request_processedEsta ação é acionada quando o ActionScheduler processa uma solicitação de redimensionamento de imagem na fila.
do_action ( ' responsive_pics_request_processed ' , ( int ) $ post_id , ( int ) $ quality , ( int ) $ width , ( int ) $ height , ( array ) $ crop , ( float ) $ ratio , ( string ) $ resize_path , ( string ) $ rest_route ); $post_id
(int) O ID do anexo
$qualidade
(int) A qualidade de imagem solicitada
$largura
(int) A largura da imagem solicitada
$altura
(int) A altura da imagem solicitada
$colheita
(matriz) As posições de corte de imagem solicitadas em porcentagens:
[
' x ' => ( int ) The horizontal crop position as percentage,
' y ' => ( int ) The vertical crop position as percentage
] proporção de $
(float) A proporção da imagem solicitada
$resize_path
(string) O caminho do arquivo de imagem solicitado
responsive_pics_file_saved_localEsta ação é acionada quando ResponsivePics salva localmente um arquivo de imagem redimensionado.
do_action ( ' responsive_pics_file_saved_local ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) O ID do anexo
$arquivo
(array) O arquivo salvo contendo:
[
' path ' => ( string ) The saved image filepath,
' file ' => ( string ) The saved image filename,
' width ' => ( int ) The saved image file width,
' height ' => ( int ) The saved image file height,
' mime-type ' => ( string ) The saved image file mime-type,
' filesize ' => ( int ) The saved image filesize
]responsive_pics_file_s3_uploadedEsta ação é acionada quando o WP Offload Media carrega o arquivo de imagem redimensionado para o armazenamento S3.
do_action ( ' responsive_pics_file_s3_uploaded ' , ( int ) $ post_id , ( array ) $ file ); $post_id
(int) O ID do anexo
$arquivo
(array) O arquivo carregado pelo S3 contendo:
[
' path ' => ( string ) The uploaded image filepath,
' file ' => ( string ) The uploaded image filename,
' width ' => ( int ) The uploaded image file width,
' height ' => ( int ) The uploaded image file height,
' mime-type ' => ( string ) The uploaded image file mime-type,
' filesize ' => ( int ) The uploaded image filesize
]responsive_pics_file_deleted_localEsta ação é acionada quando ResponsivePics exclui com êxito um arquivo de imagem redimensionado localmente.
do_action ( ' responsive_pics_file_deleted_local ' , ( int ) $ post_id , ( string ) $ file ); $post_id
(int) O ID do anexo
$arquivo
(string) O caminho do arquivo de imagem excluído
responsive_pics_file_s3_deletedEsta ação é acionada quando o WP Offload Media exclui um arquivo de imagem redimensionado em seu armazenamento S3.
do_action ( ' responsive_pics_file_s3_deleted ' , ( int ) $ post_id , ( array ) $ file_paths ); $post_id
(int) O ID do anexo
$file_paths
(array) Os caminhos de arquivo redimensionados excluídos em seu armazenamento S3.
Quando você instalou e ativou o plugin WP Offload Media (Lite), esta biblioteca automaticamente:
OBSERVAÇÃO
Quando a opção Remover arquivos do servidor estiver ativada nas configurações do Offload Media Lite , este plugin NÃO removerá nenhuma imagem redimensionada/cortada gerada por este plugin!
Ao ativar a opção lazyload nas funções get_picture ou get_image ou nos endpoints da API com um valor booleano true , esta biblioteca automaticamente:
lazyload ao elemento <img> .srcset pelo atributo data-srcset na imagem <source> ou nos elementos <img> .Isso permitirá que você use um plugin de carregamento lento, como Lazysizes.
Você também pode definir sua própria classe de carregamento lento, passando-a para a biblioteca ResponsivePics no arquivo functions.php do seu tema:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLazyLoadClass ( ' lazy ' );
}Para instalar Lazysizes em seu tema wordpress como um módulo de nó, execute o seguinte comando no diretório de seu tema:
npm install --save lazysizes
yarn add lazysizes
E importe o pacote no arquivo javascript global do seu tema:
import 'lazysizes' ; Ao ativar lazyload com um valor de string native , esta biblioteca automaticamente:
loading="lazy" ao elemento <img> . Ao ativar a opção lqip na função get_image ou no endpoint da API /responsive-pics/v1/image , esta biblioteca automaticamente:
blur-up ao elemento <img> .src substituto no elemento <img> com uma imagem de espaço reservado de baixa qualidade com largura padrão de 100px.Isso permitirá que você estilize sua imagem de espaço reservado antes que a imagem real de alta qualidade seja carregada.
Você também pode definir sua própria classe lqip passando-a para a biblioteca ResponsivePics no arquivo functions.php do seu tema:
if ( class_exists ( ' ResponsivePics ' )) {
ResponsivePics:: setLqipClass ( ' blurred ' );
} Ao ativar a opção intrinsic na função get_picture ou no endpoint da API /responsive-pics/v1/picture , esta biblioteca automaticamente:
<picture> e uma classe intrinsic__item ao elemento picture <img> .data-aspectratio nos elementos <source> e <img> da imagem com a proporção calculada da imagem de origem.Isso permitirá que você ocupe previamente o espaço necessário para uma imagem calculando a altura da largura da imagem ou a largura da altura com um plugin intrínseco, como a extensão de proporção de aspecto preguiçoso.
Para usar a extensão Lazysizes Aspectratio em seu tema WordPress, primeiro instale Lazysizes como um módulo de nó conforme descrito na seção Lazyloading e importe a extensão no arquivo javascript global do seu tema:
import 'lazysizes/plugins/aspectratio/ls.aspectratio.js' ; Envie quaisquer problemas que você tiver com a biblioteca ResponsivePics no Github.
ResponsivePics é desenvolvido e mantido por:
@monokai (criador)
@twansparant (criador)
Código e documentação copyright 2017-2023 da Clarify.
Código lançado sob a licença MIT.
Documentos lançados sob Creative Commons.
