How did Publisher Weekly create Resource page?

Themes
1

Publisher Weekly has a great Resource page. I’d love to know how this was created. Using Collections? Channels? Any tips on building out a similar resource section would be great.

Also, how was it setup so each post leads directly to the resource utilizing it’s URL?

2

@jasonwojo It looks like the Team Ghost is using the third-party “Curated Newsletter” web app Revue:

ink
ink1018×1080 134 KB

There are many of these we can use…

elink.io is another one.

3

I’m not entirely sure how it differs, because I see some duplicate content, but https://publisherweekly.org/ is run on Ghost :confused:

4

Yes, what I’m trying to figure out is their resource section specifically.

5

Hey everyone!

Publisher Weekly is now using Ghost’s native newsletter feature to send the emails each week. The website itself is built using our Handlebars theme layer.

As for the resource page, this is a custom content collection. Each item is created as a post in Ghost Admin and our theme pulls in the relevant information to the /resources/ page. We use tags to categorise the resources, the custom excerpt for the resource URL and the feature image for the resource logo :)

2 Likes
6

Thank you @Kym for explaining that functionality. Specifically, can you share the code for the navigation, i.e what is generating the .resources-container and .resources-sidebar?

7

Ah, I was wondering how you were pulling a URL, using excerpt is a very clever way to do it. Thank you for the explanation.

8

Each category is just a tag archive, and the sidebar is getting a list of tags:

<div class="resources-sidebar">
    <div class="resources-sidebar-wrapper">
        <h3>Show me...</h3>
        <a href="/resources/"><img src="{{asset "img/resources.svg"}}" alt="Resources" /> Everything</a>
        {{#get "tags" filter="slug:-news" as |tag|}}
        {{#foreach tag}}

        <a href="{{url}}">
            {{#if feature_image}}
            <img src="{{img_url feature_image}}" alt="{{name}}" />
            {{/if}}
            {{name}}
        </a>

        {{/foreach}}
        {{/get}}
    </div>
</div>
1 Like
9

Thank you @Kym!!!

1 Like