Match the theme's post thumbnail sizing, float and excerpt length

The front-page/blog listings rendered featured images as 150x150
centre-cropped squares stacked above the text. The theme actually
renders them at 210x150 cropped from the left-top corner
(set_post_thumbnail_size), floated left with a border so the excerpt
wraps beside them -- the CSS for that (#container .attachment-thumbnail)
was already ported, the class just was never applied.

The left-top anchor matters: every featured image is a 930x354 slide
banner whose subject sits in the left portion, so a centre crop cut the
subject out entirely.

Also restores the "Read the Rest..." link (the theme's excerpt_more
filter) and corrects excerpt length -- the theme uses 60 words on the
front page and 30 in the slideshow; the export was baking WordPress's
default 55 for both.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

scripts/export-wp.mjs

@@ -95,7 +95,9 @@ async function exportPostType(conn, postType, destDir, { attachmentPaths, thumbn
     let excerpt = fixLiteralNewlines(row.post_excerpt || '');
     if (!excerpt) {
       const plain = html.replace(/<[^>]+>/g, ' ').replace(/\s+/g, ' ').trim();
-      excerpt = plain.split(' ').slice(0, 55).join(' ');
+      // 60 words: what the theme's front-page loop sets ($sbExcerptLength = 60).
+      // The slideshow truncates this further to 30 at render, as the theme does.
+      excerpt = plain.split(' ').slice(0, 60).join(' ');
     }
 
     const frontmatter = [`title: ${frontmatterString(row.post_title)}`, `slug: ${frontmatterString(slug)}`];

src/components/Slideshow.astro

@@ -6,6 +6,9 @@ const allPosts = await getCollection('posts');
 const slides = allPosts
   .sort((a, b) => b.data.date.getTime() - a.data.date.getTime())
   .slice(0, 5);
+
+// The theme sets $sbExcerptLength = 30 for slides, vs 60 for the front-page loop.
+const slideExcerpt = (excerpt: string) => excerpt.split(' ').slice(0, 30).join(' ');
 ---
 
 <div id="slider">
@@ -20,7 +23,7 @@ const slides = allPosts
               )}
               <div class="post-slide">
                 <h2>{post.data.title}</h2>
-                <p>{post.data.excerpt}</p>
+                <p>{slideExcerpt(post.data.excerpt)}<span class="read-more">Read the Rest...</span></p>
               </div>
             </a>
           </li>

src/content/posts/21.md

@@ -2,7 +2,7 @@
 title: "VICIdial Dedicated Hosting"
 slug: "21"
 date: "2014-05-16T01:01:16.000Z"
-excerpt: "You get your own physical servers in one of our hosting facilities. We have hundreds of servers in our private hosted clusters that we maintain just for our hosted call center services. We only use Tier-3 datacenters with multiple internet backbone connections and redundant power solutions, so you know your service is going to work."
+excerpt: "You get your own physical servers in one of our hosting facilities. We have hundreds of servers in our private hosted clusters that we maintain just for our hosted call center services. We only use Tier-3 datacenters with multiple internet backbone connections and redundant power solutions, so you know your service is going to work. For more information about VICIhost"
 featuredImage: "../../assets/uploads/2018/03/main_page_big_image_small_PRIVATE-CLOUD.png"
 ---
 

src/content/posts/inbound-calls-outbound-calls-and-email-blended.md

@@ -2,7 +2,7 @@
 title: "Inbound Calls, Outbound Calls, Email and Customer Website Chat"
 slug: "inbound-calls-outbound-calls-and-email-blended"
 date: "2014-05-16T02:01:46.000Z"
-excerpt: "Let your agents handle inbound and outbound phone calls as well as inbound email and customer website chat all together in the same web-based agent interface. With Skills-based routing and Queue Prioritization, you can have calls and emails go to the agents that can handle them the most efficiently. You can also have those agents"
+excerpt: "Let your agents handle inbound and outbound phone calls as well as inbound email and customer website chat all together in the same web-based agent interface. With Skills-based routing and Queue Prioritization, you can have calls and emails go to the agents that can handle them the most efficiently. You can also have those agents handling outbound calls when the"
 featuredImage: "../../assets/uploads/2018/03/main_page_big_image_small_CALLS-EMAILS.jpg"
 ---
 

src/content/posts/most-popular-open-source-contact-center.md

@@ -2,7 +2,7 @@
 title: "VICIdial is the Most Popular Open-Source Contact Center"
 slug: "most-popular-open-source-contact-center"
 date: "2015-11-16T00:09:41.000Z"
-excerpt: "VICIdial is the most popular Open-Source Contact Center Solution in the world. With over 14,000 installations in over 100 countries around the world. The agent screen is available in 16 different languages, with options to easily create your own custom translations as well. We have clients running VICIdial at call centers from 5 to 500"
+excerpt: "VICIdial is the most popular Open-Source Contact Center Solution in the world. With over 14,000 installations in over 100 countries around the world. The agent screen is available in 16 different languages, with options to easily create your own custom translations as well. We have clients running VICIdial at call centers from 5 to 500 agents, handling over a million"
 featuredImage: "../../assets/uploads/2018/03/main_page_big_image_small_POPULAR_20170416.png"
 ---
 

src/content/posts/vicidial-is-used-in-many-different-industries-and-organizations.md

@@ -2,7 +2,7 @@
 title: "VICIdial is used in many different industries and organizations"
 slug: "vicidial-is-used-in-many-different-industries-and-organizations"
 date: "2016-06-19T12:22:45.000Z"
-excerpt: "You can find VICIdial in use at thousands of different companies and organizations all over the world. From a bank in Japan to a social club in the United States, all sorts of organizations trust VICIdial to communicate with their customers and members. Here is a small list of how organizations are using VICIdial on"
+excerpt: "You can find VICIdial in use at thousands of different companies and organizations all over the world. From a bank in Japan to a social club in the United States, all sorts of organizations trust VICIdial to communicate with their customers and members. Here is a small list of how organizations are using VICIdial on a daily basis to help"
 featuredImage: "../../assets/uploads/2018/03/main_page_big_image_small_ORGANIZATIONS.png"
 ---
 

src/content/posts/video-what-is-the-vicidial-open-source-contact-center-solution.md

@@ -2,7 +2,7 @@
 title: "VIDEO: What is the VICIdial Open-Source Contact Center Solution?"
 slug: "video-what-is-the-vicidial-open-source-contact-center-solution"
 date: "2017-06-29T01:35:03.000Z"
-excerpt: "This video explains what VICIdial is, how Open-Source Software works, why thousands of companies have chosen to use it, who the Vicidial Group is and what services we can offer to you. Would you like to read more about VICIdial? Click here to take a look at our Whitepaper . If you would like to"
+excerpt: "This video explains what VICIdial is, how Open-Source Software works, why thousands of companies have chosen to use it, who the Vicidial Group is and what services we can offer to you. Would you like to read more about VICIdial? Click here to take a look at our Whitepaper . If you would like to ask us some questions about"
 featuredImage: "../../assets/uploads/2018/03/main_page_big_image_small_VIDEO.png"
 ---
 

src/pages/blog/index.astro

@@ -12,18 +12,10 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       <div id={`post-${post.id}`}>
         <a href={`/blog/${post.data.slug}`}>
           <h2 class="post-title">{post.data.title}</h2>
-          {post.data.featuredImage && <Image class="post-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
+          {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
         </a>
-        <p>{post.data.excerpt}</p>
+        <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
       </div>
     ))}
   </div>
 </BaseLayout>
