Image Positioning

Is it possible to set the position of an image within a div based on variables set in the html sheetworker? Not sure if css variables can be used, or if those can be 'set' in the html, based on an attribute or sheetworker calculation The main div will be position: relative, and the image will be position: absolute My other thought would be to position the image in a grid, but again, not sure if I can change the grid-column and grid-row using the html sheetworker Thanks for any input

yes, with some caveats. The grid is more what I'm thinking of. You'd need to define several positions and then key them off the state of an attribute. something like: .place-control[value="1"]~.image{top:5px; left:4px;} .place-control[value="2"]~.image{top:2px; right: 6px;}

I may have found a solution, using jQuery and addClass which Roll20 allows. It reminds me of "Whack a Mole" I have the container div set up as a CSS Grid with the # of rows and columns defined. Each image I want to place in the container has its own div/class as well. Then I have classes defined in css as well for each 'box' in the grid that the image might go into, with the row and column for the box defined An example of the css for one of the 'boxes' .pos42 { grid-row : 4 / 5 ; grid-column : 2 / 3 ; } Then I used a jQuery in the HTML Sheetworker to add the class of the box to the class the image is in, which is a variable that I can change. For example the variable might be set to "pos42" to put the image in the div/class "Mole" into the box defined by the pos42 class above. In my case the variable will be based on an attribute, using getAttrs when the sheet is opened $20(`div[class = "Mole"]`).addClass(variable); Seems to be working so far on the Custom Sheet Sandbox.

That will work and is essentially the same as the value keying I showed. Note that the difference between the two is that with the jQuery method you'll need to run that placement logic on every sheet opened.