Looking to make changes to a current webpage that is live, but not accessible via design tools.

SOLVE
alexfosterITT
Member

Hello,

 

I am currently a new developer on my marketing team and the first to develop on the Hubspot CMS (so I am starting on a blank slate that has only been touched by content editors). We have a lot of live pages and for a while all of the market place templates have worked just fine for our content editors needs. We are now at a point where the template they have used is not implementing best practices for the ever changing needs of SEO guidelines. I am looking to make a simple implementation of the loading = "lazy" because our images are to large and they are affecting load times for all of our pages. I tried to go and simply edit the page as I understand you can add these changes locally by accessing the templates fields.json file and adding the properties to an image module so that the content editors in the future can also add lazy loading for best practice. Is the best option here to make a clean slate and start from scratch or is there a way I can fetch our current templates and make the changes while I have the hs watch running? Hopefully this was descriptive enough as I need a place to start.

 

Thank you!

0 Upvotes
1 Accepted solution

Accepted Solutions
John
Solution
Top Contributor | Platinum Partner

Option 1: the HS Design Manager:

To get to the design manager, you need to go to marketing > files and templates > design tools. Then search for the module to edit .

Screen Shot 2021-07-20 at 4.29.30 PM.png

Find your image field in the module and edit "available loading options" to your liking.

Screen Shot 2021-07-20 at 4.37.07 PM.pngScreen Shot 2021-07-20 at 4.37.37 PM.png

 

Option 2: Local edits

To have a local workflow, you'll need to follow this getting started guide. Fetch the existing module and upload or watch your changes. Take a look at the image field documentation for a module's fields.json file.
Screen Shot 2021-07-20 at 4.34.25 PM.png

 

 

 

 



I like kudos almost as much as cake – a close second.

View solution in original post

0 Upvotes
5 Replies 5
John
Top Contributor | Platinum Partner

Based on your question below, I think you were looking in the theme's fields.json file and not each module's fields.json file.

 


@alexfosterITT wrote:

I tried to go and simply edit the page as I understand you can add these changes locally by accessing the templates fields.json file and adding the properties to an image module so that the content editors in the future can also add lazy loading for best practice\


If it is a custom module with an image field, then you'll need to edit the field in the MODULE's fields.json to show lazy loading options and then update the module.html file to take the lazy argument. See this bit of code on line 11 in the card-section.module of the CMS theme boilerplate on how to do this.

 

If you correctly changed the module's image fields in Design Tools, then you'll need to update the module's html markup.



I like kudos almost as much as cake – a close second.

alexfosterITT
Member

Thank you for your answer,

 

So how you answered is exactly what I am looking to do, but I can not figure out how to work on the template locally has the template is not in the main accounts design tools. How can I get access to the template locally so I can make the necessary changes?

0 Upvotes
webdew
Top Contributor | Diamond Partner

Hi @alexfosterITT ,

Based on your question you can set defult lazy loading in your image module. It will apply on all the pages.
You'll need to update the module.html also.

https://developers.hubspot.com/en/docs/cms/building-blocks/module-theme-fields#image


Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
alexfosterITT
Member

So my question would be how do I get these templates to where I can work on them in the Hubspot design tools, or better yet locally? After reading the documentation further it says that there is an option to leave false in the modules fields.json so that a content editor would never even have access to this property? I would imagine a lot of the free templates off of the workplace have a lot of things "left out" so that companies either had to outsource a hubspot developer or pay someone from the marketplace. The template that we are using has some very nice pre-built modules...they just lack a wide variety of control.

0 Upvotes
John
Solution
Top Contributor | Platinum Partner

Option 1: the HS Design Manager:

To get to the design manager, you need to go to marketing > files and templates > design tools. Then search for the module to edit .

Screen Shot 2021-07-20 at 4.29.30 PM.png

Find your image field in the module and edit "available loading options" to your liking.

Screen Shot 2021-07-20 at 4.37.07 PM.pngScreen Shot 2021-07-20 at 4.37.37 PM.png

 

Option 2: Local edits

To have a local workflow, you'll need to follow this getting started guide. Fetch the existing module and upload or watch your changes. Take a look at the image field documentation for a module's fields.json file.
Screen Shot 2021-07-20 at 4.34.25 PM.png

 

 

 

 



I like kudos almost as much as cake – a close second.

View solution in original post

0 Upvotes