Asset Management

This guide explains how to manage images, fonts, SVGs, and other assets in LamaPress.

Table of Contents

• Overview
• Image Management
  • Image Sizes
  • Using Images
  • Responsive Images
• Font Management
  • Font Files
  • Using Fonts
• SVG Management
  • SVG Files
  • Using SVGs
• File Size Limits
  • Image Limits
  • Video Limits
  • Audio Limits
• Best Practices
  • 1. Optimize Images
  • 2. Use Appropriate Sizes
  • 3. Lazy Loading
• Related Documentation

---

Overview

LamaPress provides a structured approach to managing assets with custom image sizes, file size limits, and helper functions for accessing assets.

Image Management

Image Sizes

Image sizes are configured in config/media.php:

'image_sizes' => [
    '2xs' => 80,
    'xs' => 200,
    'sm' => 400,
    'md' => 800,
    'lg' => 1200,
    'xl' => 1600,
    '2xl' => 2000,
    '3xl' => 2400,
    '4xl' => 2560,
],

Available sizes:

• 2xs - 80px
• xs - 200px
• sm - 400px
• md - 800px
• lg - 1200px
• xl - 1600px
• 2xl - 2000px
• 3xl - 2400px
• 4xl - 2560px

Using Images

Get image from ACF field:

<?php
$image = llField('image', $key, $section);
if ($image) {
    echo wp_get_attachment_image(
        $image['ID'],
        'lg', // Image size
        false,
        ['class' => 'w-full h-auto']
    );
}
?>

Responsive Images

WordPress automatically generates srcset for responsive images:

<?php
$image = llField('image', $key, $section);
if ($image) {
    echo wp_get_attachment_image(
        $image['ID'],
        'lg',
        false,
        [
            'class' => 'w-full h-auto',
            'sizes' => '(max-width: 800px) 100vw, 1200px'
        ]
    );
}
?>

Font Management

Font Files

Font files are located in public/fonts/:

public/fonts/
├── SuisseIntl-Bold.woff2
├── SuisseIntl-Light.woff2
├── SuisseIntl-Medium.woff2
└── SuisseIntl-Regular.woff2

Using Fonts

Fonts are configured in config/fonts.php and loaded via @font-face in SCSS:

@font-face {
  font-family: 'SuisseIntl';
  src: url('../fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

Fonts are available via Tailwind's fontFamily configuration.

SVG Management

SVG Files

SVG files are located in public/svg/:

public/svg/
├── arrow-down.svg
├── arrow-left.svg
├── arrow-right.svg
├── arrow-up.svg
├── chevron-down.svg
└── ...

Using SVGs

Use llSvg() helper function:

<?php
echo llSvg('arrow-right', ['class' => 'w-6 h-6']);
?>

Parameters:

• $name - SVG filename (without .svg)
• $attributes - Array of HTML attributes (optional)

Example:

<?php
echo llSvg('play', [
    'class' => 'w-8 h-8 text-primary',
    'aria-hidden' => 'true'
]);
?>

File Size Limits

File size limits are configured in config/media.php:

Image Limits

'image' => [
    'limit' => '3MB',
    'types' => ['jpg', 'jpeg', 'webp', 'png']
],

Recommendation: Optimize images before upload using tools like TinyPNG.

Video Limits

'video' => [
    'limit' => '10MB',
    'types' => ['mp4', 'webm'],
    'default_sizes' => [
        'width' => 1920,
        'height' => 1080,
    ],
    'default_resolution' => '720p',
    'max_resolution' => '720p'
],

Recommendation: Compress videos using tools like FreeConvert.

Audio Limits

'audio' => [
    'limit' => '5MB',
    'types' => ['mp3', 'ogg', 'wav']
],

Recommendation: Compress audio using tools like FreeConvert MP3 Compressor.

Best Practices

1. Optimize Images

• Compress images before upload
• Use WebP format when possible
• Use appropriate image sizes for viewport

2. Use Appropriate Sizes

Choose image sizes based on usage:

• Thumbnails: xs or sm
• Content images: md or lg
• Hero images: xl or 2xl
• Full-width backgrounds: 3xl or 4xl

3. Lazy Loading

Use WordPress's built-in lazy loading:

<?php
echo wp_get_attachment_image(
    $image['ID'],
    'lg',
    false,
    ['loading' => 'lazy']
);
?>

Related Documentation

• Build Process - Asset build process
• Performance Optimization - Asset optimization
• Media Handling Rules - Media guidelines

---

Next Steps:

• Review Build Process for asset building
• Check Performance Optimization for optimization strategies
• See existing components for asset usage examples