topic Re: Blog Templates in HTML and Custom Modules in CMS Development

Blog Templates in HTML and Custom Modules

jmarcello — Fri, 16 Nov 2018 17:10:19 GMT

Here's is what I am trying to do...

All my blog pages are using custom HTML/CSS/JS. I am not using the drag and drop design manager. My blog posts template is simply called single HTML.

I am needing certain sections of my blog post to have content that can be input by a non-coder on the blog post edit page by simply filling out some fields. In Wordpress this would be the equivalent of metaboxes/custom fields, using a plugin like Advanced Custom Fields.

For instance, I might have a section called "You Might Also Like" which will offer a variable number of our products to blog readers. Each product would have an image, a link to the product page, and a product name/title.

I want team members to be able to create a new blog post, and then input raw data into some "custom" fields that will store that info on a post by post basis.

I want to then be able to write custom queries in the blog post template to place those products on the page, but looping through the data and inserting the values for the custom fields. For instance:

{% for product in products  %}
<div class="box">
<img src="{{ get the product image url }}" />
<a href="{{ get_the_product_page_url}}">
<div>{{ get_the_product_name }}</div>
</a>
</div>
{% endfor %}

I am thinking may be I need to build a custom module, and that is might require something like a "repeater" filed as I would need to be able to loop through it.

How can I achieve this? Any help would be greatly appreciated!

Re: Blog Templates in HTML and Custom Modules

dennisedson — Fri, 16 Nov 2018 17:38:22 GMT

@jmarcello, i think this and this is the documentation you need.

if you need some of that content to appear on your blog listing page as well, make sure to set the export_to_template to true

Re: Blog Templates in HTML and Custom Modules

jmarcello — Mon, 19 Nov 2018 19:27:46 GMT

Dennis,

I appreciate the links and read through them.

Yet both of those pages are rather extensive and I am just not sure what parts are relevant to the exact scenario I've outlined above.

Are you able to help out with a more detailed explanation to help us acheive the stated goal?

Regards,

John

Re: Blog Templates in HTML and Custom Modules

dennisedson — Mon, 19 Nov 2018 19:47:39 GMT

Reply @jmarcello,

I overlooked that you may need more or less products on a page.

A custom module using the repeater is the perfect solution.

Build out your module including the repeater option

On the bottom of the right sidebar, you should see an embed code for the module.

Slap that guy into your post file where you want it and you should be good.

sorry for misread last time!

Re: Blog Templates in HTML and Custom Modules

jmarcello — Fri, 23 Nov 2018 19:45:49 GMT

I am totally lost...cCan you start at the beginning and spell it out for me? Maybe with specific code examples...?

Or is there any one else in the community that can break this down for me in a way that is understandable?

Re: Blog Templates in HTML and Custom Modules

jmarcello — Fri, 23 Nov 2018 19:49:19 GMT

@jausura can you look at this thread and provide some assistance?

How do I create a custom module which contains a repeater field...?
How do I call the results of the repeater field into the blog post template?

Re: Blog Templates in HTML and Custom Modules

dennisedson — Mon, 26 Nov 2018 16:00:18 GMT

@jmarcello, apologies for delay. thanksgiving 🙂

to build a custom module with a repeater field do the following:

1) create a new custom module and make sure to select blog in the options

2) create the fields that are necessary (eg text field, image field) the click "group"

3) add the fields that you would like to include in the repeater group

4) name your group something meaningful

5) in the sidebar, scroll down and select "repeater option"

(this is subjective on my part, you can do the following however floats your boat)

6. In the main html + hubl section, add whatever html layout you want to use for the content

my sample code is this:

<div class="repeater-container">
  <div class="repeater-item">
  	<img>
    <p></p>
  </div>
</div>

7. back in the sidebar, click copy under the repeater group and select "copy snippet"

8. paste the code in a text file or somewhere for reference.

9. from your pasted code, select the {% for item in ... %} and place above the item in your html and add the endfor below the closing div of your item. will look something like this

<div class="repeater-container">
{% for item in module.test_repeater_group %}
  <div class="repeater-item">
  	<img>
    <p></p>
  </div>
{% endfor %}
</div>

10. now, wherever you have editable values, you will insert the field values. so you will find the value for your image and the all of your text and place the values from the code you have copied. using my example, it will look like this:

{% for item in module.test_repeater_group %}
  <div class="repeater-item">
  	<img src="{{ item.image.src }}" alt="{{ item.image.alt }}" width="{{ item.image.width }}" height="{{ item.image.height }}">
    <p>{{ item.heading }}</p>
  </div>
{% endfor %}
</div>

11. publish your module

12. click on the gear icon in the sidebar

13. scroll to the bottom of the sidebar and you should see a snippet you can copy for the module you just built

now you can place this code into your blog post html file where ever you need it.

good luck,

Re: Blog Templates in HTML and Custom Modules

jmarcello — Mon, 26 Nov 2018 16:43:19 GMT

This is super helpful! Thanks!