Nested table with pics

[klaus.soerensen]

Have a template with a nested table.
Is it possible to place pictures inside of it based on a record ?

In my case I have a record called Land/Country instead of writing DK, GB etc. it should show the flag for the current country in a gives size.

Pictures will be placed in a folder or in the template

The detailed script looks like this now:
var field = this.record.fields[‘Country’];
if (field) {
this.html(field);
}

DK should place/show a picture called DK.png

Any hints ?

[Erik]

There are several methods to achieve this. Personally, I prefer adding images for this scenario via CSS. To do this, I use a script that assigns the country code as a CSS class name to each table cell of that column. Subsequently, I define CSS rules to set the background image based on these class names.

Here are the steps:

1. In Design view, assign a classname like “land” to the table cell via the Attributes panel (or add it via the Source view).
2. Next, implement a script to add the country names as CSS class name to these cells.

The script references the “.land” class with the Scope set to “Each matched element,” automatically iterating through the results and accessing each element through the “this” object. This simplifies the process of adding information to each matched element and provides direct access to the detail record.

The script adds a class to each matched element based on the “land” field of the respective detail record:

this.addClass(this.record.fields.land)

3. Lastly, create the CSS style rules to set the background image for each country:

.netherlands {
	background-image: url("../images/netherlands.png");
}
.denmark {
	background-image: url("../images/denmark.png");
}
.germany {
	background-image: url("../images/germany.png");
}

I prefer this approach because it gives me the ability to control the position and size of the images using CSS.

Erik

countries.OL-template (11.8 KB)

countries-sample-data.zip (321 Bytes)

[klaus.soerensen]

Perfect thanks Erik…