-
-<style>
-  .post-thumbnail {
-    width: 150px;
-    height: 150px;
-    object-fit: cover;
-  }
-</style>

src/pages/index.astro

@@ -20,9 +20,12 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
       <div id={`post-${post.id}`}>
         <a href={`/blog/${post.data.slug}`}>
           <h2 class="post-title">{post.data.title}</h2>
-          {post.data.featuredImage && <Image class="post-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={150} height={150} />}
+          {/* 210x150 cropped from left-top, matching the theme's set_post_thumbnail_size().
+              The featured images are 930x354 slide banners, so a centre crop would cut off
+              the subject, which sits in the left portion. */}
+          {post.data.featuredImage && <Image class="attachment-thumbnail" src={post.data.featuredImage} alt={post.data.title} width={210} height={150} fit="cover" position="left top" />}
         </a>
-        <p>{post.data.excerpt}</p>
+        <p>{post.data.excerpt}<a href={`/blog/${post.data.slug}`} class="read-more">Read the Rest...</a></p>
       </div>
     ))}
   </div>
@@ -32,11 +35,3 @@ const posts = (await getCollection('posts')).sort((a, b) => b.data.date.getTime(
     <blockquote>In use at over 14,000 companies in over 100 countries around the world</blockquote>
   </div>
 </BaseLayout>
-
-<style>
-  .post-thumbnail {
-    width: 150px;
-    height: 150px;
-    object-fit: cover;
-  }
-</style>