File field in each record as background image in gallery report

[futurist]

Hi,

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:

 

<script>
document.addEventListener("DataPageReady", function(event){
BackgroundImage();

});

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

});

}

</script>

 

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

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

 

Hope this helps anyone!

[futurist]

 Hi, 

Just wanna share this customization solution I came up with if you want to make gallery report datapages look more appealing: