Categorized Image Section

Seção de imagens categorizadas

Log in or Sign up to ensure access to purchased code across multiple devices.

Como ver o código

1. Faça login/crie uma conta primeiro. Isso é para garantir que todas as compras estejam conectadas a uma conta e possam ser visualizadas em diferentes dispositivos.

2. Adquira o código através da “caixa de compras” na página específica do código desejado.

3. Após a compra, atualize a página.

 Compatibilidade : Compatível com todos os temas do Shopify.

As imagens são muito importantes em um site. Apresentar as imagens de forma correta e única também é fundamental para causar uma boa impressão aos clientes.

Você pode categorizar suas imagens como quiser.

Você pode verificar a loja de demonstração aqui . Senha: made4uo

Criei diversas galerias de imagens que você pode gostar, veja a seguir:

O que você está comprando:

  • Mostrar/ocultar botão anterior e próximo
  • Ajuste como a imagem se ajusta ao contêiner usando a posição do objeto.
  • Faça upload de várias imagens (isso pode afetar o tempo de carregamento)
  • Aplique filtros de imagem a cada imagem, como brilho, contraste, escala de cinza, inverter, opacidade, saturar, sépia e nenhum
  • As imagens são apresentadas em um quadrado, mas podem ser visualizadas em um modal
  • Atribuir uma única imagem a uma categoria
  • Não há limite no número de imagens

O que torna nosso código melhor:

  • Não usamos bibliotecas externas, com isso dito, nosso código não terá nenhum efeito mínimo no desempenho de velocidade do seu site
  • Não deixamos nem adicionamos códigos para anunciar em nosso site
  • Nosso código é compatível com dispositivos móveis

Quaisquer problemas relacionados ao código serão corrigidos sem custo adicional, excluindo solicitações de customização de código. Basta entrar em contato conosco em "Converse conosco". Estamos a apenas um botão de distância.

Para iniciar:

1. Acesse Loja Admin Shopify > Temas > Ações > Editar código.

2. Na pasta Seção, crie uma nova seção. Você pode nomear o que quiser.

3. Substitua o código padrão pelo código abaixo. Certifique-se de SALVAR.

 <estilo> _
 . categoria -- hover - inner svg {
 largura : 30px ;
 }
 . categoria --contêiner { 
largura : 100 %;
 min - altura : 60vh ;
 posição : relativa ;
 transição : todos os 0,5s de facilidade ;
 margem : 0 automático ;
 }
 . categoria -- imagem - contêiner {
 exibição : flexível ;
 largura : 100 %; 
altura : conteúdo máximo ;
 posição : relativa ;
 flex - wrap : wrap ;
 }
 . categoria -- texto - contêiner {
 exibição : flexível ;
 altura : conteúdo máximo ;
 largura : 100 %; 
alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 flex - wrap : wrap ;
 margem inferior : 1rem ;
 lacuna : 0,5rem ;
 }
 . categoria -- texto - rótulo do contêiner {
 cursor : ponteiro ; 
borda : 1px sólido #e5e5e5;
 cor : #000000;
 margem : 2px 4px ;
 preenchimento : 6px 18px ;
 transformação de texto : capitalizar ;
 raio da borda : 0 ;
 -webkit - borda - raio : 0 ; 
-o - border - raio : 0 ;
 -moz - border - raio : 0 ;
 box - shadow : 2px 2px 4px rgb ( 0 0 0 / 9 % ) ; 
-moz - box - shadow : 2px 2px 4px rgba ( 0 , 0 , 0 , 0,09 ) ; 
-webkit - box - shadow : 2px 2px 4px rgb ( 0 0 0 / 9 % ) ;
 }
 . categoria -- texto - entrada do contêiner {
 Mostrar nenhum ;
 } 
. categoria - entrada do contêiner de texto : verificado + rótulo ,
 . categoria - texto - rótulo do contêiner : hover {
 plano de fundo : #000000;
 borda - cor : #000000;
 cor : #fff;
 } 
. categoria -- imagem - wrapper {
 largura : calc ( 100 % / var ( -num - colunas - desktop ) ) ;
 altura : automático ;
 proporção de aspecto : 1 ;
 estouro : oculto ; 
transição : todos os 0,5s diminuem 0s ;
 -webkit - transição : todos os 0,5s eliminam 0s ;
 -o - transição : todos os 0,5s eliminam 0s ;
 -ms - transição : todos os 0,5s eliminam 0s ;
 posição : relativa ;
 } 
