adjusting the position of image in hubl template

Question

I am new to hubl code template development.. I am looking for some way to adjust the position of image in the same template.. I want image to go slightly out of screen for the same wanted to "object-fit" property of css.. but I am stuck with adding this property on this hubl module.. can anyone please help me with this this is my code snippet

{% dnd_module path="@hubspot/linked_image",          
            img={
              "alt": "my portal image",
              "loading": "lazy",
              "max_width": 650,
              "size_type": "auto_custom_max",
              "src": get_asset_url("./images/Portal.png"),
            },
            horizontal_alignment="RIGHT",                        
          %}

Answer 1

I'm not totally sure what you are trying to accomplish but you could put some css on the image in the dnd_module with the following:

.dnd-module span img {
    object-fit: cover;
    width: 100%;
    height: 200px;
}

Please note this would apply to all images in the template that has a dnd image module.

The better solution would be to create a custom module and add the custom css you need to and then add that custom module path to the dnd_module.

This will allow more customizability than using the out of the box linked_image and now you can reuse the custom image module in any template you need.