Display only one image on Multiple Files (v2021)

PHPMaker General Discussion (PHPMaker)
1

My project using v2021. How to display only one image (first image) on listing page?

2

You may Inspect HTML element and add your own CSS styles.For example, in newer versions, only the first image is shown in the multi-column Card View (so do not just copy and paste, modify the style to suit your own case), the CSS style is like:

        .card .ew-images > *:not(:first-child) {
            display: none; // Only show the first image in cards
        }
3

My code is like this (v2021):

<span id="el1_news_image">
<span>
<div class="d-flex flex-row">

	<div class="p-1">
		<a title="Click to view image" data-rel="news_x1_image" class="ew-lightbox cboxElement" href="/images/news/image_1.png?session=xxx">
			<img class="ew-image ew-lazy img-thumbnail" loading="lazy" alt="" src="/images/news/image_1.png?session=xxx data-src="/images/news/image_1.png?session=xxx" style="width: 500px;height: 281px">
		</a>
	</div>
	<div class="p-1">
		<a title="Click to view image" data-rel="news_x1_image" class="ew-lightbox cboxElement" href="/images/news/image_2.png?session=xxx">
			<img class="ew-image ew-lazy img-thumbnail" loading="lazy" alt="" src="/images/news/image_2.png?session=xxx" data-src="/images/news/image_2.png?session=xxx" style="width: 500px;height: 281px;">
		</a>
	</div>
	<div class="p-1">
		<a title="Click to view image" data-rel="news_x1_image" class="ew-lightbox cboxElement" href="/images/news/image_3.png?session=xxx">
			<img class="ew-image ew-lazy img-thumbnail" loading="lazy" alt="" src="/images/news/image_3.png?session=xxx" data-src="/images/news/image_3.png?session=xxx" style="width: 500px;height: 281px;">
		</a>
	</div>

</div>
</span>
</span>
4

This worked. I tried adding a custom column and added the following function

function Row_Rendered()
{
 if ($this->PageID == "list"){
    $getimage= explode(Config("MULTIPLE_UPLOAD_SEPARATOR"),$this->image->CurrentValue);
    $this->custom_column->ViewValue = '<img src="images/news/'.$getimage[0].'" width="100%" height="281px">';
 }
}