20% OFF OFF FOR NEW LICENSES AND RENEWALS →

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:

image-shapes

¡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.

You might also like…

PROCESAMIENTO AJAX EN SCRIPTCASE

Ajax en los formularios de Scriptcase puede usarse para recargar un campo de tipo de select basado e...

TENDENCIAS DE DESARROLLO WEB PARA 2017

Usted verá en este post tendencias para 2017 en Diseño Web, en el medio digital y en el desarrollo...

SQL INJECTION: INYECTANDO DATOS DESDE LA ENTRADA

¿Qué es SQL Injection? ¿Cómo funciona el ataque? En este post se muestra cómo inyectar datos ...

Comment this post

Get new posts, resources, offers and more each week.

We will use the information you provide to update you about our Newsletter and Special Offers. You can unsubscribe any time you want by clinck in a link in the footer of any email you receive from us, or by contacting us at sales@scriptcase.net. Learn more about our Privacy Police.