Skip to main content
This guide covers all aspects of managing multimedia content in VertiSub CMS, including images, video files, and embedded video links from YouTube and Vimeo.

​
Overview

VertiSub CMS supports rich multimedia content across different sections:
  • Images: Uploaded images displayed in galleries and content
  • Video Files: Uploaded video files hosted on your server
  • Video Links: Embedded videos from YouTube and Vimeo
  • Featured Images: Primary images for services, courses, and other content

​
WordPress Media Library

All media files are managed through the WordPress Media Library.

​
Accessing the Media Library

2
In the WordPress admin dashboard, click Media in the left sidebar, then Library.
3
View All Media
4
You’ll see all uploaded images, videos, documents, and other files.
5
Filter Media
6
Use the filters at the top to view:
7
  • Images only
  • Audio files
  • Video files
  • Documents
  • All media items
    • 8
    Search Media
    9
    Use the search box to find specific files by name.

    ​
    Uploading Media Directly

    1
    Click Add New
    2
    In the Media section, click Add New.
    3
    Select Files
    4
    Drag and drop files onto the upload area, or click “Select Files” to browse your computer.
    5
    Wait for Upload
    6
    Files will upload automatically. You’ll see a progress bar.
    7
    Edit Details (Optional)
    8
    After upload, click on a file to add:
    9
  • Title
  • Caption
  • Alt text (important for accessibility)
  • Description

    • ​
    Managing Images

    ​
    Image Types in VertiSub CMS

    The primary image representing a service, course, or content item. Used in:
    • Services (Servicios)
    • Courses (Cursos)
    Recommended specs:
    • Dimensions: 1200 x 675 pixels (16:9 ratio)
    • Format: JPG or PNG
    • File size: Under 500KB
    Multiple images showcasing different aspects of services or courses. Used in:
    • Service multimedia sections
    • Course image galleries
    Recommended specs:
    • Dimensions: 1200 x 800 pixels (or similar)
    • Format: JPG or PNG
    • File size: Under 500KB each

    ​
    Adding Images to Services

    1
    Open Service Editor
    2
    Navigate to Servicios and edit or create a service.
    3
    Scroll to Multimedia
    4
    Find the Multimedia meta box below the main editor.
    5
    Add Image Field
    6
    Under ”📷 Imágenes”, click ”+ Agregar Imagen”.
    7
    Upload Image
    8
    Click the “Subir” button next to the new field.
    9
    Select from Media Library
    10
    The WordPress Media Library opens in a modal window.
    11
    Upload or Choose
    12
    To upload new:
    13
  • Click “Subir archivos” tab
  • Drag and drop or click to browse
  • Wait for upload to complete
    • 14
    To choose existing:
    15
  • Click “Biblioteca multimedia” tab
  • Click on the image you want
    • 16
    Confirm Selection
    17
    Click “Usar esta imagen” at the bottom right.
    18
    Verify URL
    19
    The image URL will automatically populate in the text field.
    20
    Add More Images
    21
    Repeat for additional images.

    ​
    Adding Images to Courses

    1
    Open Course Editor
    2
    Navigate to Cursos and edit or create a course.
    3
    Find Course Images Section
    4
    Locate “Imágenes del Curso” in the Detalles del Curso meta box.
    5
    Add Image
    6
    Click ”+ Añadir Imagen”.
    7
    Select Image
    8
    The Media Library opens automatically. Upload new or select existing images.
    9
    Confirm
    10
    Click “Usar Imagen”.
    11
    View Thumbnail
    12
    The image thumbnail appears with a hidden ID field and “Eliminar” button.
    13
    Add More Images
    14
    Repeat to build an image gallery.

    ​
    Image Best Practices

    ​
    Before Upload

    • Resize Images: Use image editing software to resize before uploading
    • Optimize File Size: Compress images using tools like TinyPNG or JPEGmini
    • Descriptive Filenames: Name files descriptively (e.g., wreck-diving-course-equipment.jpg)
    • Remove Spaces: Use hyphens instead of spaces in filenames

    ​
    During Upload

    • Add Alt Text: Describe the image for accessibility and SEO
    • Add Captions: Provide context where appropriate
    • Use Titles: Keep titles clear and relevant

    ​
    After Upload

    • Test Display: Preview content to ensure images display correctly
    • Check Mobile: Verify images look good on mobile devices
    • Monitor Load Times: If pages load slowly, optimize images further
    Use CaseDimensionsRatioFormat
    Featured Images1200 x 675 px16:9JPG
    Gallery Images1200 x 800 px3:2JPG
    Portrait Images800 x 1200 px2:3JPG
    ThumbnailsAuto-generated-JPG
    Logos/IconsOriginal size-PNG

    ​
    Managing Videos

    ​
    Video File Types

    VertiSub CMS supports two video methods:
    1. Uploaded Video Files: Files hosted on your server
    2. Video Links: Embedded videos from YouTube or Vimeo
    Recommendation: Use YouTube or Vimeo links instead of uploaded files for better performance, reliability, and bandwidth management.

    ​
    Adding Uploaded Video Files

    1
    Open Content Editor
    2
    Edit a service that should have video content.
    3
    Scroll to Multimedia
    4
    Find the Multimedia meta box.
    5
    Add Video Field
    6
    Under ”🎥 Videos (archivos)”, click ”+ Agregar Video”.
    7
    Upload Video
    8
    Click the “Subir” button next to the new field.
    9
    Select Video File
    10
    In the Media Library:
    11
  • Click “Subir archivos”
  • Select your video file (MP4, MOV, AVI)
  • Wait for upload (may take several minutes for large files)
    • 12
    Confirm Selection
    13
    Click “Usar este video”.
    14
    Verify URL
    15
    The video URL populates in the text field.
    16
    Add More Videos
    17
    Repeat for additional video files.
    Video Upload Limitations:
    • Server upload limits typically range from 2MB to 64MB
    • Large files may timeout during upload
    • Videos consume significant server storage and bandwidth
    • Playback performance depends on server capabilities
    Consider using YouTube or Vimeo for videos larger than 50MB.

    ​
    Adding YouTube Videos

    1
    Get YouTube URL
    2
    On YouTube:
    3
  • Navigate to your video
  • Click the Share button
  • Copy the full URL (e.g., https://www.youtube.com/watch?v=dQw4w9WgXcQ)
    • 4
    Or copy the URL from your browser address bar.
    5
    Open Content Editor
    6
    Edit the service or course where you want to add the video.
    8
    For services: ”🌐 Links de Video (YouTube/Vimeo)” in Multimedia box
    9
    For courses: “Video de Introducción” or “Videos de Testimonios”
    11
    Click ”+ Agregar Link” (for services) or locate the URL input field (for courses).
    12
    Paste URL
    13
    Paste the complete YouTube URL into the text field.
    14
    Add More Videos
    15
    For services, repeat to add multiple videos.

    ​
    YouTube URL Formats

    All of these formats work: 
    https://www.youtube.com/watch?v=VIDEO_ID
https://youtu.be/VIDEO_ID
https://www.youtube.com/embed/VIDEO_ID
https://www.youtube.com/watch?v=VIDEO_ID&feature=share

    ​
    Adding Vimeo Videos

    1
    Get Vimeo URL
    2
    On Vimeo:
    3
  • Navigate to your video
  • Copy the URL from the address bar (e.g., https://vimeo.com/123456789)
    • 4
    Or click the Share button and copy the link.
    5
    Open Content Editor
    6
    Edit the content where you want to add the video.
    8
    Locate the appropriate video URL field.
    9
    Paste URL
    10
    Paste the complete Vimeo URL.

    ​
    Vimeo URL Formats

    These formats work: 
    https://vimeo.com/VIDEO_ID
https://player.vimeo.com/video/VIDEO_ID

    ​
    Video Best Practices

    ​
    Video Hosting

    Use YouTube when:
    • Videos are public marketing content
    • You want maximum reach and discoverability
    • You want to leverage YouTube’s global CDN
    • File sizes are large (>100MB)
    Use Vimeo when:
    • You want more control over video appearance
    • You need privacy options (password protection)
    • You want an ad-free experience
    • You prefer a more professional presentation
    Upload to WordPress when:
    • Videos are very short (less than 30 seconds)
    • You have specific technical requirements
    • You have dedicated video hosting infrastructure
    • File sizes are small (less than 50MB)

    ​
    Video Content

    For Service Videos:
    • Show the service in action
    • Keep videos between 1-3 minutes
    • Include multiple videos for different aspects
    • Use captions for accessibility
    For Course Introduction Videos:
    • Keep under 3 minutes
    • Cover: What, Who, Why, and How
    • Show course highlights
    • Include a call-to-action
    For Testimonial Videos:
    • Authentic student experiences
    • Keep under 2 minutes each
    • Include diverse testimonials
    • Show results and transformations

    ​
    Video Quality

    • Resolution: Minimum 720p (1280x720), prefer 1080p
    • Audio: Clear audio with minimal background noise
    • Lighting: Well-lit, professional appearance
    • Length: Shorter is better (under 3 minutes ideal)

    ​
    Removing Multimedia Content

    ​
    Removing Images or Videos from Content

    1
    Open Content Editor
    2
    Edit the service or course containing the multimedia.
    3
    Find Multimedia Section
    4
    Scroll to the appropriate multimedia meta box.
    5
    Click Remove
    6
    Click the “Eliminar” button next to the image or video you want to remove.
    7
    Confirm
    8
    The field is immediately removed from the page.
    9
    Save Changes
    10
    Click “Actualizar” to save your changes.
    Removing an image or video from a service/course does not delete the file from the Media Library. The file remains available for use elsewhere.

    ​
    Deleting Files from Media Library

    2
    Click Media > Library in the sidebar.
    3
    Find File
    4
    Search for or browse to find the file you want to delete.
    5
    Delete File
    6
    Hover over the file and click “Delete Permanently”.
    7
    Confirm Deletion
    8
    Click OK in the confirmation dialog.
    Deleting a file from the Media Library removes it completely. Any content using this file will show broken images or videos. Only delete files you’re certain are not in use.

    ​
    Multimedia Organization

    ​
    Using Media Library Organization

    1
    Filter by Type
    2
    Use the filter dropdown to view only images, videos, or other file types.
    3
    Filter by Date
    4
    Use the date dropdown to view media uploaded in specific months.
    5
    Search Files
    6
    Use the search box to find files by filename or title.
    7
    Grid vs. List View
    8
    Toggle between grid view (thumbnails) and list view (detailed information).

    ​
    Naming Conventions

    Use consistent naming for easy organization: 
    [content-type]-[name]-[descriptor]-[number].ext

Examples:
service-wreck-diving-equipment-01.jpg
service-wreck-diving-underwater-02.jpg
course-open-water-intro-video.mp4
course-open-water-testimonial-01-url

    ​
    Folder Organization (with plugins)

    Consider using a media library organizer plugin for large sites:
    • FileBird: Organize media into folders
    • Media Library Folders: Create folder structures
    • Real Media Library: Advanced media organization

    ​
    Technical Considerations

    ​
    Upload Limits

    WordPress upload limits depend on your server configuration:
    • Shared Hosting: Typically 2-8MB
    • VPS/Dedicated: Usually 64MB or higher
    • Cloud Hosting: Often 100MB+
    To check your limit:
    1. Go to Media > Add New
    2. Look for “Maximum upload file size” text
    To increase limits, contact your hosting provider or site administrator.

    ​
    File Format Support

    ​
    Images

    • JPG/JPEG (best for photos)
    • PNG (best for graphics, logos, screenshots)
    • GIF (for simple animations)
    • WebP (modern format, smaller files)
    • SVG (vector graphics, requires plugin)

    ​
    Videos

    • MP4 (H.264) - best compatibility
    • MOV (QuickTime)
    • AVI
    • WMV
    • WebM

    ​
    Documents

    • PDF
    • DOC/DOCX
    • XLS/XLSX
    • ZIP

    ​
    Performance Optimization

    ​
    Image Optimization Plugins

    Install an image optimization plugin:
    • Smush: Automatic image compression
    • ShortPixel: Advanced compression options
    • Imagify: Excellent compression with WebP support

    ​
    Lazy Loading

    Enable lazy loading (loads images only when they scroll into view):
    • Built into WordPress 5.5+
    • Can be enhanced with plugins

    ​
    CDN Integration

    For sites with heavy multimedia:
    • Use a Content Delivery Network (CDN)
    • CloudFlare, StackPath, or Bunny CDN
    • Dramatically improves load times globally

    ​
    Troubleshooting

    ​
    Images Not Displaying

    Possible causes:
    1. File was deleted from Media Library
    2. Incorrect permissions on uploads folder
    3. Browser caching showing old content
    4. Theme CSS hiding images
    Solutions:
    1. Re-upload the image
    2. Contact hosting provider about file permissions
    3. Clear browser cache (Ctrl+Shift+R)
    4. Check with developer about CSS issues

    ​
    Video Not Embedding

    For YouTube/Vimeo links:
    1. Verify the video is public (not private)
    2. Check that the URL is complete
    3. Ensure the URL includes https://
    4. Try the share URL format
    For uploaded videos:
    1. Check file format is supported
    2. Verify file uploaded successfully
    3. Test video URL directly in browser
    4. Check server has sufficient storage

    ​
    Upload Fails

    Common issues:
    1. File too large (exceeds server limit)
    2. Timeout on slow connections
    3. Unsupported file type
    4. Server storage full
    Solutions:
    1. Compress or resize the file
    2. Use a faster internet connection
    3. Check supported formats
    4. Contact hosting provider about storage

    ​
    Media Library Slow

    If Media Library loads slowly:
    1. Use a media library organizer plugin
    2. Delete unused media files
    3. Implement pagination (limit items per page)
    4. Consider upgrading hosting

    Build docs developers (and LLMs) love

    Get started for freeTalk to us