Importing many images at once

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:

 

e4ANofb_UxkTY1p_uy3t2N1RoTI1z7RDUQ.png

 

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. 

 

VM8Bfpk6Dvo0w6xyLWk_D5-sn-w_rsqbZA.png

 

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:

 

xTbeuT0SjgMH_ACx4AGgwYQytoPNrDW18w.png

 

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}

 

6aG1iJow0BWV5544Y8uY2abvCY1lShH2wg.png

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

 

G4JDx3FJDasJkcyFDZ8Sng2J7qOjxbs9HA.png

 

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

 

g9eH5SFN1xAyFlpn47Sc5c5WBEML3CvnlQ.png

 

 

 

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>

 

zF0wLwcJOjec3TWc8HmAZc7Olx8jTY7FnA.png

 

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


EbYZeaFAYkoRyJiSroGfjxUjKmKbC5-uvg.png

 

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>

 

XgshR-0aHCVD-ZGfnr1rHc0MlEh522i1Gg.png

 

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%;

}

}

 

 

Jbiseing0_GK0LJhghA2uLgtUUEKQgXUlg.png

 

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');

})

})

});

 

 

_M07w9wmOhDJs45Xd0dTJiedTsc5dxlMVw.png

 

Let's see this in action!

 

Uc9Cm-vzBFINnzFZSriq9_iKxdE3M90WxQ.gif