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 (",)