Forum | Appery.io

The purpose of this idea is for example you have a car image and you would like to put names on the very part of the car.....

Hi Lorenzo,

It's possible. Drag Panel or Grid component to the page, and add an image as a Panel/Grid background, then use CSS asset to handle it.

thank you very much for the quick response.....i shall try the idea.....

well i got your....Drag Panel or Grid component to the page, and add an image as a Panel/Grid background....but I don't know how would the css asset be on the way.... could you give me an example on how the css asset would work?
Another concern of mine is that how would the grid would automatically fit on the screen as the image would.... My logic is this if the image automatically fits to screen the grid should do also so that the name you put on any part of the image would not be displaced..... by the way this is the code I used on the image as background......
Tiggzi("mobilecontainer10").css('background-image','url("' + Tiggzi.getImagePath('Garfieldandfriends.jpg') + '")');
Tiggzi("mobilecontainer10").css('background-size','cover');
Tiggzi("mobilecontainer10").css('background-position','center');
Tiggzi("mobilecontainer10").css('position', 'absolute');
Tiggzi("mobilecontainer10").css('width', '100%');

Hi, any update on this.......

Hi - we are working on it. We'll update.

Well, there is another way that seem to fit with my idea but there are new concerns that arise from it...
I've conducted further research on topics that might be same with my idea and I got this
[name=gridcellname] {
background-image: url(../image/background-image.png);
}
from Sergey Kozyr (https://getsatisfaction.com/apperyio/...).....
This method is really helpful with my idea....but apparently, new concerns arise as I tried this method......one, is that the grid should automatically fit to screen.....and another is that the image I used as background of the grid end up being tiles or repeatedly duplicates itself inside the grid.....so my concern on this part is that how do I automatically fit the image to the grid as the grid automatically fits to the screen....

Furthermore research points me to the parameters below...
Tiggzi('mobileimage_10').width('100%').height('auto');
Tiggzi('mobileimage_10').parent().width('100%').height('auto');
As I tested this, the effects makes the image automatically fit to the screen size....but this parameters as I tested, only works when you run javascript....

So my logic is this... Sergey Kozyr's method makes an image as background inside the grid...now the problem is the grid should automatically fit to screen.....and another is that the image I used as background of the grid end up being tiles or repeatedly duplicates itself inside the grid.....so my concern on this part is that how do I automatically fit the image to the grid as the grid automatically fits to the screen....SO to solve this I need a parameter that runs on css which has similar effects with the parameters below.....

Tiggzi('mobileimage_10').width('100%').height('auto');
Tiggzi('mobileimage_10').parent().width('100%').height('auto');

I hope this may lead a way to finally solve this....

Hi Lorenzo,

1) Add class Panel that contains image set class name "special_panel".

2) Create new CSS with the following code:
code/* style for panel with image /
.special_panel {
/ background without repeating, always centered, extra space is transparent /
background: no-repeat scroll center center transparent;
/ panel should fill all available space /
height: 100%;
width: 100%;
}
/ panel wrapper /
.special_cell {
/ block doesn't contain anything important, block height is 0, let's fix it */
height: 100%;
}/code
3) Add class .special_cell for outside div of panel.
Add code to handle the entire data array from service response, i.e. that is mapped to the entire grid (and not the individual elements).

In this handler an element that points to the specific Grid block item or particular list item will be available

code// Unique ID of a list item
var class_name = $(element).attr('id');

// Find the panel where you want to display an image
var el = $(element).find( "[dsid='panel_6']" ); // paste your panel name here

/ / For a panel create a unique class based on list item ID
/ / Now you can use this class to a direct panel access
el.addClass( "image_panel_" + class_name );

// Add the panel wrapper class .special_cell described above
el.parent().addClass("special_cell");

// Set the panel background
el.css( {
"background-image": "url(" + value.profile_image_url + ")"
} );/code
4) If the panel contains other elements (labels, for example), then cell size should be reviewed.

I shall try this....Thanks Katya, and to the rest of the people of Appery.Io, your help and support is superb.....

I changed the screen shot in my answer. The previous one was a little bit incorrect. We're glad to help