CMS Development

alexfosterITT
Mitglied

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

lösung

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 Akzeptierte Lösung
John
Lösung
Stratege/Strategin | Platinum Partner
Stratege/Strategin | Platinum Partner

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

lösung

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.

Lösung in ursprünglichem Beitrag anzeigen

0 Upvotes
5 Antworten
John
Lösung
Stratege/Strategin | Platinum Partner
Stratege/Strategin | Platinum Partner

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

lösung

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.

0 Upvotes
webdew
Ratgeber/-in | Diamond Partner
Ratgeber/-in | Diamond Partner

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

lösung

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
Mitglied

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

lösung

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
Stratege/Strategin | Platinum Partner
Stratege/Strategin | Platinum Partner

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

lösung

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
Mitglied

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

lösung

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