Is it possible for javascript to derive an image URL from the contents of an "Image" column.

Is it possible for javascript to derive an image URL from the contents of an "Image" column.

pmarks906dpmarks906d Posts: 61Questions: 18Answers: 0

I have a cloudtable embedded on my squarespace website pages where column 2 is an "Image" column. The images are loaded into every record. I can get an array of the images using

var ImageColumnArray = table.column(2).data();
var numRecords = ImageColumnArray.length; // this returns the correct number of rows/records in the table
var imageURL = ImageColumnArray [row_number]... // need to get the URL

"ImageColumnArray.length" correctly produces the number of records/rows in the table. Is it possible for javascript to act on an "ImageColumnArray[...] " array member "ImageColumnArray[row_number]..." to get the associated image's URL? I have tried the "src" attribute, but it is undefined. I have been unable to figure out the type of object of the "ImageColumnArray[...]" members. I am uploading images to my cloudtable as persistent storage and accessing the images to display them at various places on my site. I have one page on the site where the images and URLs are uploaded, and then they are automatically distributed to other places on my site using the URLs. Thanks.

This question has an accepted answers - jump to answer

Answers

  • pmarks906dpmarks906d Posts: 61Questions: 18Answers: 0

    Links To my sight: Image upload page:
    https://philipmarksart.com/pjonly
    Page on which the images are put as an image gallery:
    https://philipmarksart.com/gallery

  • pmarks906dpmarks906d Posts: 61Questions: 18Answers: 0

    Having looked at the html structure of the setup, the following has been found to be true:

    var imgs1 = document.getElementsByClassName("ct-content__image");
    var imgs1Length = imgs1 .length; // this returns the correct number of rows
    var imgs1URL0 = imgs1[0].href; // this returns the appropriate URL for row 0
    

    Given this, once an artwork image has been loaded into the Cloudtable, javascript can retrieve the image URL. From the URL javascript can derive the image file name. From the filename javascript can derive a title for the artwork. So now I can populate the cloudtable on a password-protected page where I enter and can edit this and all other artwork information. Then I can spread the images and other artwork information to other pages as I see fit. So this answers the question.

  • allanallan Posts: 61,650Questions: 1Answers: 10,094 Site admin
    Answer ✓

    Nice workaround. What I plan to do is extend the capabilities of the columned values to be able to use aspects of the other fields, such as urls, file names, etc from images. But that is some time off - until then, this is a good workaround. Nice one.

    Allan

Sign In or Register to comment.