Nick from HubSpot walks through why asset links break in theme development and how to fix them. He covers the most common mistakes developers make when submitting to the Template Marketplace and what you need to do so your theme actually works for users.
Hey everyone, this is nick over at HubSpot. Wanted to talk to you today about an issue that comes up when developing a theme for the Template Marketplace. That issue revolves around linking. What I have here in front of me is an example of the boilerplate template that we provide providers for free as a kind of a base in building themes. I've made a copy of it, I've renamed it super awesome. And then I've gone in to the homepage template and I've made a quick edit to one of the partial. I think I'm looking good here because I don't see any warnings and I don't see any errors. The issue becomes though, when linking something like this from the customer's perspective, when they get it delivered to them, meaning the theme, it will break, this link will break. Now, the reason for that is because when where I have the theme sitting right here in my developer portal is not where the end user is going to have it delivered. When they either download or purchase that theme from the Template Marketplace, what will happen as an end user is you'll have an App Marketplace folder. You will have folders, subfolders inside of that corresponding to the companies in which you've purchased or downloaded an asset from. In my example here, I have a module from this provider and I have a theme from this provider. Even if you grab multiple assets from the same provider, they will all fall under that folder. So if I had two themes from this provider, they would just be alphabetical under here. So when I link something like this, that is not going to resolve properly in this structure. What we ask is that you link relative to the theme folder, like in the second example under here. Now, this can be whether it's a jpeg, whether it's the module or the section, all of these things should link relative to the theme folder. If they do not, what would happen if this were allowed to be published to the Marketplace? Like this is when the customer went to make a page with this template. In particular, for this example, this section would be blank. Now imagine I did this for every link on this page, for this section, for this image, even for this module. Let's say this wasn't a HubSpot module. This was one of my modules and I linked the same way I did up here. What would happen is again, a customer would make a page from this template and the entire page would be blank. That creates a very negative user experience for the end user. And that is something we want to try to avoid in every single instance, no matter what it is so the best advice would be when you're developing your theme, go through and make sure that whenever you're referencing an image, a section or a module, or anything else, make sure the path is relatively to the theme folder, and that way you will avoid excess time when it comes to reviewing the theme for acceptance into the template marketplace, and you will make sure you're ensuring the best user experience humanly possible. I hope this helps, and best of luck developing.
