Adding Responsive Images to Homepage of a Website Using SMT

We can add image directly by adding CMS image option in edit section in Site management tools. But it may not be responsive in all screen sizes. For adding responsive images using SMT :

  • First we need to add a CMS Html area to the section where we need to add the image.
  • Then upload the image to the Netsuite file cabinet.
  • Copy the URL generated after adding the image to the file cabinet in Netsuite.
  • Add the url to the html code in CMS html section.
  • Add styles for image properties to become responsive in all screen sizes

Example html code:

Nb: Parameters like height, width, padding,….. etc can be changed according to the requirement.

<style>
.image_conatiner{
  background-color: white;
  text-align: center;
  
}

.exciting_announcement_responsive {
  width: 100%;
  height: auto;
  text-align: center;
    padding-left: 150px;
    padding-right: 150px;
    padding-top:100px;
    padding-bottom:100px;

}
@media screen and (max-width: 1024px){
  .exciting_announcement_responsive {
  text-align: center;
  width: auto;
  height: auto;
  padding: 10px;
  padding-right: 10px;
  padding-left: 10px;
  padding-top:20px;
  padding-bottom:0px;
  }
  
}

</style>

<html>
  <div class"image_conatiner">
    <img src="/core/media/media.nl?id=6461895&c=4215023&h=vllQhMj6p2uUAv9CYC2oCoo1WB40Odog1zDhYj43rK95E3ku" alt="Nature" class="exciting_announcement_responsive">
  </div> 
</html>

Leave a comment

Your email address will not be published. Required fields are marked *