Front-End • Scriptcase IMPORTAR IMÁGENES DE LA BASE DE DATOS Y UTILIZAR CLASES DE BOOTSTRAP

Como muchas personas ya saben, Bootstrap es una biblioteca de front-end libre y de código abierto para la creación de sitios web y aplicaciones web. Entre todos los códigos guardados en esta biblioteca están las clases para el tratamiento de imágenes, tales como: img-rounded, img-circle, img-thumbnail e img-responsive. Vamos a abordar ahora cada una de ellas:

1. img-rounded: Esta clase deja las imágenes con las esquinas ligeramente redondeadas.
2.  img-circle: Esta clase deja las imágenes en el formato de círculo.
3.  img-thumbnail: Esta clase deja las imágenes en formato de miniatura, y con un borde ligeramente redondeado.
4.  img-thumbnail: Esta clase deja las imágenes en formato de miniatura, y con un borde ligeramente redondeado.

Ahora veremos cómo usar esas clases dentro de la etiqueta <img> </ img> y dentro del scriptcase. Como ejemplo, he creado una aplicación de control, con un campo de etiqueta y vamos a llamar a una imagen de base de datos.

 1 º – Usted necesita agregar la biblioteca de boostrap, por lo que sólo puede utilizar los vínculos del propio sitio o importar como biblioteca externa dentro del evento onLoad

 2 º – Vamos a crear un método PHP llamado “búsqueda_img” para traer la imagen de la base de datos, retirando del código codificado cualquier prefijo o sufijo que se haya agregado al ser guardado en el banco. Entonces vamos a poner este código:

//SELECT DE CONSULTA QUE BUSCA LA IMAGEN EN LA BASE DE DATOS
$vrv_SQL = "SELECT foto FROM tabla_foto WHERE idfoto = '".[glo_idfotos]."'";

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

//ISOLA OBJETO SUPRESIÓN DE ERRORES
$vrv_IMAGEM = $vrv_IMG->fields[0];

//MACRO DE CONVERSIÓN DE IMÁGENES
$vrv_TEMP = nm_conv_img_access(substr($vrv_IMAGEM, 0, 12));

//VALIDACIÓN DE PREFJOS Y SUFIXOS INYECTADO POR EL 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 DE LA IMAGEN
return $vrv_IMAGEM;

3º – Ahora vamos a volver en el evento onLoad y añadir el código que hará que la imagen aparezca en el campo:

//VARIABLE QUE RECIBE EL RETORNO DEL MÉTODO PHP
$img = base64_encode(busca_logo());

//CAMPO LABEL RECIBE TAG IMG JUNTAMENTE CON LA CLASE DEL BOOTSTRAP QUE MODELA LA IMAGEN
{imagen} = "<img class='img-circle' border=0 height='150px' src='data:image/png;base64,$img'>";

En el código anterior, creé una variable recibiendo el valor del método PHP, y luego hice el campo label recibiendo la etiqueta img con la clase ‘img-circle’, y el src que es donde colocamos el camino de la imagen recibiendo la variable junto con el código php que define la variable como imagen.

Ver el resultado abajo:

¡Ahora haga la prueba usted mismo y vea cómo queda!

Para obtener más información, visite: http://www.w3schools.com/bootstrap/bootstrap_images.asp.

Ver un curso gratuito de cómo desarrollar un sitio web con Bootstrap y Scriptcase en este enlace.

Veja mas contenidos en nuestro blog.