Our goal in this document is to demonstrate how to import many images at one time. At the time of writing this article, we don't yet support importing image links to an image field type but we can use the following method to import many images to our app.


To start, this is the sample CSV we'll be using to demonstrate this:



In the Data Builder, we need to add a Text Field as shown below with "Image URL"

Please Note: A Text Field is necessary for this process to work. 



Now we can import our list of images.


 


Now comes the fun part. How do we display these as images on the front-end of our app?


To do this, I've added a list component as displayed below:



Inside the "Images List" component, I've added an HTML component and checked to see what our Image URL Field Variable is. As you can see below, the text we are looking for is {Image URL}


Now just cut your Image URL Variable (in this case its {Image URL} ) and click Insert image > Paste the Image URL Variable in the Source input > Ok > Update > Save



Now, as we can see on the front end of our app, we have a list of all our imported images!





Bonus: Add a popup to all pictures


To do this, lets start by adding the following to our html list item:


class="list-image"


So our source code should look like this:

<p><img class="list-image" src="{Image URL}" alt="" /></p>



Next we need to add an HTML component to the same page we have the list component on



In the HTML component, let's edit the source and paste the following HTML code:

<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img id="myModalImg" class="modal-content" />
</div>



Now, on the same page, let's head over to the CSS section and add the following:

/* Style the Image Used to Trigger the Modal */

.list-image {

  border-radius: 5px;

  cursor: pointer;

  transition: 0.3s;

}



.list-image:hover {opacity: 0.7;}



/* The Modal (background) */

.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 1000; /* Sit on top */

  padding-top: 100px; /* Location of the box */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}



/* Modal Content (Image) */

.modal-content {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

}



/* Caption of Modal Image (Image Text) - Same Width as the Image */

#caption {

  margin: auto;

  display: block;

  width: 80%;

  max-width: 700px;

  text-align: center;

  color: #ccc;

  padding: 10px 0;

  height: 150px;

}



/* Add Animation - Zoom in the Modal */

.modal-content, #caption { 

  animation-name: zoom;

  animation-duration: 0.6s;

}



@keyframes zoom {

  from {transform:scale(0)} 

  to {transform:scale(1)}

}



/* The Close Button */

.close {

  position: absolute;

  top: 15px;

  right: 35px;

  color: #f1f1f1 !important;

  font-size: 40px;

  font-weight: bold;

  transition: 0.3s;

}



.close:hover,

.close:focus {

  color: #bbb;

  text-decoration: none;

  cursor: pointer;

}



/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

  .modal-content {

    width: 100%;

  }

}




Lastly, we need to add this to the JavaScript section and we are done!

$(function () {

    $('body').on('mousedown', function () {

        var modal = $("#myModal");

        $('.list-image').on('click', function () {

            var modalImg = $('#myModalImg');

            modal.css('display', 'block');

            modalImg.attr('src', $(this).attr('src'));

        })

        $('.close').on('click', function () {

            modal.css('display', 'none');

        })

    })

});




Lets see this in action!