Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 🎯  Solution Guides

  • Low Code Solutions

    Add "Tabs" to your app

    ID Target Link

    Use an address field to display a static street view thumbnail

    Turn your menu into a fixed menu

    Auto close mobile menu

    Display record information in a card

    How to add a back button to your app

    Add a collapsible accordion element to your app

    Code Snippets

    PHP Curl Create New Record

    PHP Get Records With Filters

    Google Scripts - Get record and create new records from connected table

    Save Tables and Fields into Spreadsheet

    Google Scripts - Export all records

    Webhook to save deleted records

    Send Messages to Slack

    Restrict Space and Force Uppercase in a Form

    Building Advanced Features

    Use Validation Rules to Ensure Unique Votes Per User

    Use Record Rules to Create an Audit Log

    Track current inventory with transactions

    Schedule Bookings and Prevent Double Bookings

    Create orders with multiple items and varying quantities

    2 Step Forms

    Unique Record Validation

    Restrict Editing Records to Record Owners

    Sum date/time field

    Duplicate Records

    Advanced App Customization

    How to embed a Tadabase page on another website

    Adding external fonts

    Custom Favicon

    Making apps mobile friendly

    Show date/time as a countdown

    Importing many images at once

    Adding QR Codes

    Adding charts to PDFs

    Customizing your app shortcut for mobile phones

    Animate parts of a page

    Design Customization

    Changing background colors

    Set background colors to the edge of a page

    Change the background of a column

    Add padding around a component

    Using an image as background for a page

    Adding a background image to a row, column, or component

  • Duplicate Connected Records

Categories
🎯 Solution Guides
Advanced App Customiza...
Importing many images ...

Importing many images at once

In this article we will demonstrate how to import many images at one time.

At this time, Tadabase does not yet support importing image field types. While users can import links to images, they can also utilize the following method to import many images to their apps.

We'll use the following CSV to demonstrate how to import many images at once.

e4ANofb_UxkTY1p_uy3t2N1RoTI1z7RDUQ.png

 

In the Data Builder, add a Text Field titled "Image URL":

VM8Bfpk6Dvo0w6xyLWk_D5-sn-w_rsqbZA.png

Then, import the list of images as shown below.

 

Once you have imported the list of images, you can display them on the live app by adding a list component:

xTbeuT0SjgMH_ACx4AGgwYQytoPNrDW18w.png

You can name the list component "Images List". Within the list component, click Add HTML Component, and then click the pencil icon of the HTML component to edit it. Within the edit HTML component window, click Add Field, and select the Image URL field.  This adds the Image URL variable within the HTML component as {Image URL}:

6aG1iJow0BWV5544Y8uY2abvCY1lShH2wg.png

Copy the {Image URL} text. Click the Insert/Edit Image and paste the {Image URL} variable into the Source input. Click Ok and then Update and Save. 

G4JDx3FJDasJkcyFDZ8Sng2J7qOjxbs9HA.png

As you can see on the live app, you have just created a list component of all the imported images. 

g9eH5SFN1xAyFlpn47Sc5c5WBEML3CvnlQ.png

 

If you'd like, you can also make each picture enlarged within a new popup window when clicked. 

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

class="list-image"

The source code should appear as such:

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

zF0wLwcJOjec3TWc8HmAZc7Olx8jTY7FnA.png

 

Next, add an HTML component to the same page that holds the list component. EbYZeaFAYkoRyJiSroGfjxUjKmKbC5-uvg.png

Within the HTML component, 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, add the following code to the JavaScript section:

$(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

 

Once you save this Javascript, all imported images will be clickable into an enlarged popup as demonstrated below. 

Uc9Cm-vzBFINnzFZSriq9_iKxdE3M90WxQ.gif

How did we do ?

Previous Article
Show date/time as a countdown
Next Article
Adding QR Codes
Back to top
API
100% Operational
Apps
100% Operational
Builder
100% Operational
Overall Status
100% Operational