Merge pull request #53 from PRX/feat/updates

Content updates for Feeder rollout

.bundle/config

@@ -0,0 +1,2 @@
+---
+BUNDLE_PATH: "vendor/bundle"

.gitignore

@@ -3,3 +3,4 @@ _site/
 .jekyll-cache/
 .jekyll-metadata
 .DS_Store
+vendor/

_posts/2024-05-02-prx-unveils-dovetails-improved-podcast-publishing-interface.md

@@ -0,0 +1,63 @@
+---
+layout: post
+permalink: /2024/05/02/prx-unveils-dovetails-improved-podcast-publishing-interface
+canonical: https://medium.com/prxofficial/prx-unveils-dovetails-improved-podcast-publishing-interface-56e62039427d
+title: PRX Unveils Dovetail’s Improved Podcast Publishing Interface
+author: Brandon Hundt
+image: /assets/img/feeder/hero-feeder2.jpg
+heroimage: /img/feeder/hero-feeder2.jpg
+heroimagealt: Podcasting studio with microphone in foreground
+excerpt: New features of PRX’s podcast publishing platform include audio segmentation, ad breaks, and a customizable embed player
+---
+
+[Dovetail](https://dovetail.prx.org/) — PRX’s podcast publishing and monetization platform — is now even more user-friendly, featuring a revamped publishing interface loaded with exciting new capabilities. We’ve heeded the valuable feedback from our users, including producers and audio engineers, and we’re thrilled to announce this update designed to make podcasting with Dovetail an increasingly seamless and efficient experience.
+
+Producers will now see improved audio upload speeds, navigability, and UX. We’ve also improved multiple existing features, like enhanced tooling around our embeddable player and introduced new features such as single file segmentation:
+
+{% picture img/feeder/1.png --alt screenshot of Dovetail' podcast landing page %}
+
+With a podcast selector and a new landing page dedicated to finding content, producers can also effortlessly and swiftly locate the exact podcast or episode they are seeking, enhancing the overall efficiency of their navigation experience:
+
+{% picture img/feeder/2.png --alt screenshot of Dovetail's podcast landing page %}
+
+The new podcasts dashboard will include the most recent episodes, links to all elements that can be updated, and give a quick insight into the podcast’s performance over the past 30 days.
+
+## Audio Segmentation
+Perhaps the most exciting new feature is the ability to mark a single audio file with ad timings. Dovetail has previously asked producers to upload pre-cut audio files to create an episode, a workflow that works well for radio broadcast audio engineers and producers. But, we know podcast producers also enjoy the ability to upload a single file and provide the ad markers.
+
+We’re pleased to say that we now support both workflows. This way, your team can choose the workflow that works best for you:
+
+{% picture img/feeder/3.png --alt screenshot of Dovetail's audio segmenter tool %}
+
+Another feature of the audio segmenter is the ability to lightly edit the audio file within Dovetail. Producers can trim silence off the front and ends of the file — using the Preroll and Postroll timings — and choose an end time for the midroll injection:
+
+{% picture img/feeder/4.png --alt screenshot of uploading audio by segment %}
+
+After the audio files are uploaded and processed, Dovetail will create segments out of the files to stitch up and deliver the right arrangement of ads or no ads to listeners.
+
+## Ad Breaks
+We’ve also made it easier to determine the proper structure for an episode to follow. Previously, we relied on pre-set templates with custom names. No more! Now, producers can simply add the number of Ad Breaks for each episode.
+
+Ad breaks represent the number of midroll sections in the episode. Therefore, an ad-free trailer would have zero ad breaks, and actual episodes can have the number of midrolls that the producer feels is necessary:
+
+{% picture img/feeder/5.png --alt screenshot of defining ad breaks in the Production Calendar %}
+
+Setting the number of Ad Breaks while planning episodes using the improved Episode Planner will allow for more accurate forecasting of ad impressions for your content.
+
+## Embeddable Player Tooling
+There are new customizations now available for the PRX embeddable player within Dovetail. For instance, producers can choose between player styles and even the color theme to match the website:
+
+{% picture img/feeder/6.png --alt screenshot of the PRX embeddable player config on episode pages %}
+
+And, it’s now easier than before to build an embeddable playlist of your show’s content:
+
+{% picture img/feeder/7.png --alt screenshot of the PRX Embeddable player playlist feature %}
+
+<p><em>Note: This article was originally posted on <a href="https://medium.com/prxofficial/prx-unveils-dovetails-improved-podcast-publishing-interface-56e62039427d">PRX’s company blog</a>.</em></p>
+
+## Interested?
+Interested in learning more about using Dovetail from PRX for your podcast distribution? [Fill out our contact form](/contact). The video below also outlines these new updates:
+
+<div style="--aspect-ratio: 16/9;">
+<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LEQqdVBt460?si=dXHtMaQV0h6EMVlb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+</div>

_sass/layout.scss

@@ -356,3 +356,26 @@ footer .thumbnail-image {
 .card-img-bottom {
   height: auto;
 }
+
+[style*="--aspect-ratio"] > :first-child {
+  width: 100%;
+}
+[style*="--aspect-ratio"] > img {  
+  height: auto;
+} 
+@supports (--custom:property) {
+  [style*="--aspect-ratio"] {
+    position: relative;
+  }
+  [style*="--aspect-ratio"]::before {
+    content: "";
+    display: block;
+    padding-bottom: calc(100% / (var(--aspect-ratio)));
+  }  
+  [style*="--aspect-ratio"] > :first-child {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+  }  
+}

pages/features.md

@@ -40,10 +40,21 @@ image: /assets/img/og-image.jpg
   <div class="container col-xxl-8">
     <h2 class="display-6 mb-3">Content and Feed Management with ease</h2>
     <p class="lead">Producer tools for episode uploads and feed management</p>
+    <div class="row">
+      <div class="col-12 mb-4">
+        <div class="card">
+          <div class="card-body">
+            <div style="--aspect-ratio: 16/9;">
+              <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/LEQqdVBt460?si=dXHtMaQV0h6EMVlb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+            </div>
+          </div>  
+        </div>
+      </div>
+    </div>
     <div class="row row-cols-1 row-cols-md-2 g-4">
       <div class="col">
         <div class="card">
-          {% picture img/features/multiple-feeds.png 16:9 class="card-img-top" --alt Screenshot of Multiple Feeds form %}
+          {% picture img/screenshot-feeder-feeds.jpg 16:9 class="card-img-top" --alt Screenshot of Multiple Feeds form %}
           <div class="card-body">
             <h3>Multiple Feeds</h3>
             <p class="mb-0">Customize RSS feeds for your audience to support multiple business models. <a href="/2023/07/06/dovetail-multiple-feeds">Learn More</a></p>
@@ -57,7 +68,7 @@ image: /assets/img/og-image.jpg
       </div>
       <div class="col">
         <div class="card">
-          {% picture img/features/production-calendar.png 16:9 class="card-img-top" --alt Screenshot of Production Calendar %}
+          {% picture img/screenshot-feeder-calendar.jpg 16:9 class="card-img-top" --alt Screenshot of Production Calendar %}
           <div class="card-body">
             <h3>Production Calendar</h3>
             <p class="mb-0">Maximize your revenues by planning your episode drops/seasons ahead of time.</p>
@@ -71,7 +82,7 @@ image: /assets/img/og-image.jpg
       </div>
       <div class="col">
         <div class="card">
-          {% picture img/features/audio-templates.png 16:9 class="card-img-top" --alt Headphones %}
+          {% picture img/screenshot-feeder-structure.jpg 16:9 class="card-img-top" --alt Headphones %}
           <div class="card-body">
             <h3>Flexible Show Structures</h3>
             <p class="mb-0">Adjust your show structure on an episode by episode basis.</p>
@@ -85,7 +96,7 @@ image: /assets/img/og-image.jpg
       </div>
       <div class="col">
         <div class="card">
-          {% picture img/features/play.png 16:9 class="card-img-top" --alt Screenshot of the PRX embeddable player %}
+          {% picture img/screenshot-feeder-player.jpg 16:9 class="card-img-top" --alt Screenshot of the PRX embeddable player %}
           <div class="card-body">
             <h3>Embeddable Player</h3>
             <p class="mb-0">Easily take your audio with you using the PRX embeddable player.</p>

pages/home.md

@@ -26,14 +26,13 @@ image: /assets/img/og-image.jpg
 
 <section class="bg-x-blue text-white p-5">
   <div class="container col-xxl-8">
-    <p class="fs-3 mb-4">Dovetail from PRX helps producers grow, monetize, and sustain their podcasts to succeed in today’s open podcast ecosystem.</p>
-    <p class="fs-4 mb-4">Dovetail averages 70 million downloads per month from over 260 podcasts.</p>
+    <p class="fs-4 mb-4">Dovetail from PRX supports over 270 podcasts and enables over 80 different organizations — to expand audience, monetize content, and ensure long-term sustainability of their podcasts, all while upholding a steadfast commitment to privacy.</p>
     <div id="logoCarouselControls" class="carousel slide" data-bs-ride="carousel">
       <div class="carousel-inner">
         <div class="carousel-item active">
           <div class="row thumbnail-gallery pb-4">
             <div class="col d-flex align-items-center justify-content-center">
-              {% picture thumbnail img/artwork/Crushed-Podcast-Art1.jpeg --alt Crushed from Religion of Sports %}
+              {% picture thumbnail img/artwork/inthedark.jpg --alt In the Dark from Conde Nast %}
             </div>
             <div class="col d-flex align-items-center justify-content-center">
               {% picture thumbnail img/artwork/Frontline+Dispatch.jpg --alt The Frontline Dispatch %}
@@ -65,7 +64,7 @@ image: /assets/img/og-image.jpg
         <div class="carousel-item">
           <div class="row g-3 thumbnail-gallery pb-4">
             <div class="col d-flex align-items-center justify-content-center">
-              {% picture thumbnail img/artwork/projectbrazen.png --alt Project Brazen Originals %}
+              {% picture thumbnail img/artwork/welcome-nightvale.png --alt Welcome to Nightvale %}
             </div>
             <div class="col d-flex align-items-center justify-content-center">
               {% picture thumbnail img/artwork/smithsonian.png --alt Sidedoor from Smithsonian %}
@@ -105,7 +104,7 @@ image: /assets/img/og-image.jpg
       </div>
       <div class="col-md-6 pb-4 d-flex align-items-center">
         <div class="container p-0 product-image">
-          {% picture img/screenshot-publish.jpg --alt Screenshot of publishing episodes in Dovetail from PRX %}
+          {% picture img/screenshot-feeder.jpg --alt Screenshot of publishing dashboard in Dovetail from PRX %}
         </div>
       </div>
     </div>
@@ -155,16 +154,15 @@ image: /assets/img/og-image.jpg
   </div>
 </section>
 
-<!-- #Blockquote
 <section class="bg-x-blue section-quote text-white p-5">
   <div class="container col-xxl-8">
     <div class="row">
       <figure class="col-md-8 mb-0 pb-0">
         <blockquote class="blockquote mt-2">
-          <p class="display-6">A well-known quote, contained in a blockquote element.</p>
+          <p class="fs-4">“Dovetail has really allowed us to streamline podcast operations — from production to marketing support and data-driven decision making. PRX’s tools integrate well with other tools across the industry, which has allowed us to build a single process that works well for us where we are right now. And there’s a lot of room to grow!”</p>
         </blockquote>
         <figcaption class="blockquote-footer">
-          Someone famous in <cite title="Source Title">Source Title</cite>
+          Whitney Baker, Digital Platforms Manager WUNC
         </figcaption>
       </figure>
       <div class="quote-mark icon-svg d-flex justify-content-center col-4">
@@ -173,7 +171,6 @@ image: /assets/img/og-image.jpg
     </div>
   </div>
 </section>
--->
 
 <section class="hero p-5">
   <div class="hero-image">