Criar Widget que fique imagem lado a lado

Item: Criar Widget que fique imagem lado a lado
Rating: 1

por EDU2010 25.08.17 13:42

Detalhes da questão

Endereço do fórum: http://criadoresdepassaros.com
Versão do fórum: phpBB3

Descrição

Quero criar um Widget para colocar no portal onde as imagens fiquem lado a lado como se fosse uma loja , da forma da imagem de exemplo

Widget - Criar Widget que fique imagem lado a lado Lojafo10

Widget - Criar Widget que fique imagem lado a lado Lojafo10

Ou seja um codigo onde eu possa adicionar a imagem , link que dirige a imagem e uma descrição da imagem em forma da imagem de exemplo e que eu possa criar varios em um só widget que usarei no portal naquele widget que fica acima como imagem de exemplo . Segue :

Widget - Criar Widget que fique imagem lado a lado Foto10

Widget - Criar Widget que fique imagem lado a lado Foto10

Obrigado

por Kyo Panda 25.08.17 14:15

Adicione a um novo Widget personalizado:

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> </div> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> </div> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> Texto<br /> Texto<br /> Texto </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

Fica a cargo do senhor ajustar as imagens e textos dentro do código. o/

por EDU2010 26.08.17 0:45

Tem como adicionar abaixo de cada imagem um botão de comprar e que eu possa neste botão apenas colocar o link que direcione a ele .

Até mais

por Shek 26.08.17 1:34

Substitua por:

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><span class="fa-shop-buy">COMPRAR</span></a> Texto<br /> Texto<br /> Texto </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

Substitua o jogo da velha pelo link do produto:

Código:: <a href="#">

Tópico movido de 'Questões sobre a aparência do fórum' para 'Questões sobre códigos'.

por EDU2010 26.08.17 1:47

O botão comprar teria que ser uma imagem

Widget - Criar Widget que fique imagem lado a lado Botao-10

por Shek 27.08.17 1:09

Bem... É melhor você especificar tudo o que este código terá para que façamos uma coisa de uma só vez. Terá o botão Comprar em forma de imagem... Mas, depois disso planeja algo mais?

por EDU2010 27.08.17 4:10

Não somente em forma de imagem que possa redirecionar para o link desejado .

obrigado

por Shek 27.08.17 12:10

Troca por este:

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br><img src='URL_DA_IMAGEM' style='max-width: 0px;' title='Comprar produto' /></a> Texto<br /> Texto<br /> Texto </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

Substitua o valor URL_DA_IMAGEM pela imagem desejada. Por precaução, coloquei um redimensionamento de imagem nesta imagem. Quando colocar a imagem, ela ser redimensionada. Para confirmar isso, é só mudar o valor numérico do max-width: para redimensionar o tamanho desejado.
Se não quiser o redimensionamento, é só remover todo o style='max-width:

por EDU2010 27.08.17 13:28

Bom dia , substituo o que foi pedido pela imagem e não resulta a imagem não aparece no quadro , veja o código ao qual estou usando , substitui os dois primeiros .

Além de não aparecer a imagem do comprar , desalinhou os quadro da forma que estava . Obrigado

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://i.servimg.com/u/f11/15/98/91/46/gaiola13.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img title="Comprar produto" style="max-width: 0px;" src="URL_DA_IMAGEM" /></a> Texto<br /> Texto<br /> Texto </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

por Shek 27.08.17 17:23

Você pode me mostrar uma imagem destes deslinhamentos que citou? Eu apliquei a imagem que você postou aqui no tópico, e simplesmente está alinhado tudo corretamente. Confira: http://shekforumeiros.forumeiros.com/h6-nome

por EDU2010 28.08.17 0:47

oi poderia me pasar este codigo que voc~e utilizou tentei mais uma vez e não deu certo ficou desta maneira conforme print ..

Widget - Criar Widget que fique imagem lado a lado Exempl10

Widget - Criar Widget que fique imagem lado a lado Exempl10

por Shek 28.08.17 2:46

Edu, está desta forma (desmontando) porque a imagem da gaiola é maior do que o quadro suporta. Me forneça o código que tens para que eu dê uma olhada, e tentar ver o que podemos fazer. Hm...

por EDU2010 28.08.17 3:34

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://i.servimg.com/u/f11/15/98/91/46/gaiola13.jpg" /> <br /><img src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img src="https://i2.wp.com/www.imm-tecnologia.com.br/wp-content/uploads/2016/04/botao-comprar.png" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /> <br /><img src="URL_DA_IMAGEM" style="max-width: 0px;" title="Comprar produto" /></a> Texto<br /> Texto<br /> Texto </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

por Shek 28.08.17 4:05

A minha solução era dar um max-width nas imagens, mas, elas já estão com esta propriedade. O detalhe é que a imagem https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg tem 1200px de largura e altura. Ou seja... Se todas as imagens tiverem essa mesma proporção de tamanho e largura, fará com que a tabela se encaixe corretamente. Se um dos quadros forem maior por causa do tamanho da imagem sem o max-widh, os quadros ficam desajustados.

Tenho duas recomendações:
- Você pode pedir imagens padronizadas (tamanhos padrão) no setor gráfico;
- Ou se achar melhor, podemos redimensionar todas as imagens para o mesmo tamanho, independente se ela for maior do que 1200px.

Se topar a segunda, é só substituir este código:

Código:: .fa-grid-widget-column img { max-width: 100%; }

Por este:

Código:: .fa-grid-widget-column img { max-width: 300px; max-height: 300px; }

OU:

Código:: .fa-grid-widget-column img { width: 300px; height: 300px; }

Você pode mudar a proporção do tamanho alterando (no exemplo) o 300px do CSS. Feliz

Já que está a fazer uma loja, poderia usar o sistema de loja integrada do próprio fórum: https://ajuda.forumeiros.com/t11750-#68660
Aplicando este plugin: https://ajuda.forumeiros.com/t107608-topic

Até mais.

por EDU2010 28.08.17 13:47

Eu não to conseguindo eu sou ruim nisso , me desculpe , poderia me passar o codigo pronto apenas pra eu substituir as imagens e colocar o link que as direcione . Somente isso . Até mais

por EDU2010 29.08.17 13:47

por Kyo Panda 30.08.17 14:34

Código:: <div class="fa-grid-widget"> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> </div> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> </div> <div class="fa-grid-widget-row"> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> <div class="fa-grid-widget-column"> <a href="#"><img src="https://images.tcdn.com.br/img/img_prod/382594/672_1_20140830093952.jpg" /></a> <a href="#"><img src="https://i11.servimg.com/u/f11/15/95/44/80/botao-10.png" /></a> </div> </div> <style> .fa-grid-widget-row { overflow: hidden; margin-bottom: 20px; padding: 5px; } .fa-grid-widget-column { box-sizing: border-box; width: 31%; margin: 0 1%; box-shadow: 0 0 1px 2px rgba(0, 0, 0, 0.2); padding: 5px; float: left; } .fa-grid-widget-column > a:first-child { display: block; } .fa-grid-widget-column img { max-width: 100%; } </style> </div>

por Shek 01.09.17 11:21

Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.
Tópico marcado como Resolvido e movido para Questões resolvidas.

Criar Widget que fique imagem lado a lado