Search

Advanced Search

Featured Images Component

Learn how to use and customize featured images in Arsxy Theme

Featured images enhance the visual appeal of your content and provide a preview of your posts. Arsxy Theme includes robust support for featured images across various layouts.

To add a featured image to a post, include the image front matter variable:

---
layout: post
title: "My Blog Post"
description: "A description of my blog post"
image: /assets/images/posts/featured-image.jpg
---

Image Display Locations

Featured images appear in several locations throughout the theme:

  1. Post Headers: At the top of individual posts
  2. Post Lists: As thumbnails in post listing pages
  3. Related Posts: As thumbnails in the related posts section
  4. Social Sharing Cards: Used when your content is shared on social media

If you don’t specify a featured image, Arsxy Theme can generate one automatically based on the post title. To enable this feature, add the following to your _config.yml:

featured_images:
  auto_generate: true
  text_color: "#ffffff"
  background_color: "#1a1a1a"
  font: "Roboto"

Image Size Recommendations

For optimal display across all devices, use the following image dimensions:

  • Recommended size: 1200×630 pixels
  • Minimum size: 600×315 pixels
  • Aspect ratio: 1.91:1

Image Optimization

To improve page load times, Arsxy Theme automatically applies responsive image techniques:

  1. Responsive srcset: Multiple image sizes for different devices
  2. Lazy loading: Images load only when scrolled into view

Example of the HTML generated:

<img src="/assets/images/posts/featured-image.jpg" 
     srcset="/assets/images/posts/featured-image-small.jpg 400w,
             /assets/images/posts/featured-image-medium.jpg 800w,
             /assets/images/posts/featured-image.jpg 1200w"
     sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px"
     alt="Post title"
     loading="lazy">

Overlay Options

You can add text overlays on featured images by setting options in the front matter:

---
image: /assets/images/posts/featured-image.jpg
image_overlay:
  title: true # Show post title on the image
  text_color: "#ffffff"
  gradient: "linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.7))"
---

Cropping Behavior

Control how featured images are cropped and displayed:

---
image: /assets/images/posts/featured-image.jpg
image_options:
  position: "center" # Options: top, center, bottom
  crop: "fill" # Options: fill, fit, none
---

Alternatively, set global defaults in your _config.yml:

featured_images:
  position: "center"
  crop: "fill"

You can customize the appearance of featured images by modifying the CSS in _sass/components/_image.scss:

.featured-image {
  border-radius: 8px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  
  // Caption styles
  figcaption {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    padding-top: 0.5rem;
  }
}

Image Captions

Add captions to your featured images with the image_caption front matter variable:

---
image: /assets/images/posts/featured-image.jpg
image_caption: "Photo by Jane Doe on Unsplash"
---

Full-width Images

For extra impact, make featured images span the full width of the page:

---
image: /assets/images/posts/featured-image.jpg
image_fullwidth: true
---

Accessibility Considerations

For better accessibility:

  1. Always include descriptive alt text for your images
  2. Ensure sufficient contrast between any text overlay and the image
  3. Don’t rely solely on images to convey important information
---
image: /assets/images/posts/featured-image.jpg
image_alt: "Detailed description of the image content" # Will fallback to post title if not specified
---