How to display pictures in a box in Drupal 8?

How To
1

All CHARM tools
All CHARM tools1220Ă—186 16.5 KB

I would like to add pictures in a box like the printscreen attached. How can I do it?

2

Dear @vbaldass,

Could you please give a link to the page?
Generally, if you want to add an icon, in opinion the easiest way is to add one from Bootstrap ones. You just have to go to Body -> Source while editing and add there the HTML code from the website - you’ll see it after clicking on an icon you’d like to use. But it all depends on what you’d like to show on the website.

Best regards,
Kamila

3

Dear @klach,

Thank you for your suggestions! Here you find the link to the page: https://charm.web.cern.ch/content/charm-tools .

The most important thing for me is that the pictures are displayed inside the box. I will try with Bootstrap and let you know!

Best regards,
Valentina

1 Like
4

Unfortunately, it doesn’t work. I will try to find other solutions looking at other topics in this community. Anyway, thank you so much for your feedback!

Regards,
Valentina

5

Dear Valentina

Try with this html code

<style type="text/css">img {
  border: 2px solid #ddd;
  border-top: 3px solid #000;
  border-radius: 4px;
  padding: 5px;
  width: 150px;
}
img:hover {
  box-shadow: 0 0 1px 1px rgba(0, 140, 186, 0.5);
}
</style>
<p><a href="//cds.cern.ch/images/CERN-PHOTO-202008-104-64" target="_blank" title="View on CDS"><img alt="ALICE,TPC" src="//cds.cern. ch/images/CERN-PHOTO-202008-104-64/file?size=medium" /></a></p>`

Regards
Guillermo

6

Thank you so much Guillermo, it works!! :slight_smile:

Just one more question: I was wondering if you would know why here (https://radwg.web.cern.ch/test-facilities) the images are displayed so small and they are not centered?

7

Dear Valentina

Your website is under maintenance. About the image size adjust the properties (width:95%; height:95%; ) and to align use (class=“center”),

regards
Guillermo

8

Dear Guillermo,

Thank you for your reply! Now the website should be accessible.

The layout is better now, there is always too much space between the first and the second image but it looks like better!

Thank you again for your help.

Regards,
Valentina

9

Dear Valentina

try to put your images inside a table

regards
Guillermo

10

Thank you for your input Guillermo! I will test it :wink: