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:
- img-rounded: This class makes the images with slightly rounded corners.
- img-circle: This class makes the images in the circle format.
- img-thumbnail: This class makes the images in thumbnail format, and with a slightly rounded edge.
- 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.
You might also like…