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.

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

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

See more contents in our blog.

By , Web Developer Fullstack. I work in the area for at least five years. I program and work with Scriptcase and as an independent consultant, I also manage developed systems, custom front-end development in Scriptcase and I share content with the Scriptcase community.

June 14, 2016

a

You might also like…

No-code: Ease or Trap? What no one tells you about creating without coding

With the popularization of No-code and Low-code platforms, application development has reached a po...

Top 10 Rapid App Development Tools You Need to Know

In this highly fast-moving digital world, rapid application development tools must be available to ...

You might also like…

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.