Preview List images don't scale or resize

[noble]

Hi,

I’m using Teaser List (as per instructions), however the images (logos) don’t resize or scale in the image display.

No matter what image style I select, the only thing that changes is the resolution of the logo. Its size does not change within the boundaries set by the Teaser.

Samples showing the sizing issue (zero scale or resize no matter):
480px

220px

Page/site is https://openlab-cn-may.web.cern.ch/about/our-collaborators

I have no Override Theme in place, this is the vanilla out-of-the-box set-up. I saw a similar issue from 2020 here, but I rather hoped this had been integrated into the standard theme by now.

Thanks for any pointers.
-cath

[pkatyaya]

Hey @noble,

Having read this post, I understand how annoying the process is. To make it simple and achieve what you require for, I would suggest to avoid using of “Display Formats” (Teaser list in this case) and opt for other alternatives which would helps us designing the content in a custom manner.

Here is an example where I have used a Text component in a Landing Page content type and have used some basic CSS to customise the images and text for the Collaborators on your website. This allows me to have control over the image size, resolution and other image and text properties.

Refer to this Screenshot from my test site :

The advantage we can get using a normal text component over a using a view or display format is that it gives us control over the text and image properties that we set depending upon our requirements. Referring to the screenshot above, I have used varying image properties of width, height, position, padding etc. for the 3 of them.

I hope this helps. In case you require any further help with this or creating of the custom CSS, feel free to write us back here.

Regards,
Prakhar

[joachim]

(just in addition to the above, @noble, this is another case where ensuring similar image dimensions makes life much easier)

[pkatyaya]

Exactly, as @joachim mentioned you need to have all images for the collaborators with same size, dimensions etc.

What you currently have are images from varying size and dimensions. Example: Intel (3KB - 100x100), Oracle (43KB - 3796 × 893).

I hope this helps.

[noble]

Hi @pkatyaya
Could you perchance share with me the CSS you used for the logo images?

I am using Views option “Override the output of this field with custom text” where I can usually style stuff without a problem, but I just can’t get anything working (either image is unresponsive, or it works but it includes the rest of the code after {{ field_logo }} as visible text in the cell, which is really weird.)

Thanks in advance!
Cath

[pkatyaya]

Hey @noble,

Here is the code snippet :

<table align="center" border="0" cellpadding="0" cellspacing="0">
	<tbody>
		<tr>
			<td style="width: 150px;"><img alt="intel" data-align="center" data-entity-type="file" data-entity-uuid="913a1927-ad43-44ab-ae27-722e9ab8226c" height="93" src="/sites/test-hse-pk.web.cern.ch/files/inline-images/intel-partners-1_0.png" style="width:150px; height:100px; position : center;" width="93" /></td>
			<td style="width: 508px;">
			<h2><a href="https://openlab-cn-may.web.cern.ch/member/intel" hreflang="en">Intel</a></h2>

			<p>Partner</p>

			<p>Intel is a world leader in computing innovation. The company designs and builds the essential technologies that serve as the foundation for the world’s computing devices.</p>
			</td>
		</tr>
		<tr>
			<td style="width: 150px;"><img alt="oracle" data-align="center" data-entity-type="file" data-entity-uuid="3958e1df-863a-44a8-8423-c9ea39fb1f50" src="/sites/test-hse-pk.web.cern.ch/files/inline-images/oracle-partners-2.png" style="width:150px; height:100px; position:center;" /></td>
			<td style="width: 508px;">
			<h2><a href="https://openlab-cn-may.web.cern.ch/member/oracle" hreflang="en">Oracle</a></h2>

			<p>Partner</p>

			<p>At et facilisi mauris nisl. Caecus facilisis nunc pagus paratus similis suscipit tum. Acsi caecus mos pagus qui quibus refero saluto te. Conventio gravis jus nobis. Capto commoveo torqueo.</p>
			</td>
		</tr>
		<tr>
			<td style="width: 150px;"><img alt="img" data-align="center" data-entity-type="file" data-entity-uuid="2d5751b9-c45b-4036-b09c-67c1e35861e1" src="/sites/test-hse-pk.web.cern.ch/files/inline-images/siemens-partners-3.png" style="width:100px; height:100px;" /></td>
			<td style="width: 508px;">
			<h2><a href="https://openlab-cn-may.web.cern.ch/member/siemens" hreflang="en">Siemens</a></h2>

			<p>Partner</p>

			<p>Siemens AG (Berlin and Munich) is a global powerhouse in electronics and electrical engineering, operating in the industry, energy and healthcare sectors.</p>
			</td>
		</tr>
	</tbody>
</table>

<p>&nbsp;</p>

To add here, you can also try using the table with custom CSS changes depending upon how you prefer to style the element in the table.

I hope this helps. In case you encounter any further issues feel free to ping us here.

Regards,
Prakhar