Custom Template - Preview Image Thumbnail

[wincode2008]

I used custom Template in List Page with a field Picture. In a regular table, the preview thumnail is working. But when I used the custom, the image in not clickable.
Here is my code:

<table class="table table-striped table-condensed table-sm table-hover">
		<tr>
			<td>									
				<img src='Pictures/{{url: {{{dbvalue pic}}} }}' class="img-fluid img-thumbnail">
			</td>							
		</tr>
	</table>

[arbei]

The image is not clickable because there is no "click" handler in your own code. You need to refer to the original HTML output and use the same HTML attributes. In fact, you better use the original HTML by {{{value pic}}}.

[wincode2008]

But how I will incorporate the class="img-fluid img-thumbnail"?

[arbei]

To add additional CSS classes you may simply use Row_Rendered server event, e.g.

$this->MyField->ViewAttrs->appendClass("my-class-1 my-class-2");

Alternatively, you may Inspect HTML element and add your own CSS styles.

[wincode2008]

I try this one but not working

$this->pix->ViewAttrs->appendClass("img-fluid img-thumbnail");

[arbei]

arbei wrote:

In fact, you better use the original HTML by {{{value pic}}}.'

So the original HTML (with your custom attributes) will be used.

[wincode2008]

Can please give me a sample of original html with attributes. Thank you

[arbei]

arbei wrote:

{{{value pic}}}

Read Custom Template Tags. As the important note says:
Remember that Custom Template is rearrangement of existing HTML fragments in the page. Most of the Custom Template Tags output HTML markup for the field in the page, NOT plain text or numeric values.

If you add your custom attributes to the original HTML, it will be outputted in the original HTML first, and then the HTML fragments are rearranged (moved) according to your Custom Template (by JavaScript). You may press Ctrl + U in your browser (assume Chrome) and view the HTML source of the page, and check if your custom attributes are outputted.