Como criar layouts de listagem personalizados usando componentes Twig e extramurais

Criando um modelo de listagem na visualização Madeira/Galho

Primeiro, procedemos para a guia JetEngine > JetEngine > Performance , habilitamos a alternância Timber/Twig Views , escolhemos e instalamos o plugin Timber e clicamos no botão “ Save tweaks config ”. Depois disso, a visualização Timber/Twig ficou disponível para listagens.

vista de madeira/galho de alto desempenho

Em seguida, fomos para a guia JetEngine> Listagens e clicamos no botão “ Adicionar novo ”.

Como origem da listagem , postagens, usuários, termos, relações , dados de páginas de opções , dados do Query Builder , campos repetidores , itens de tipo de conteúdo personalizado e itens de endpoint da API REST podem ser escolhidos.

Escolhemos a fonte da listagem “Postagens” e definimos um tipo de postagem personalizado no campo a seguir, mas uma listagem também pode ser criada para as postagens padrão do WordPress.

criando um modelo de listagem com a visualização Timber/Twig

Escolhendo o Layout Desejado para o Modelo de Listagem

Selecionamos um layout com efeito de foco do artigo com uma seleção de componentes.

” alt=”Layout de cartão postal do blog CSS3″ width=”1824″ height=”1100″ data-src=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3.webp” data-srcset=”https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3.webp 1824w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3-300×181.webp 300w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3-1024×618.webp 1024w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3-768×463.webp 768w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3-1536×926.webp 1536w, https://crocoblock.com/knowledge-base/wp-content/uploads/2023/11/Blog-Post-Card-Layout-CSS3-600×362.webp 600w” data-sizes=”(max-width: 1824px) 100vw, 1824px” />

Como o modelo de listagem define o layout de um item, removemos todos os elementos desnecessários, como banner de informações, componente wrapper e numeração, da área HTML e copiamos apenas o layout do primeiro cartão:

<div class="card-grid-space">
    <a class="card" href="https://codetheweb.blog/2017/10/06/html-syntax/" style="--bg-img: url(https://images1-focus-opensocial.googleusercontent.com/gadgets/proxy?container=focus&resize_w=1500&url=https://codetheweb.blog/assets/img/posts/html-syntax/cover.jpg)">
      <div>
        <h1>HTML Syntax</h1>
        <p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…</p>
        <div class="date">6 Oct 2017</div>
        <div class="tags">
          <div class="tag">HTML</div>
        </div>
      </div>
    </a>
  </div>

Na planilha CSS , removemos as regras ‘.info’ e ‘.cards-wrapper’, pois elas foram aplicadas aos elementos excluídos na planilha HTML . Além disso, eliminamos as regras ‘body’, ‘a’, ‘@media’ e ‘@import’ para fornecer isolamento de estilo, evitar conflitos de estilo e reduzir despesas desnecessárias que poderiam tornar o site lento.

Em seguida, substituímos as famílias de fontes ‘Heebo’ e ‘Open Sans’ por ‘Roboto’.

Colando HTML e CSS nas áreas correspondentes

Colamos os códigos na planilha HTML e CSS de acordo.

Apertamos o botão “ Recarregar visualização ” e obtivemos um resultado que continha dados estáticos que precisavam ser substituídos por dados dinâmicos do JetEngine .

listando o layout do modelo com dados estáticos

Na área HTML , substituímos espaços por tabulações para eliminar erros.

componentes externos nas áreas HTML e CSS

Na planilha CSS , inserimos a instrução ‘selector’ antes de cada seletor CSS para aplicar estilos CSS apenas à listagem atual, para que não impactassem todo o site.

