Click images- Four in one row

I’m assuming that you want to located these on a Docebo “page” using an iframe widget.  You would then host the image/images you have above on any web server you’re allowed to use.  You could use an image map over the single large image if you wish (non-responsive layout), or CSS buttons for each of the four images (responsive layout). Since the “button bar” being shown would be hosted on your own servers, you have infinite options for styling this with your favorite web editor.

To open the links in a new tab/page use target="_blank" in the links or else you’ll be opening those inside the iframe.

If you use an iframe, make sure that the hosting location is iframe allowed list at https://YOURURL/legacy/admin/index.php%3Fr%3DadvancedSettings/index  

We’ve done this using HTML widgets, with the clickable images spaced out within a table.  We host the images on an external webserver though, but this does allow us to make each image a separate link.

OK.  Here’s a way that works with an HTML widget and tables.  I’m using inline styles for this example:

<table style="width: 100%; border-collapse: collapse;">

  <tr>

    <td style="width: 25%; padding: 20px; text-align: center;">

      <a href="https://example.com/page1" style="display: block;">

        <img src="https://picsum.photos/200/150?random=1" 

             alt="Image 1" 

             style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;">

      </a>

    </td>

    <td style="width: 25%; padding: 20px; text-align: center;">

      <a href="https://example.com/page2" style="display: block;">

        <img src="https://picsum.photos/200/150?random=2" 

             alt="Image 2" 

             style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;">

      </a>

    </td>

    <td style="width: 25%; padding: 20px; text-align: center;">

      <a href="https://example.com/page3" style="display: block;">

        <img src="https://picsum.photos/200/150?random=3" 

             alt="Image 3" 

             style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;">

      </a>

    </td>

    <td style="width: 25%; padding: 20px; text-align: center;">

      <a href="https://example.com/page4" style="display: block;">

        <img src="https://picsum.photos/200/150?random=4" 

             alt="Image 4" 

             style="max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); transition: transform 0.2s;">

      </a>

    </td>

  </tr>

</table>