Segunda, 01 Julho 2013 18:58

Resultados de busca do Seblod responsivas Seblod.3.x

Escrito por 
Avalie este item
(1 Votar)
Resultados de busca do Seblod responsivas Seblod.3.x - 5.0 out of 5 based on 1 vote

Temo um problema no Seblod quando utilizamos o as buscas os Itens (resultados da busca) não ficam responsives! E isso é um problema para quem precisar ou quer fazer um site 100% responsive!! 

Agora mostrarei uma imagem > do site aberto em um computador de 14 polegadas!! 

pro

Vemos que esta bonito (nem tanto assim kkk) 

Mas esta normal! 

Agora se diminuirmos o tamanho da tela ? 
Chegamos em nosso problema!! O resultado não é responsive, eles vão se aglomerar até um ponto! O que em telas muito pequenas fica feio. 
vejam a imagem abaixo: 

 

 

pro1

Imagina isso em uma tela menor ?? ;) 

Então temos que mudar isso para ficar responsive!! 

Mas para isso temos que usar um pouco de PHP. Coisa simples!!

É preciso fazer um override do Item (da sua busca). 

E inserir esse código! 

<?php $items = $cck->getItems(); ?>

<?php foreach( $items as $item ) {

echo $item->get('nome')->value;

} ?>

Simples não ? 

Mas não é só isso! 

O código completo 

 

<?php $items = $cck->getItems(); ?>

<?php foreach( $items as $item ) {

echo '<div id="suadiv">'.'<a href="'.$item->getLink('nomedocampo').'">'.'<h3>'.substr($item->get('nomedocampo')->value ,0,15).'</h3>'.'<img src="'.$item->getThumb1('nomedocampo').'">'.'</div>';

} ?>

 

Observem!! 

Que esse código é para o meu resultado de busca, para o seu vc vai ter que editar o código!! 

Eu concatenei 2 campos: 

Uma imagem : <img src="'.$item->getThumb1('nomedocampo').'">

O titulo do artigo : '<h3>'.substr($item->get('nomedocampo')->value ,0,15).'</h3>' (Observe que eu coloquei outro coódigo PHP, para que o título tenha no máximo 15 caracteres, isso deixa o titulo menor. )

O outro código chama o Link do artigo' <a href="'.$item->getLink('nomedocampo').'">'

Todos concatenados com HTML simples + uma DIV. (Na div temos apenas um código. float:left )

E coloquei uma borda simples border:1px solid #EEEEEE;

E pronto esta responsive!!

 pro3

Funciona perfeitamente com qualquer resultado de busca, ITEM. 

Basicamente é isto!! 
Abraços a todos e agradecimentos ao Cristiano Maia. 

 

 

 

Lido 6485 vezes Última modificação em Segunda, 01 Julho 2013 19:41
Uriel


Assine nosso canal no Youtube > Uriel Souza

 

 

 

 

 

Website.: cckjoomla.org

Deixe um comentário

Você precisa escrever no minimo 5 palavras!


Anti-spam: complete the task