search

GSA / digital.gov

DEPRECATED 🛑-The future site of Digital.gov
https://www.digital.gov
4 stars 4 forks source link

Create templates for Promos and Cards #30

Closed jeremyzilar closed 2 years ago

jeremyzilar commented 7 years ago

Promos are the way a story is promoted around the site.

This is the data that a promo should/could contain.

Cards are the template for displaying a Promo

Proposal: How to create a new promo for the homepage:

  1. Create the promo file
  2. Include a CARD template in the homepage template and pass the promo-slug into the include

Benefits of this approach: The same promos can be displayed in multiple card formats around the site. Some might need expanded feature-y presentations, others might need shorter, more slim presentations.

thisisdano commented 7 years ago

@jeremyzilar sanity check here

Create the promo file Include a CARD template in the homepage template and pass the promo-slug into the include

Lemme just make sure I get it.

in (let's just say) /_data/promos we have big-event.yml and it looks something like

url: 
title: 
category:
    - name: 
       url: 
summary: 
featuredImage: 
byline: 
date:
links:
     - text:
        url: 
     - text:
        url:

Then in the page html, we have something like:

{% include card/news.html source="big-event" %}

Which then accesses that data in the card/news.html template via something like

{% assign thisdata = site.data.promos[{{ include.source }}] %}

<div class="card-news">
    <div class="card-summary">{{ thisdata.summary | markdownify }}</div>
</div>

Does that scan to you? Or were you thinking of a different method?

thisisdano commented 7 years ago

Maybe there's something more for me to understand in this article: https://www.smashingmagazine.com/2016/02/content-modeling-with-jekyll/

Still trying to wrap my head around building with jekyll data...

thisisdano commented 7 years ago

Hm, promos could be a collection....

File would be /_promos/big-event.md with a slug field

---
slug:
url: 
title: 
category:
    - name: 
       url: 
summary: 
featuredImage: 
byline: 
date:
links:
     - text:
        url: 
     - text:
        url: 
---

call with 

{% include card/news.html promo=site.promos.big-event %}

then in the template:

<div class="card-news">
    <div class="card-summary">{{ promo.summary | markdownify }}</div>
</div>

or. if it seems simpler

{% include card/news.html slug="big-event" %}

then in the template:

{% assign promo = site.promos | where: "slug", [{{ include.slug }}]  | first %}

<div class="card-news">
    <div class="card-summary">{{ promo.summary | markdownify }}</div>
</div>
thisisdano commented 7 years ago

I'm gonna go with option A in the examples above.

thisisdano commented 7 years ago

@jeremyzilar can you add your card sketches to this conversation?

jeremyzilar commented 7 years ago

promo-mock

aalikaram commented 2 years ago

🛑DEPRECATED🛑 - Repo no longer being maintained #30