Jump to content

File field in each record as background image in gallery report

Recommended Posts


So i have a table where each record has a file field, and i was wondering whether i could use the files (images) as background image for each record in a gallery report datapage. i was able to achieve this using javascript (placed this on the footer), like so:


document.addEventListener("DataPageReady", function(event){


function BackgroundImage() {

 var x = document.querySelector("section[class*='cbColumnarReport cbReportSection']");

var divs = x.querySelectorAll('div > div:nth-child(1)');
var imgs = x.querySelectorAll('img');

[].forEach.call(divs, function(div) {
  var pic = div.querySelector("img").src;
  div.style.background = 'url('+pic+')';
  div.style.backgroundSize = 'cover';


[].forEach.call(imgs, function(img) {
  img.style.display= 'none';





Make sure to include the file field on Configure Results Page Fields.

Sample DataPage: https://c1hch576.caspio.com/dp/db26a00053f3bf1fad0e494aba19


Hope this helps anyone!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...