Como muitas pessoas já sabem, o Bootstrap é uma biblioteca de front-end livre e de código aberto para a criação de sites e aplicações web. Dentre todos os códigos guardados nesta biblioteca estão as classes para tratamento de imagens, tais como: img-rounded, img-circle, img-thumbnail e img-responsive. Vamos abordar agora cada uma delas:

  1. img-rounded: Esta classe deixa as imagens com os cantos levemente arredondados.
  2. img-circle: Esta classe deixa as imagens no formato de círculo.
  3. img-thumbnail: Esta classe deixa as imagens em formato de miniatura, e com uma borda levemente arredondada.
  4. img-responsive: Esta classe deixa as imagens em modo responsivo.

Agora veremos como usar essas classes dentro da tag <img> </img> e dentro do scriptcase.  Como exemplo, criei uma aplicação de controle, com um campo label e vamos fazer a chamada de uma imagem do banco de dados.

1° – Você precisa adicionar a biblioteca do bootstrap, para isso podemos apenas usar os links do próprio site ou importar como biblioteca externa dentro do evento onLoad.
2° – Vamos criar um método PHP chamado “busca_img” para trazer a imagem do banco de dados, retirando do código codificado qualquer prefixo ou sufixo que tenha sido adicionado ao ser salvo no banco. Então vamos colocar este código:


 //SELECT DE CONSULTA QUE BUSCA A IMAGEM NO BANCO DE DADOS
 $vrv_SQL = "SELECT foto FROM tabela_foto WHERE idfoto = '".[glo_idfotos]."'";

//DISPARA CONSULTA
 sc_select(vrv_IMG, $vrv_SQL);

//ISOLA OBJETO SUPRESSÃO DE ERROS
 $vrv_IMAGEM = $vrv_IMG->fields[0];

//MACRO DE CONVERSÃO DE IMAGENS
 $vrv_TEMP = nm_conv_img_access(substr($vrv_IMAGEM, 0, 12));

//VALIDAÇÃO DE PREFIXOS E SUFIXOS INJETADOS PELO SC (NM)
 if (substr($vrv_TEMP, 0, 4) == "*nm*") {

$vrv_IMAGEM = nm_conv_img_access($vrv_IMAGEM);

}

if (substr($vrv_IMAGEM, 0, 4) == "*nm*") {

$vrv_IMAGEM = substr($vrv_IMAGEM, 4);
 $vrv_IMAGEM = base64_decode($vrv_IMAGEM);

}

$vrv_BM = strpos($vrv_IMAGEM, "BM");

if (!$vrv_BM === FALSE && $vrv_BM == 78) {

$vrv_IMAGEM = substr($vrv_IMAGEM, $vrv_BM);

}

//RETORNO DA IMAGEM
 return $vrv_IMAGEM;

3° – Agora vamos voltar no evento onLoad e adicionar o código que fará com que a imagem apareça no campo:

//VARIÁVEL QUE RECEBE O RETORNO DO MÉTODO PHP
$img = base64_encode(busca_logo());

//CAMPO LABEL RECEBE A TAG IMG JUNTAMENTE COM A CLASSE DO BOOTSTRAP QUE MODELA A IMAGEM
{imagem} = "<img class='img-circle' border=0 height='150px' src='data:image/png;base64,$img'>";

 

Note que no código acima, criei uma variável recebendo o valor do método PHP, e depois fiz o campo label recebendo a tag img com a classe ‘img-circle’, e o src que é onde colocamos o caminho da imagem recebendo a variável juntamente com o código php que define a variável como imagem.

Veja o resultado abaixo:

image-shapes

Agora faça o teste você mesmo e veja como fica! 🙂

Para saber mais, acesse: http://www.w3schools.com/bootstrap/bootstrap_images.asp.

Assista um curso gratuito de como Desenvolver um site com Bootstrap e Scriptcase nesse link.

Você pode gostar de…

Scriptcase e os Web services

Nesta oportunidade estarei explicando como trabalhar com web services dentro do scriptcase, diretame...

Scriptcase usa MVC?

Talvez você em algum momento já possa ter pensado sobre essa questão,”será que o Scriptcase us...

Como implementar A2F usando desenvolvimento próprio em NodeJS em uma aplicação Scriptcase

No artigo anterior falamos sobre A2F com o Swivel como ferramente externa para integrar nossas aplic...

Comente este post

Receba novos posts, ofertas e muito mais toda semana.

Usaremos as informações fornecidas para lhe enviar newsletter e ofertas especiais por email. Você pode cancelar a inscrição quando quiser, clicando em um link no rodapé de qualquer e-mail que receber de nós, ou entrando em contato conosco pelo e-mail sales@scriptcase.net. Saiba mais sobre nossa Polícia de Privacidade.