As many people already know, Bootstrap is a free front-end and open source library for creating websites and web applications. Among all codes stored in this library, there are classes for imaging such as: img-rounded, img-circle, and img-thumbnail and img-responsive. We will now address each of them:

  1. img-rounded: This class makes the images with slightly rounded corners.
  2. img-circle: This class makes the images in the circle format.
  3. img-thumbnail: This class makes the images in thumbnail format, and with a slightly rounded edge.
  4. img-responsive: This class makes the images in responsive mode.

Now we will see how to use these classes in the tag <img> </ img> and within scriptcase.

As an example, I created a control application with a label field and we will make the call from an image database.

1 – You need to add the bootstrap library, for that we can only use the site itself or import links as external library within the onload event.

2 – We will create a PHP method called “search_img” to bring the database image by removing from the encoded code any prefix or suffix that has been added to be saved in the bank. So let’s put this code:

// SELECT OF CONSULTATION THAT SEARCHES THE IMAGE IN THE DATABASE
$ Vrv_SQL = "SELECT Photo FROM table_photo WHERE idfoto = '"' "[glo_idfotos].. ';

// SHOOTS CONSULTATION
sc_select (vrv_IMG, $ vrv_SQL);

// ISOLATES OBJECT ERROR SUPPRESSION
$ Vrv_IMAGEM = $ vrv_IMG-> fields [0];

IMAGES // CONVERSION MACRO
$ Vrv_TEMP = nm_conv_img_access (substr ($ vrv_IMAGEM, 0, 12));
 
// VALIDATION prefixes and suffixes INJECTED BY 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);

}

// IMAGE RETURN
return $ vrv_IMAGEM;

3 – Now let’s turn the onload event, and add the code that will cause the image to appear in the field:

// VARIABLE THAT RECEIVES THE RETURN OF THE PHP METHOD
$ Img = base64_encode (search_soon ());

// LABEL FIELD RECEIVING IMG TAG ALONG WITH BOOTSTRAP CLASS MODELING IMAGE
{Image} = "<img class = 'img-circle' border = 0 height =" 150px "src =" data: image / png; base64, $ img '> ";

Note that in the above code, I created a variable receiving the value of the PHP method, and then I made the field label receiving the img tag with the class ‘img-circle’, and the src which is where we put the path of the image receiving the variable along with php code that defines the variable as image.

image-shapes

Now do the test yourself and see how it looks! 🙂

To learn more, visit: http://www.w3schools.com/bootstrap/bootstrap_images.asp.

You might also like…

Deep Data and Scriptcase: Revealing what goes on in a Business

Deep learning can give rise to something called Deep Data. Useful ways you can utilize Scriptcase to...

Tips on facilitators for developers – Part II

Hello! On the latest post i’ve shown some hints on facilitators for developers. On today’s post ...

Tips on facilitators for developers – Part I

Check out some options within Scriptcase that will work as facilitators that developers can use befo...

Comment this post

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