I am creating a new theme and started with a boilerplate. You will notice that the image modules use the default “@hubspot/linked_image” module. There are some very nice style options provided for the boilerplate images such as visibility, alignment, background, and border. I wanted to extend this module, so I clones into my new boilerplate theme. This clone does not include any style options… it’s blank. I go to inspect the @hubspot theme because something must have gone wrong during the clone. Nope… the @hubspot module also does not include any style options. Where are these options coming from when used in the boilerplate???
Hey @mdurchholz and welcome back, it’s so great to see you again on the HubSpot Community! 
Thanks for reaching out and sharing the screenshots!
Can you confirm that when you cloned @hubspot/linked_image, you cloned it to the appropriate source module, please?
I’d love to put you in touch with our Top Experts: Hi @Anton, @evaldas and @zach_threadint do you have suggestions to help @mdurchholz, please?
In the meantime, here are some resources that can help:
- Module and Theme Fields Overview - HubSpot docs
- Module and Theme Field Best Practices - HubSpot docs
- Module and theme fields - HubSpot docs
Have a wonderful day and thanks so much!
Bérangère
Hey @mdurchholz,
since the @hubspot/linked_image module is basically just a single tag provided and managed by HubSpot itself, they inject those options by themselves.
Similar to the padding option in every email module.
Since you’re building a theme, my recommendation would be to create a specific linked_image module for your theme and maybe just add a bit of general CSS support to the HubSpot version. Or completely disable it on theme level so users of your theme can choose only your custom module (personal recommedation)
best,
Anton
Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.
Hey Anton,
Your suggestion is what I was really trying to avoi, but I guess I can just admit defeat here and continue manually rebuilding all of these style fields. With the amount of time I have spent researching this topic I probably could have completed a custom module by now. Is there anyway to share the style json that gets injected?
Also, since I have you here, how would one go about prepopulating those injected fields in a dnd_module tag? I simply just want the “border > corner radius” on my module to have a value by default. Is there anyway to accomplish that with the default @hubspot modules that get this style injection?
Hey @mdurchholz,
unfortunately there’s no way how to get the injected styles from HubSpot.
Even with looking at the module via local development (VSCode/Cursor…) the fields.json is basically empty.
The injection is happening in the corresponding page/email … builder while HubSpot compiles the view/module.
In terms of population, there are quite many options, but the most easiest and common options are:
- Set a default in the module
- When including the module in a template, modifying the embed code
Setting a default value
Depending on how/where you create your theme the default looks like this:
local dev /fields.json:
{
"name": "padding",
"label": "Padding",
"required": false,
"locked": false,
"type": "spacing",
"inline_help_text": "",
"help_text": "",
"default": {
"padding": {
"top": {
"value": 16,
"units": "px"
},
"right": {
"value": 16,
"units": "px"
},
"bottom": {
"value": 16,
"units": "px"
},
"left": {
"value": 16,
"units": "px"
}
}
},
"visibility": {
"hidden_subfields": {
"margin": true
}
}
},
^ example of a spacing field I use for paddings only
^ same option but in the Design-Manager
Note:
In order to apply the styling to an individual instance of a module on a page level, you need to use the {% require_css %} and {% scope_css %} tags in the module.html so the settings will be applied to the instance and not all.
Example:
{% require_css %}
<style>
.myModule{
{{ module.styles.padding.css }}
}
</style>
{% require_css %}
...
<div class="myModule"></div>
would apply the padding to all elements with the .myModule class of a certain page
{% require_css %}
<style>
{% scope_css %}
.myModule{
{{ module.styles.padding.css }}
}
</style>
{% end_scope_css %}
{% require_css %}
...
<div class="myModule"></div>
will apply individual styles per instance of the module (always recommended)
Adding overwrites/custom settings on template level
When adding a module to a section or template, you can modify the embed code.
Example:
the default linked-image module has an image, link and a target (style tags getting injected here).
The most basic embed code looks like this
{% module 'linked-image', path="@hubspot/linked-image", label="Cool image" %}
but you can modify it to adress all available options (not sure about the injected ones) to something like this:
{% module 'linked-image', path="@hubspot/linked-image", label="Cool image",
img= {
"src": ''|default("https://graphispot.com/hubfs/website/general/graphispot-logo-no-whitespace-light.svg)",
"alt": ''|default("GraphiSpot logo")
},
link="https://graphispot.com", target="_blank" %}
Doing so will overwrite the default values, but lets the content editor overwrite it by himself
hope this helps
best,
Anton
Moderator note: While this solution may not address the original poster’s specific situation, it could be helpful for other community members facing similar challenges.
Thanks for the detailed reply, but this really doesn’t help me much. My main goal at the end of the day was to figure out how to get the default image pre-populated with border radius. I wanted all of the settings that get injeected into these default modules because they were nice to have! However, if this cannot be done, I will simply create a custom module.
Below are some final thoughts/feedback to ‘take or leave’ for your development team:
- There should be more information provided that cloning these default hubsptot modules will not clone everything you see in the editor. This was a terrible learning curve that I spent way too much time on. Hopefully someone else will come across this thread in the future
- There is no documentation on how to pre-populate these injected styles. Is it even possible? It is such a wasted opportunity if not.
- There has been a bug with the default image module. It seems that people have been complaining about this for years. The border-radius value gets added to the image wrapper and the border-radius property does not trickle its way down to the image. We have to add in custom CSS in order to fix this issue.
Yep, fully agree on these 3 topics.
It’s not documented how the injected fields being managed as this is quite a new thing (I think about a year or so). The only source of the default web modules and their function is this dev documentation page.
As for pre-populate the injected styles - there’s no specific document, as the using modules in templates guide applies (again, not 100% sure about the injected styles) to every module.
As for the bug, yes. But the great thing is: You as a developer, can make a much better custom module to fit your theme. 
Hi @mdurchholz and thanks for your valuable feedback!
Regarding the default image module: The border-radius value that gets added to the image wrapper and the border-radius property does not trickle its way down to the image.
I see that you have a paid subscription so I’d suggest opening a ticket with our Support Team so they can take a closer look at this.
And thanks so much @Anton for your amazing insights!
Please @mdurchholz, let us know if you have any additional questions, we are here for you!
Bérangère