Estou querendo colocar os meus full banner do mobile como gifs, porem nao estou conseguindo, mesmo usando o gerenciador de arrquivos, tem como deixar em formato de gif?
(os banner estão somente no mobile)
A LI não suporta gif no banner, tem que mudar com programação dia JS.
2 curtidas
Ola, descobri duas formas de fazer, tanto com Gif e com Video (que roda bem melhor).
Primeiramente você terá que enviar tanto o teu GIF quanto o teu Video pra uma plataforma. No meu caso, o gif era maior que 5mb e hospedei em um site de gifs, mas o problema é que ele fica lá por apenas 1 ano, ai tem que reenviar e atualizar o caminho dele no teu codigo JavaScript.
Pra hospedar o GIF: https://gifyu.com/
Pra hospedar o Video MP4: https://cloudinary.com/
Os dois são bem simples de usar, só fazer um login ou criar conta e clicar pra enviar o arquivo.
Pra fazer o GIF é bem simples, apenas inserir em JavaScript e ele já se ajeita automaticamente. Já no vídeo é mais complexo, precisei fazer um código CSS pra ajustar no mobile, pois não estava se ajustando, ou muitas vezes ele sumia.
Antes de tudo você terá que criar o banner na pagina de criação de banner da plataforma, importante você identificar um nome pra esse banner e depois salve esse nome em algum lugar porque você ira precisar desse nome depois no codigo. Sugiro colocar algo sem espaços e com hífen pra ficar melhor na hora de copiar e não copiar espaços em branco. Sugiro algo como: FULL-BANNER-GIF
GIF:
Vai em: PERSONALIZE SUA LOJA >> INCLUIR CODIGO HTML >> ADICIONAR CODIGO (Canto direiro em cima)
Nesse codigo você preenche assim:
Descrição: FULL BANNER GIF (esse é apenas pra voce saber do que se trata o codigo pra quando precisar alterar)
Local de Publicação: RODAPÉ
Página de Publicação: PAGINA INICIAL - HOME
Tipo: JAVASCRIPT
Conteúdo:
$(document).ready(function(){
$('.banners-full .slick-slide').each(function(index, elemento){
let slideAlt = $(elemento).find('img').attr('alt');
if(slideAlt && slideAlt.indexOf('NOME-EXATO-DO-SEU-BANNER') !== -1){
$(elemento).find('img').attr('src', 'https://LINK-EXATO-DO-SEU-BANNER.gif');
}
});
});
Perceba que eu deixei especificado o local que precisa fazer a troca, ‘NOME-EXATO-DO-SEU-BANNER’, aqui você irá alterar somente as palavras, qualquer aspas, parenteses ou pontos devem ser mantidos. Ou seja, se você salvou com o nome que eu sugeri, ele ficará assim nessa parte do codigo: …indexOf(‘FULL-BANNER-GIF’) !==…
A mesma coisa acontecerá no link ali onde está …‘src’, ‘https://LINK-EXATO-DO-SEU-BANNER.gif’);… Substitua somente o link mantendo as aspas inicial e final.
Outra coisa que precisa conferir, é como está o nome do container do Full banner no seu tema, isso significa que se ele não funcionar, você clica com o botão direito em inspecionar e envia um foto do codigo inteiro que aparece no inspecionar e o codigo que mencionei pro chat GPT corrigir o local correto, no meu caso está assim la no começo: … $(‘.banners-full .slick-slide’).each…
Agora se você quer fazer ele com MP4, o caminho é bem semelhante, apenas irá acrescentar um codigo de CSS.
MP4
Vai em: PERSONALIZE SUA LOJA >> INCLUIR CODIGO HTML >> ADICIONAR CODIGO (Canto direiro em cima)
Nesse codigo você preenche assim:
Descrição: FULL BANNER MP4 (esse é apenas pra voce saber do que se trata o codigo pra quando precisar alterar)
Local de Publicação: RODAPÉ
Página de Publicação: PAGINA INICIAL - HOME
Tipo: JAVASCRIPT
Conteúdo:
$(document).ready(function(){
$('.banners-full .slick-slide').each(function(index, elemento){
let slideAlt = $(elemento).find('img').attr('alt');
if(slideAlt && slideAlt.indexOf('NOME-EXATO-DO-SEU-BANNER') !== -1){
$(elemento).find('img').replaceWith(`
<div class="banner-video-container">
<video class="banner-video" autoplay muted loop playsinline>
<source src="https://LINK-EXATO-DO-SEU-VIDEO.mp4" type="video/mp4">
Seu navegador não suporta vídeos.
</video>
</div>
`);
}
});
});
Perceba que eu deixei especificado o local que precisa fazer a troca, ‘NOME-EXATO-DO-SEU-BANNER’, aqui você irá alterar somente as palavras, qualquer aspas, parenteses ou pontos devem ser mantidos. Ou seja, se você salvou com o nome que eu sugeri, ele ficará assim nessa parte do codigo: …indexOf(‘FULL-BANNER-GIF’) !==…
A mesma coisa acontecerá no link ali onde está …‘src’, “https://LINK-EXATO-DO-SEU-VIDEO.mp4”… Substitua somente o link mantendo as aspas inicial e final.
Outra coisa que precisa conferir, é como está o nome do container do Full banner no seu tema, isso significa que se ele não funcionar, você clica com o botão direito em inspecionar e envia um foto do codigo inteiro que aparece no inspecionar e o codigo que mencionei pro chat GPT corrigir o local correto, no meu caso está assim la no começo: … $(‘.banners-full .slick-slide’).each…
Pra acrescentar o codigo CSS
Vai em: PERSONALIZE SUA LOJA >> EDITAR CSS
Se ja tiver algum codigo nessa pagina, apenas dê alguns Enter pra ele iniciar o codigo bem abaixo e não atrapalhar os que ja contém, pois não podemos excluir nada do codigo anterior pra não danificar nada na tua loja.
Abaixo o codigo CSS:
.banner-video-container {
width: 100%;
overflow: hidden;
position: relative;
}
/* Para mobile: aplica aspect-ratio */
@media only screen and (max-width: 1180px) {
.banner-video-container {
aspect-ratio: 2.33 / 1;
}
}
/* Banner video ocupa tudo e corta excesso */
.banner-video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}
Aqui no CSS a principio não precisa mudar nada, apenas se a resolução não estiver correta no mobile, você ajusta em aspect-ratio: 2,33 / 1; Onde precisará colocar algum outro valor de proporção referente ao seu site se comporta no Mobile. É só jogar esse codigo no Chat GPT e pedir pra ele fazer o corte que melhor corresponde ao eu site.
Fiz tudo fuçando sozinho e com a ajuda do chat GPT.
No caso do CSS já está em 1080px que pode seeer ajustado e visualizado em tablet, pq se colocar apenas 768, ele sumia o Banner.
1 curtida