Is there some way to include a call to action button in my blog post? I’m loving using Hugo and github pages. I’m just struggling a bit on how to do some of the more creative formatting tasks.
I’m guessing I need to drop down into HTML for this, but maybe there is another way?
Regards,
Adam
Shortcodes.
Thanks for the pointer. I did some research and there are no CTA button shortcodes yet, so I started looking into how to build one. I found this post which goes into more detail on how to build a shortcode. It started to make my brain hurt trying to grok all the complexity. Then I realized that this doesn’t even get into the issues of how to style it once you have created it.
After some more research I realized that I could just drop the html right into my post and that would get me there today. So I added this very ugly code smack in the middle of my markdown and got the post out:
<div style="text-align: center">
<a href="https://sensr.net/auth/users/sign_up">
<button style="background-color:#a4d61e;margin-top:6px;margin-bottom:16px;border-radius:4px;font-size:1.6em;padding:8px 20px; font-family: "GibsonSemibold", "Helvetica Neue", Helvetica, Arial, sans-serif;float:none !important;text-shadow:0 1px 1px rgba(0,0,0,0.2)">
Sign up for free!
</button>
</a>
</div>
I guess that shortcode for a CTA button should then take the text for the button and the destination link. So my future project is to refactor this and make a short code out of it so I can use it again. It should maybe look like this:
{{< cta-button “button text” “button link” >}}
In my case it would look like this:
{{< cta-button “Sign up for free!” “https://sensr.net/auth/users/sign_up” >}}
Am I on the right track here?
I’m still not sure where to put the CSS, it shouldn’t be part of the short code, right?
I’m super excited to be using Hugo in production now. Over time I hope to get the blog prettied up and back to as nice looking as it was before we migrated from Wordpress. I’m loving the performance and the fact that I don’t have to worry about endless software updates and having my server hacked.
Very true, but Hugo is an SSG and therefore is focused on how to create, manage, and render static website content (ie., a series of flat content files [typically markdown (.md)] passed through templates and output into flat HTML files). Taking on anything CSS/SASS/SCSS/LESS related strikes me as very out of scope for this project, but I’m not part of the Hugo team.
This should help you:
First, Create layouts/shortcodes/cta.html (let’s make the shortcode call shorter than “cta-button.”
Then, the following assumes you want to use positional parameters rather than named parameters:
<div class="cta">
<a href="{{.Get 1}}">
<button>
{{.Get 0}}
</button>
</a>
</div>
Then you can call this shortcode in your content files as follows:
{{< cta-button "Sign up for free!" "https://sensr.net/auth/users/sign_up" >}}
Note: I’ve removed all the inline styles for a reason
.
That said, this is going to be limited because it will break if you don’t include a) both arguments and b) both arguments in correct order. I would recommend creating what the docs call a “flexible” version. The above should get you started, but the docs shall set you free. 
HTH. Cheers.
Great, thanks for the suggestions. I have refactored my shortcode now.
I struggled to get my CSS to work, though. I put the cta.css file in static/css/cta.css which seems correct. But then I needed to add a link to the new CSS file in themes/hugo-phlat-theme/layouts/partial/head.html like this:
<link rel="stylesheet" href="{{ .Site.BaseURL }}css/cta.css" />
This seems wrong since I’m adding a link inside the template for a shortcode that’s not inside the template. Is there a better place to put the css for my shortcode?
Cheers,
Adam
cta.css file:
.cta {
text-align: center;
font-size:1.6em;
font-family: “GibsonSemibold”, “Helvetica Neue”, Helvetica, Arial, sans-serif;
text-shadow:0 1px 1px rgba(0,0,0,0.2);}
.cta button {
background-color:#a4d61e;
margin-top:6px;
margin-bottom:16px;
border-radius:4px;
padding:8px 20px;
}
Themes aren’t magic or privileged in any way. They are just made by poor schmuks like us, each with varying degrees of knowledge and skill, and motivation or lack thereof to keep going once a theme makes the barest cut of usability for whatever purpose it got started for.
Some themes add a hook for inserting your own CSS files or template code either via your config file or via putting particular named files into your layout dirs. Some don’t.
I just took a moment to find and look at the theme you mentioned, and it doesn’t look like they have done so, so you would probably most easily do this just by copying the whole head.html file into your non-theme layout dirs, /layout/partials/head.html
Hugo will look for partials (and other layout files) in your own directory locations before looking at the theme’s, so this lets you selectively override things at a file by file basis.
The doc link in the previous reply to a more flexible shortcake is great. Here’s another couple examples of button shortcodes(one I found elsewhere, then one I simplified for my use).
One can find lots of other examples too - I think we all end up making things like this.
If you or the theme author wanted to make a way to add/override things with finer granularity than copying and editing the whole head.html file, one could do something as simple as sticking a {{ partial "header_custom.html" . }} near the end of the theme’s (or your version’s) head.html after the other css includes.
The theme would then commit an empty header_custom.html partial, and users could supply their own if they wanted to override with the css links and whatever else they wanted. Then no theme code gets duplicated and an easy way to extend is provided.
Other theme writers have made a range look taking plain filenames from the config.toml and inserting them into links themselves. That limits the type of customization, but arguably makes it simpler for the user by just putting a list of css filenames into a param in config.toml, for example.
This turned longer than I meant to happen, but wanted to get behind some of the things you were talking about. Hugo is great, but it takes a bit coming in fresh to see what parts are meant for what purposes, and to see how all the pieces work together with all the other (many non-hugo) parts. What Hugo doesn’t try to do is as important as what it does try to do many times.
Thanks for the explanations. It’s slowly coming together in my head!
I am actually having a lot of trouble with this too. I am basically trying to get boxzilla to work without Wordpress and connect it to Mailchimp. Do you think this can be done easily?
Boxzilla is a Wordpress specific plugin. It is probably better to create this on your own.