Como criar um Listing Template para a biblioteca de mídia WordPress
Criar consulta SQL personalizada
Vamos começar criando uma consulta personalizada seguindo WordPress Dashboard > JetEngine > Query Builder .
Adicione uma nova consulta pressionando o botão com nome semelhante.
Dê um nome à consulta e selecione “Consulta SQL/AI” Tipo de consulta .
Na seção Consulta SQL personalizada , selecione a opção “postmeta” no menu suspenso Da tabela e habilite o recurso Usar junção .
O tipo de junção deve ser definido como “Inner Join” com “posts” da tabela de junção .
As colunas da tabela “ID” e “meta_id” devem ser selecionadas, respectivamente, nos seguintes campos Quando a coluna da tabela atual e É igual a outros campos da coluna da tabela.
Depois disso, você deve adicionar duas cláusulas de consulta.
No primeiro, você precisa selecionar a coluna “postmeta.meta_key” para ser “Igual” ( campo Comparar ) ao valor “_wp_attached_file” .
Além disso, lembre-se de selecionar “Char” como Type .
Na segunda meta cláusula, você precisa adicionar o valor “anexo” como um tipo de postagem para obter as postagens, que são as imagens no nosso caso.
Portanto, a coluna deve ser definida como “posts.post_type”, o operador Compare como “Equal” e Type como “Char”.
A consulta personalizada foi concluída. Agora criaremos um Listing Template para esta consulta SQL.
Criar modelo de listagem para consulta personalizada
Vá para Painel do WordPress> JetEngine> Listagens .
Clique no botão “ Adicionar novo ” e escolha “Query Builder” como fonte de listagem . Em seguida, escolha a consulta personalizada que acabou de ser criada.
Preencha o campo Nome do item da listagem e escolha a visualização da listagem desejada .
Empurre “ Criar item de listagem ”.
No editor, adicione um widget Campo Dinâmico à página.
Em primeiro lugar, produza a imagem da própria Biblioteca de Mídia. Para fazer isso, selecione “Post/Term/User/Object Data” como Fonte e “meta_value” como Campo de Objeto .
A coluna “meta_value” armazena o URL do arquivo de mídia como um valor. Portanto, precisamos customizar a saída do campo para transformar a URL da imagem na própria imagem. A tag HTML <img> pode ajudar com isso.
Verifique um formato de campo recomendado:
<img src=”https://seu-domínio.com/wp-content/uploads/%s”>.
Como pode ver, a imagem já está exibida no editor.
Vamos criar um botão que possa baixar a imagem clicando no botão.
Adicione outro widget de campo dinâmico e selecione “Post/Term/User/Object Data” como fonte e “meta_value” como campo de objeto .
Em seguida, adicione a seguinte saída do campo Personalizar para fazer o download da imagem em seu dispositivo:
“<a href=”%s” baixar>baixar</a>”.
Tornar a imagem para download
Vamos também adicionar outra opção para exibir e baixar a imagem usando apenas o widget Dynamic Field .
Na saída Personalizar campo , adicione o seguinte formato de campo:
<a href=”%1$s” download><img src=”https://seu-domínio.com/wp-content/uploads/%s”></a>
Dessa forma, uma imagem pode ser baixada clicando nela.
Verifique o resultado gerando a listagem da Biblioteca de Mídia com o widget Listing Grid .
Você só deve adicionar o Modelo de Listagem à Grade de Listagem sem aplicar a consulta personalizada, pois o Modelo de Listagem já é baseado na consulta personalizada.
Verifique a Listing Grid com as imagens da WordPress Media Libary no front end.
Além da imagem ser exibida, ela também pode ser baixada clicando no botão ou na própria imagem.
É isso; agora você sabe como criar um modelo de listagem JetEngine que exibirá os itens da biblioteca de mídia do WordPress no front end e os tornará disponíveis para download.