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

  • 1 year later...

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...