# Curated Newsletter Sections

### Overview

Curated Newsletters can optionally have defined sections of content.  This is purely to make adding and editing content in the FeedOtter UI more pleasant.

Sections are defined in the \<head> of your HTML email, similar to custom fields.

```html
<html>
<head>
<script type="application/ld+json" id="sections">
        [
	{"prettyName": "Section 1", "name":"section1", "max":1,"autoload":"false", "preloadFeed":""},
	{"prettyName": "Section 2", "name":"section2", "max":3,"autoload":"false", "preloadFeed":""},
	{"prettyName": "Section 3", "name":"section3", "max":4,"autoload":"false", "preloadFeed":""}
        ]
</script>
</head>
<body>

<h3>Header for Section 1 Post</h3>
<!--## [% for post in feedotter.posts_section1 %] ##-->
<tr>
<h1>[[post.post_title]]</h1>
</tr>
<!--## [% endfor %] ##-->

<h3>Header for Section 2 Posts</h3>
<!--## [% for post in feedotter.posts_section2 %] ##-->
<tr>
<h1>[[post.post_title]]</h1>
</tr>
<!--## [% endfor %] ##-->


<!--## [% if feedotter.posts_section3 is not empty %] ##-->
<h3>Header for Section 3 Posts</h3>
<p>This will be hidden if there are no posts selected for Section 3 in the UI.</p>
<!--## [% for post in feedotter.posts_section3 %] ##-->
<tr>
<h1>[[post.post_title]]</h1>
</tr>
<!--## [% endfor %] ##-->
<!--## [% endif %] ##-->
</body>
</html>
```

### Section Properties

* prettyName - The label that will show in the FeedOtter UI.
* name - The technical name you will use to refer to this section in code.
* max - The maximum number of posts allowed in this section.
* autoload - Supports "true" or "false". If "true" a feed is required in the preloadFeed parameter.
* preloadFeed - Expects a valid RSS feed url.

Here is an example of a Curated email with its sections marked:

<figure><img src="https://2086102864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIdHBGk8cqznUpEqm5g1U%2Fuploads%2F8zkg0n6OVCXeSpDqJEwc%2FCurated%20Example%201.png?alt=media&#x26;token=34aca5f2-7dd0-4701-95b5-a5920e441f33" alt=""><figcaption></figcaption></figure>

By dividing a curated newsletter into sections we can give the email editor a better interface in FeedOtter to drag and drop articles into each section individually.

<div align="left"><figure><img src="https://2086102864-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIdHBGk8cqznUpEqm5g1U%2Fuploads%2FEbUUFU6AGvPfOvf4kkNE%2F2023-03-03_06h55_24.png?alt=media&#x26;token=3209d6e3-e5a3-4a72-9d37-739eb671800d" alt=""><figcaption></figcaption></figure></div>

### Hiding a Section When There is No Content

You may wish to use  an IF statement to show or hide a section if there is no content in a section.  Here's a code example:

```
<!--## [% if feedotter.posts_section3 is not empty %] ##-->
//display section content loop here....
<!--## [% endif %] ##-->
```

What this conditional is telling FeedOtter is that if your featured section does contain content, this area of the HTML email template should also be displayed in your newsletter.

### Autoload and Preload

When using sections you can choose to "preload" content directly from an RSS feed into a section. This can be useful if you have one or more sections in your newsletter where you want content to prefill automatically when a new issue is created.

To prefill a section:

* Set "autoload" = "true"
* Set "preloadFeed" = The full URL of your RSS feed.

Changing the Section 1 values to preload 1 post from the FeedOtter blog automatically&#x20;

```
{"prettyName": "Section 1", "name":"section1", "max":1,"autoload":"true", "preloadFeed":"https://www.feedotter.com/feed"},
```

{% hint style="info" %}
Place your updated HTML email code in the Setup area of your newsletter.  Autoloading content only works when creating new Issues via the the New Issue button.
{% endhint %}
