20% OFF para compra e renovação →

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: O que é VS O que não é

O que é VS O que não é O que é o ScriptCase? É um ambiente de desenvolvimento rápido com...

Usando Biblioteca Externa para montar DataGrids em formulários e Report PDF

Nesse artigo vamos apresentar uma classe externa em php desenvolvida exclusivamente para usar com Sc...

Como abordar com sucesso o desenvolvimento de software

Como abordar com sucesso o desenvolvimento de software O Scriptcase é um poderoso ambiente de dese...

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.