selector .card:before, selector .card:after {

instrução do seletor antes de cada seletor CSS

Além disso, alteramos a ‘largura: 15em;’ estilo para ‘largura: 100%;’ para a regra ‘.card’ que define o estilo do contêiner semelhante a um cartão. Fizemos isso para evitar problemas durante o redimensionamento. Além disso, a ‘largura: 15em;’ o estilo pode ser simplesmente removido.

propriedade de largura para o contêiner semelhante a um cartão

Substituindo dados estáticos por dinâmicos

Primeiramente, precisávamos exibir a miniatura do post, então editamos um código:

<a class="card" href="{{ jet_engine_url(args={}) }}" style="--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})">

Excluímos a URL do atributo ‘href’, clicamos no botão “ Dados dinâmicos ” e selecionamos a opção “ URL dinâmica ”.

Escolhemos a opção “Link permanente” como fonte e pressionamos o botão “ Inserir ”. Dessa forma, inserimos a tag:

{{ jet_engine_url(args={}) }}

origem do URL dinâmico do link permanente

Em seguida, inserimos a tag ‘{{ jet_engine_url(args={source:’_thumbnail_url’}) }}’ na variável CSS ‘style=”–bg-img: url()”’ em vez do URL.

Conseguimos isso clicando no botão “ Dados dinâmicos ”, selecionando a opção “URL dinâmico” novamente, escolhendo o “URL em miniatura” como fonte e pressionando o botão “ Inserir ”.

origem do URL dinâmico do URL da miniatura

Eventualmente, obtivemos esse código para exibir a miniatura da postagem:

<a class="card" href="{{ jet_engine_url(args={}) }}" style="--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})">

código para exibir a miniatura da postagem dinamicamente

A seguir, editamos o código do título do post:

<h1>HTML Syntax</h1>

Como o elemento <h1> perturbaria a hierarquia semântica da página, nós o substituímos pelo elemento <div>.

Além disso, adicionamos o atributo ‘class’ com o valor ‘title’.

Em seguida, excluímos o texto ‘Sintaxe HTML’, clicamos no botão “ Dados dinâmicos ”, escolhemos a opção “ Postagem ”, selecionamos os dados “Título da postagem” e apertamos o botão “ Inserir ”.

Obtivemos esse espaço reservado:

<div class="title">{{ post.title }}</div>

Além disso, encontramos a linha ‘selector .card h1 {‘ na planilha CSS e substituímos ‘h1’ pela classe ‘.title’:

selector .card .title {

espaço reservado para inserir o título da postagem

Em seguida, substituímos o texto estático neste código:

<p>The syntax of a language is how it works. How to actually write it. Learn HTML syntax…</p>

Para isso, clicamos no botão “ Dados dinâmicos ”, escolhemos a opção “Post” e selecionamos os dados “Post Content”.

Em seguida, pressionamos o botão “ Adicionar o filtro ao resultado ”, escolhemos a opção “ Cortar texto por palavras ”, digitamos o “20” Número de palavras , definimos “…” no campo Mais string e clicamos no botão “ Inserir ” .

Recebemos este elemento:

<p>{{ post.content|excerpt('20','...') }}</p>

espaço reservado para inserir o conteúdo da postagem

Em seguida, editamos o código para a data da postagem:

<div class="date">6 Oct 2017</div>

Código HTML para exibir a data da postagem

Apertamos o botão “ Dados dinâmicos ”, escolhemos a opção “Publicar” e selecionamos os dados “Data de postagem”.

Em seguida, pressionamos o botão “ Adicionar o filtro ao resultado ”, escolhemos a opção “JetEngine Callback”, selecionamos o retorno de chamada “ Formatar data ” e pressionamos o botão “ Inserir ”.

A descrição de todos os retornos de chamada do JetEngine pode ser encontrada aqui .

Obtivemos esse elemento:

<div class="date">{{ post.post_date|jet_engine_callback(args={cb:'jet_engine_date'}) }}</div>

espaço reservado para inserir a data da postagem

Em seguida, substituímos o texto estático neste código pelo nome do termo da taxonomia personalizada atribuída ao CPT:

<div class="tag">HTML</div>

Apertamos o botão “ Dados dinâmicos ”, escolhemos a opção “Publicar” e selecionamos os dados “Termos de postagem”. Em seguida, pressionamos o botão “ Adicionar o filtro ao resultado ”, escolhemos a opção “JetEngine Callback”, selecionamos o retorno de chamada “ Obter nome do termo ”, pressionamos o botão “ Inserir ” e recebemos isto:

<div class="tag">{{ post.terms|jet_engine_callback(args={cb:'jet_get_term_name'}) }}</div>

espaço reservado para inserir os termos da postagem

Ao clicar no botão “ Recarregar visualização ”, vimos o resultado completo, exceto a imagem, pois os dados dinâmicos do JetEngine podem ser verificados apenas na página com o Listing Grid ou no front end.

listando o layout do modelo com dados dinâmicos

Eventualmente, obtemos esse código na área HTML :

view raw HTML.txt hosted with ❤ by GitHub

	<div class=”card-grid-space”>
	<a class=”card” href=”{{ jet_engine_url(args={}) }}” style=”–bg-img: url({{ jet_engine_url(args={source:’_thumbnail_url’}) }})”>
	<div>
	<div class=”title”>{{ post.title }}</div>
	<p>{{ post.content\|excerpt(’20’,’…’) }}</p>
	<div class=”date”>{{ post.post_date\|jet_engine_callback(args={cb:’jet_engine_date’}) }}</div>
	<div class=”tags”>
	<div class=”tag”>{{ post.terms\|jet_engine_callback(args={cb:’jet_get_term_name’}) }}</div>
	</div>
	</div>
	</a>
	</div>

view raw HTML.txt hosted with ❤ by GitHub

E esse código na área CSS :

view raw CSS.txt hosted with ❤ by GitHub

	:root {
	–color: #3c3163;
	–transition-time: 0.5s;
	}
	* {
	box-sizing: border-box;
	}
	selector .card {
	font-family: ‘Roboto’;
	–bg-filter-opacity: 0.5;
	background-image: linear-gradient(rgba(0,0,0,var(–bg-filter-opacity)),rgba(0,0,0,var(–bg-filter-opacity))), var(–bg-img);
	height: 20em;
	width: 100%;
	font-size: 1.5em;
	color: white;
	border-radius: 1em;
	padding: 1em;
	/margin: 2em;/
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 5em -1em black;
	transition: all, var(–transition-time);
	position: relative;
	overflow: hidden;
	border: 10px solid #ccc;
	text-decoration: none;
	}
	.card:hover {
	transform: rotate(0);
	}
	selector .card .title {
	margin: 0;
	font-size: 1.5em;
	line-height: 1.2em;
	}
	selector .card p {
	font-size: 0.75em;
	font-family: ‘Roboto’;
	margin-top: 0.5em;
	line-height: 2em;
	}
	selector .card .tags {
	display: flex;
	}
	selector .card .tags .tag {
	font-size: 0.75em;
	background: rgba(255,255,255,0.5);
	border-radius: 0.3rem;
	padding: 0 0.5em;
	margin-right: 0.5em;
	line-height: 1.5em;
	transition: all, var(–transition-time);
	}
	selector .card:hover .tags .tag {
	background: var(–color);
	color: white;
	}
	selector .card .date {
	position: absolute;
	top: 0;
	right: 0;
	font-size: 0.75em;
	padding: 1em;
	line-height: 1em;
	opacity: .8;
	}
	selector .card:before, selector .card:after {
	content: ”;
	transform: scale(0);
	transform-origin: top left;
	border-radius: 50%;
	position: absolute;
	left: -50%;
	top: -50%;
	z-index: -5;
	transition: all, var(–transition-time);
	transition-timing-function: ease-in-out;
	}
	selector .card:before {
	background: #ddd;
	width: 250%;
	height: 250%;
	}
	selector .card:after {
	background: white;
	width: 200%;
	height: 200%;
	}
	selector .card:hover {
	color: var(–color);
	}
	selector .card:hover:before, selector .card:hover:after {
	transform: scale(1);
	}
	selector .card-grid-space .num {
	font-size: 3em;
	margin-bottom: 1.2rem;
	margin-left: 1rem;
	}

view raw CSS.txt hosted with ❤ by GitHub

Observe os resultados na grade de listagem

Para exibir o modelo de listagem na grade de listagem, uma página deve ser criada nos editores de bloco WordPress, Elementor ou Bricks .

Fomos para o Painel do WordPress > Páginas > Adicionar nova guia, colocamos o bloco Listing Grid e selecionamos a listagem recentemente criada no menu suspenso.

Na Grade de Listagem , observamos o layout estático com os dados do post, como miniatura, título, conteúdo, data e termo.

modelo de listagem criado com visualização Timber/Twig

Apertamos o botão “ Publicar/Atualizar ” e abrimos a página no front end para verificar o efeito de foco.

modelo de listagem com efeito de foco criado com visualização Timber/Twig no front end