. categoria -- imagem {
 largura : 100 %;
 altura : automático ;
 proporção de aspecto : 1 ;
 ajuste ao objeto : capa ;
 filtro : var ( -categoria - imagem - filtro ) ; 
histórico : #ececec;
 posição : absoluta ;
 superior : 50 %;
 esquerda : 50 %;
 transformar : traduzir ( -50 % , -50 % ) ;
 margem : 0,5rem ; 
transição : todos os 0,5s diminuem 0s ;
 -webkit - transição : todos os 0,5s eliminam 0s ;
 -o - transição : todos os 0,5s eliminam 0s ;
 -ms - transição : todos os 0,5s eliminam 0s ;
 } 
. categoria -- mostrar - contêiner {
 posição : fixa ;
 largura : 100 %;
 altura : 100 %;
 topo : 0 ;
 esquerda : 0 ;
 índice z : 10 ; 
plano de fundo : rgba ( 0 , 0 , 0 , 0,8 ) ;
 }
 . categoria - wrapper de imagem. categoria -- passar o mouse { 
plano de fundo : rgba ( 0 , 0 , 0 , 0.2 ) nenhum repetir rolagem 0 0 ;
 inferior : 0 ;
 esquerda : 0 ;
 margem : 0 ; 
opacidade : 0 ;
 -khtml - opacidade : 0 ;
 - webkit - opacidade : 0 ;
 - moz - opacidade : 0 ;
 posição : absoluta ;
 inserção : 0 ; 
exibição : flexível ;
 alinhamento de texto : centro ;
 transição : todos os 0,5s diminuem 0s ;
 -webkit - transição : todos os 0,5s eliminam 0s ;
 -o - transição : todos os 0,5s eliminam 0s ; 
-ms - transição : todos os 0,5s eliminam 0s ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . categoria - wrapper de imagem : hover. categoria -- passar o mouse {
 opacidade : 1 ; 
-khtml - opacidade : 1 ;
 - webkit - opacidade : 1 ;
 - moz - opacidade : 1 ;
 }
 . categoria - wrapper de imagem. categoria -- pairar - interno { 
largura : 50px ;
 altura : 50px ;
 plano de fundo : var ( -seção - cor ) ;
 cor : #fff;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 cursor : ponteiro ;
 } 
. categoria - wrapper de imagem. categoria --hover - inner : hover {
 plano de fundo : #fff;
 cor : #000;
 }
 . categoria - show - container. categoria -- imagem - show - wrapper { 
largura : 100 %;
 altura : 100 %;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 }
 . categoria -- mostrar - imagem {
 largura : automático ; 
altura : 90 %;
 ajuste ao objeto : capa ;
 filtro : var ( -categoria - imagem - filtro ) ;
 histórico : #ececec;
 }
 . categoria -- mostrar - botões - contêiner {
 posição : absoluta ; 
inferior : 2rem ;
 largura : 100 %;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 lacuna : 1rem ;
 }
 . categoria --show - botões - container botão : não ( : desativado ) : hover { 
plano de fundo : #fff;
 cor : #000;
 }
 . categoria -- erro {
 exibição : flexível ;
 largura : 100 %;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 altura : 20vh ;
 } 
. ocultar - categoria - imagem {
 largura : conteúdo máximo ! importante ;
 altura : conteúdo máximo ! importante ;
 }
 . ocultar - categoria - imagem img {
 largura : 0 ! importante ; 
altura : 0 ! importante ;
 estouro : oculto ;
 opacidade : 0 ;
 preenchimento : 0 ! importante ;
 visibilidade : oculta ;
 }
 . ocultar - contêiner {
 Mostrar nenhum ! importante ;
 } 
Tela @media somente e ( largura máxima : 950px ) {
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . categoria - contêiner. categoria -- imagem - wrapper { 
largura : calc ( 100 % / var ( -num - colunas - tablet ) ) ;
 }
 . categoria - contêiner. categoria -- mostrar - imagem {
 largura : 80 %;
 altura : automático ; 
altura máxima : 80vh ;
 }
 }
 Tela @media somente e ( largura máxima : 481px ) {
 . categoria - contêiner. categoria -- imagem - wrapper { 
largura : calc ( 100 % / var ( -num - colunas - móvel ) ) ;
 }
 }
 </ estilo >
 < div
 class = "categoria--container"
 estilo = " 
--section-color: {{ section.settings.section_color }} ;
 --num-columns-desktop: {{ section.settings.columns_desktop }} ;
 --num-columns-tablet: {{ section.settings.columns_tablet }} ; --num-columns-mobile: {{ section.settings.columns_mobile }} ;
 preenchimento superior: {{ section.settings.padding_top | append: " px " }} ; preenchimento inferior: {{ section.settings.padding_bottom | append: " px " }} ;
 largura máxima: {{ section.settings.page_width | append: " px " }} ;
 "
 >
 < categoria - imagem > 
{ % atribuir tamanho_imagem = '' % }

 { % para bloco na seção. blocos % }
 { % se bloco. tipo == 'imagem' % } 
{ % atribuir _index = forloop. índice | acrescentar : ',' % }
 { % atribuir tamanho_imagem = tamanho_imagem | acrescentar : _index % }
 { % fim se % } 
{ % fim para % }
 { % atribuir tamanho_da_imagem = tamanho_da_imagem | dividir : ',' % }
 < div class = "categoria--text-container" > 
{ % para bloco na seção. blocos % }
 { % bloco de casos . tipo % }
 { % quando 'categoria' % }
 < entrada
 tipo = "rádio" 
nome = "entrada de categoria"
 id = " {{ section.id }} - {{ forloop.index }} "
 valor = " {{ block.settings.title | handleize }} "
 { % se forloop. primeiro % }
 verificado
 { % fim se % }
 > 
< dados do rótulo - categoria = " {{ block.settings.title }} " for = " {{ section.id }} - {{ forloop.index }} " >
 { { bloquear. configurações . título | escapar } }
 </ rótulo > 
{ % final % }
 { % fim para % }
 </div> _ _
 < div
 class = "categoria--image-container" 
style = " {% unless section.settings.image_filter == 'none' %} --category-image-filter: {{ section.settings.image_filter}} ( {{ section.settings.filter_value | append: '%' }} ) {% endunless %} "
 >
 { % para bloco na seção. blocos % }
 { % bloco de casos . tipo % } 
{ % quando 'imagem' % }
 < div
 class = "categoria--image-wrapper"
 dados - imagem = " {{ block.settings.assigned_category | handleize }} "
 > 
{ % se bloco. configurações . imagem ! = em branco % }
 { {
 bloquear. configurações . imagem
 | URL_da_imagem : largura : 1500
 | imagem_tag :
 carregando : 'preguiçoso' , 
largura : bloco. configurações . imagem . largura ,
 altura : bloco. configurações . imagem . altura ,
 class : 'categoria--imagem' ,
 tamanhos : '30vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' , 
alt : bloquear. configurações . imagem . alternativo
 | escapar
 } }
 { % fim se % }
 < div class = "categoria--hover" >
 < div 
class = "categoria--hover-inner"
 dados - botão = " {{ block.settings.assigned_category | handleize }} "
 dados - categoria - botão - índice = " {% increment imageIndex %} "
 >
 < svg
 xmlns = "http://www.w3.org/2000/svg" 
aria - oculto = "verdadeiro"
 focalizável = "falso"
 role = "apresentação"
 class = "ícone ícone-mais"
 preencher = "nenhum"
 viewBox = "0 0 10 10"
 > 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M1 4.51a.5.5 0 000 1h3.5l.01 3.5a.5.5 0 001-.01V5.5l3.5-.01a.5.5 0 00-.01-1H5.5L5.49.99a.5.5 0 00-1 .01v3.5l-3.5.01H1z" fill = "currentColor" >
 </svg> _
 </div> _ _ 
</div> _ _
 </div> _ _
 { % final % }
 { % fim para % }
 < div class = "category--error hide-container" ></ div > 
</div> _ _
 < div class = "category--show-container hide-container" dados - imagem - comprimento = " {{ image_size_length.size }} " >
 { % para bloco na seção. blocos % } 
{ % se bloco. tipo == 'imagem' % }
 < div class = "categoria--image-show-wrapper"
 { % se seção. configurações . filter_show_image == verdadeiro % } 
style = " {% unless section.settings.image_filter == 'none' %} --category-image-filter: {{ section.settings.image_filter}} ( {{ section.settings.filter_value | append: '%' }} ); {% endunless %} "
 { % fim se % }
 dados - show = " {{ block.settings.assigned_category | handleize }} " 
dados - categoria - imagem - índice = " {% increment forloopIndex %} " > 
{ % capture image_link % } { % if block. configurações . image_link != blank % } < a href = " {{ block.settings.image_link }} " target = "_blank" > { % else % } < div > { % endif % } { % endcapture % } 
{ % capture end_image_link % } { % if block. configurações . image_link != blank % } </ a > { % else % } </ div > { % endif % } { % endcapture % } 
{ { link_da_imagem } }
 { % se bloco. configurações . imagem ! = em branco % }
 { {
 bloquear. configurações . imagem
 | URL_da_imagem : largura : 1500 
| imagem_tag :
 carregando : 'preguiçoso' ,
 largura : bloco. configurações . imagem . largura ,
 altura : bloco. configurações . imagem . altura ,
 classe : 'categoria--mostrar-imagem' , 
tamanhos : '30vw' ,
 larguras : '375, 550, 750, 1100, 1500, 1780, 2000, 3000, 3840' ,
 alt : bloquear. configurações . imagem . alternativo
 | escapar
 } }
 { % fim se % } 
{ { end_image_link } }
 </div> _ _
 { % fim se % }
 { % fim para % }
 < div class = "category--show-buttons-container" > 
< nome do botão = "anterior" > { { seção. configurações . prev_label } } </ botão > 
< nome do botão = "próximo" > { { seção. configurações . next_label } } </ botão > 
< nome do botão = "fechar" > { { seção. configurações . close_label } } </ botão >
 </div> _ _
 </div> _ _
 </ categoria - imagem > 
</div> _ _
 { % esquema % }
 {
 "name" : "Imagem categorizada" ,
 "configurações" : [
 {
 "tipo" : "cor" ,
 "id" : "seção_cor" , 
"label" : "Cor do tema da seção" ,
 "padrão" : "#42ab9e"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "largura_página" ,
 "min" : 1000 , 
"máximo" : 2000 ,
 "passo" : 100 ,
 "unidade" : "px" ,
 "label" : "Largura da página" ,
 "padrão" : 1200
 } ,
 { 
"tipo" : "cabeçalho" ,
 "content" : "Botões de navegação"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "prev_label" ,
 "label" : "Etiqueta do botão anterior" , 
"padrão" : "ANTER"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "next_label" ,
 "label" : "Etiqueta do próximo botão" ,
 "padrão" : "PRÓXIMO"
 } , 
{
 "tipo" : "texto" ,
 "id" : "close_label" ,
 "label" : "Etiqueta do botão Fechar" ,
 "padrão" : "FECHAR"
 } ,
 {
 "tipo" : "cabeçalho" , 
"content" : "Capacidade de resposta do dispositivo"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "colunas_desktop" ,
 "min" : 0 ,
 "máximo" : 10 , 
" passo 1 ,
 "label" : "Número de colunas na área de trabalho" ,
 "padrão" : 5
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "colunas_tablet" , 
"min" : 0 ,
 "máximo" : 10 ,
 " passo 1 ,
 "label" : "Número de colunas no tablet" ,
 "padrão" : 3
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "colunas_mobile" ,
 "min" : 0 ,
 "máximo" : 10 ,
 " passo 1 , 
"label" : "Número de colunas no celular" ,
 "padrão" : 2
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Preenchimento do contêiner"
 } ,
 { 
"tipo" : "intervalo" ,
 "id" : "padding_top" ,
 "min" : 0 ,
 "máximo" : 100 ,
 " passo 1 ,
 "unidade" : "px" , 
"label" : "Preenchimento superior" ,
 "padrão" : 0
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "padding_bottom" ,
 "min" : 0 , 
"máximo" : 100 ,
 " passo 1 ,
 "unidade" : "px" ,
 "label" : "Preenchimento inferior" ,
 "padrão" : 0
 } ,
 { 
"tipo" : "cabeçalho" ,
 "content" : "Configurações de filtro de imagem"
 } ,
 {
 "tipo" : "selecionar" ,
 "id" : "filtro_imagem" ,
 "opções" : [
 { 
"valor" : "brilho" ,
 "rótulo" : "Brilho"
 } ,
 {
 "valor" : "contraste" ,
 "rótulo" : "Contraste"
 } ,
 { 
"valor" : "escala de cinza" ,
 "label" : "Escala de cinza"
 } ,
 {
 "valor" : "inverter" ,
 "rótulo" : "Inverter"
 } ,
 { 
"valor" : "opacidade" ,
 "rótulo" : "Opacidade"
 } ,
 {
 "valor" : "saturar" ,
 "label" : "Saturar"
 } ,
 { 
"valor" : "sépia" ,
 "rótulo" : "Sépia"
 } ,
 {
 "valor" : "nenhum" ,
 "rótulo" : "Nenhum"
 }
 ] , 
"padrão" : "nenhum" ,
 "label" : "Filtro de imagem" ,
 "info" : "Escolha o filtro e atribua o valor nas configurações abaixo"
 } ,
 {
 "tipo" : "intervalo" ,
 "id" : "filtro_valor" , 
"min" : 0 ,
 "máximo" : 100 ,
 "unidade" : " %" ,
 " passo 1 ,
 "label" : "Valor do filtro" ,
 "padrão" : 0 
} ,
 {
 "tipo" : "caixa de seleção" ,
 "id" : "filter_show_image" ,
 "label" : "Filtre também a imagem do show" ,
 "padrão" : falso
 }
 ] , 
"blocos" : [
 {
 "nome" : "Categoria" ,
 "tipo" : "categoria" ,
 "configurações" : [
 {
 "tipo" : "texto" , 
"id" : "título" ,
 "rótulo" : "Categoria" ,
 "default" : "Mostrar tudo" ,
 "info" : "Inclua Mostrar tudo se quiser mostrar todas as imagens"
 }
 ]
 } ,
 { 
"nome" : "Imagem" ,
 "tipo" : "imagem" ,
 "configurações" : [
 {
 "type" : "image_picker" ,
 "id" : "imagem" , 
"rótulo" : "Imagem" ,
 "info" : "Você também pode alterar a visualização focal clicando no botão editar na imagem"
 } ,
 {
 "tipo" : "texto" ,
 "id" : "categoria_atribuída" , 
"label" : "Categoria atribuída" ,
 "info" : "Copie exatamente o que você tem na categoria"
 } ,
 {
 "tipo" : "url" ,
 "id" : "image_link" ,
 "label" : "Link da imagem" , 
"info" : "Deixe em branco para que a imagem não seja clicável;e"
 }
 ]
 }
 ] ,
 "predefinições" : [
 {
 "name" : "Imagem categorizada" ,
 "blocos" : [
 { 
"tipo" : "categoria"
 }
 ]
 }
 ]
 }
 { % termina o esquema % }

4. Adicione o código javascript na parte inferior de seu global.js ou theme.js na pasta Asset.

 class CategoriaImagem estende HTMLElement {
 construtor ( ) {
 super ( ) ; 
esse . categorias = isto . querySelector ( ".category--text-container" ) ; 
esse . categorias . addEventListener ( "alterar" , this . inputFunction . bind ( this ) ) ; 
esse . showContainer = isto . querySelector ( ".category--show-container" ) ;
 esse . show_buttons = isto . querySelectorAll ( ".category--hover-inner" ) ; 
esse . nav_buttons = isto . querySelectorAll (
 ".category--show-buttons-container > botão"
 ) ;
 esse . próximoBtn = isto . querySelector ( 'botão[nome="próximo"]' ) ; 
esse . prevtBtn = isto . querySelector ( 'botão[nome="anterior"]' ) ;
 esse . botões_nav . forEach ( ( btn ) => 
btn. addEventListener ( " clique " , isto.navegar.ligar ( este ) )
 ) ;
 esse . show_buttons . forEach ( ( btn ) => 
btn. addEventListener ( " clique " , isto.showContainerFx.bind ( este ) )
 ) ;
 }
 mostrarContainerFx ( e ) { 
índice const = e. atualTarget . conjunto de dados . categoriaButtonIndex ;
 índice == 0
 ? ( isto . prevtBtn . desativado = verdadeiro ) 
: ( este.prevtBtn.desativado = falso ) ; _ _
 esse . showContainer . lista de classes . remover ( "ocultar-contêiner" ) ;
 esse . showIndexedImage ( índice ) ; 
}
 navegar ( e ) {
 deixe activeIndex =
 esse . querySelector ( ".active-show" ) . conjunto de dados . categoriaImageIndex * 1 ; 
const totalIndex = isto . showContainer . conjunto de dados . comprimento da imagem - 1 ;
 switch ( por exemplo, currentTarget . nome ) {
 caso "próximo" : 
if ( índice ativo < índice total ) {
 ativoIndex ++;
 esse . prevtBtn . desativado = falso ;
 }
 if ( índice ativo == índice total ) { 
esse . próximoBtn . desativado = verdadeiro ;
 }
 quebrar ;
 caso "anterior" :
 if ( índice ativo > 0 ) {
 índice ativo --; 
esse . próximoBtn . desativado = falso ;
 }
 if ( índice ativo == 0 ) {
 esse . prevtBtn . desativado = verdadeiro ;
 }
 quebrar ; 
caso encerrado" :
 esse . showContainer . lista de classes . add ( "ocultar-contêiner" ) ;
 quebrar ;
 }
 esse . showIndexedImage ( activeIndex ) ;
 } 
mostrarIndexedImage ( índice ) {
 esse . showContainer
 . querySelectorAll ( “.category--image-show-wrapper” )
 . forEach ( ( box ) => box.classList.add ( "ocultar-categoria-imagem " ) ) ; 
esse . showContainer
 . querySelectorAll ( “.category--image-show-wrapper” )
 . forEach ( ( box ) => box.classList.remove ( "active-show " ) ) ;
 esse . showContainer 
. querySelector ( ` [ dados - categoria - imagem - índice = "${index}" ] ` )
 . lista de classes . remover ( "ocultar-categoria-imagem" ) ;
 esse . showContainer 
. querySelector ( ` [ dados - categoria - imagem - índice = "${index}" ] ` )
 . lista de classes . add ( "show ativo" ) ;
 }
 funçãoentrada ( e ) { 
esse . opções = Matriz. from ( por exemplo, currentTarget . querySelectorAll ( "input" ) ) . encontrar (
 ( rádio ) => rádio. verificado
 ) . valor ; 
if ( isto.opções == " mostrar tudo" ) {
 esse . querySelectorAll ( ".category--image-wrapper" ) . forEach ( ( imagem ) => 
imagem. lista de classes . remover ( "ocultar-categoria-imagem" )
 ) ;
 } outro {
 esse . renderImages ( este.opções ) ; _
 }
 }
 renderizarImagens ( categoria ) { 
esse . querySelectorAll ( ".category--image-wrapper" ) . forEach ( ( imagem ) =>
 imagem. lista de classes . add ( "ocultar-categoria-imagem" )
 ) ; 
esse . querySelectorAll ( ` [ data - image = "${category}" ] ` ) . forEach ( ( imagem ) =>
 imagem. lista de classes . remover ( "ocultar-categoria-imagem" )
 ) ; 
const arrayComprimento = Array. de (
 esse . querySelectorAll ( ` [ dados - imagem = "${categoria}" ] ` )
 ) . comprimento ;
 if ( comprimento da matriz <= 0 ) { 
esse . querySelector ( ".category--error" ) . lista de classes . remover ( "ocultar-contêiner" ) ;
 esse . querySelector ( ".category--error" ) . HTML interno =
 "<h2>Nenhuma imagem correspondente</h2>" ; 
} outro {
 esse . querySelector ( ".category--error" ) . lista de classes . add ( "ocultar-contêiner" ) ; 
esse . querySelector ( ".category--error" ) . innerHTML = "" ;
 }
 }
 }
 elementos personalizados. define ( "categoria-imagem" , CategoriaImagem ) ;

5. Adicione a seção chamada Imagem Categorizada em seu Editor de Tema. Clique nos três pontos e personalize seu tema.

É isso (",)

Copied!
Voltar para o blogue

Deixe um comentário