# Nina Nolte Video Gallery - WordPress/Elementor Implementation Guide

## Overview
This guide will help you integrate the Nina Nolte video gallery into your WordPress website using Elementor. I've created three files for you:

1. `nina-nolte-videos.css` - Custom CSS styles
2. `nina-nolte-videos-shortcode.php` - WordPress shortcode functionality
3. `nina-nolte-elementor-widget.php` - Custom Elementor widget

## Implementation Options

### Option 1: Using Shortcode (Easiest)

#### Step 1: Upload Files
1. Upload `nina-nolte-videos.css` to your theme directory (usually `/wp-content/themes/your-theme-name/`)
2. Add the PHP code from `nina-nolte-videos-shortcode.php` to your theme's `functions.php` file

#### Step 2: Use the Shortcode
Add this shortcode anywhere in your WordPress content:
```
[nina_video_gallery]
```

#### Shortcode Parameters
You can customize the gallery with these parameters:
```
[nina_video_gallery show_header="true" show_back_link="true" back_link_url="https://ninanolte.com" back_link_text="← Back to ninanolte.com" intro_text="Your custom intro text"]
```

### Option 2: Using Elementor Widget (Recommended)

#### Step 1: Upload Files
1. Upload `nina-nolte-videos.css` to your theme directory
2. Upload `nina-nolte-elementor-widget.php` to your theme directory
3. Add this code to your theme's `functions.php` file:

```php
// Include the Elementor widget
require_once get_template_directory() . '/nina-nolte-elementor-widget.php';

// Register the Elementor widget
function register_nina_video_gallery_widget($widgets_manager) {
    $widgets_manager->register(new Nina_Video_Gallery_Widget());
}
add_action('elementor/widgets/widgets_registered', 'register_nina_video_gallery_widget');
```

#### Step 2: Use in Elementor
1. Edit any page with Elementor
2. Search for "Nina Video Gallery" in the widget panel
3. Drag and drop the widget onto your page
4. Customize the settings in the Elementor panel

### Option 3: Custom Plugin (Most Professional)

#### Step 1: Create Plugin Structure
Create a new folder in `/wp-content/plugins/` called `nina-video-gallery/` and add these files:

**Main plugin file (`nina-video-gallery.php`):**
```php
<?php
/**
 * Plugin Name: Nina Video Gallery
 * Description: A custom video gallery for Nina Nolte's YouTube videos
 * Version: 1.0.0
 * Author: Your Name
 */

// Prevent direct access
if (!defined('ABSPATH')) {
    exit;
}

// Define plugin constants
define('NINA_VIDEO_GALLERY_VERSION', '1.0.0');
define('NINA_VIDEO_GALLERY_PLUGIN_DIR', plugin_dir_path(__FILE__));
define('NINA_VIDEO_GALLERY_PLUGIN_URL', plugin_dir_url(__FILE__));

// Include required files
require_once NINA_VIDEO_GALLERY_PLUGIN_DIR . 'includes/shortcode.php';
require_once NINA_VIDEO_GALLERY_PLUGIN_DIR . 'includes/elementor-widget.php';

// Enqueue styles
function nina_video_gallery_enqueue_styles() {
    wp_enqueue_style(
        'nina-video-gallery-css',
        NINA_VIDEO_GALLERY_PLUGIN_URL . 'assets/css/nina-nolte-videos.css',
        array(),
        NINA_VIDEO_GALLERY_VERSION
    );
}
add_action('wp_enqueue_scripts', 'nina_video_gallery_enqueue_styles');
```

#### Step 2: Organize Files
Create this structure in your plugin folder:
```
nina-video-gallery/
├── nina-video-gallery.php (main plugin file)
├── assets/
│   └── css/
│       └── nina-nolte-videos.css
├── includes/
│   ├── shortcode.php (content from nina-nolte-videos-shortcode.php)
│   └── elementor-widget.php (content from nina-nolte-elementor-widget.php)
```

## Customization Options

### CSS Customization
You can customize the appearance by modifying the CSS file. Key classes to target:
- `.nina-video-gallery` - Main container
- `.gallery-header` - Header section
- `.video-grid` - Grid layout
- `.video-card` - Individual video cards
- `.play-button` - Play button overlay

### Adding/Removing Videos
To modify the video list, edit the `nina_get_video_data()` function in the PHP files. Each video entry should have:
- `id` - YouTube video ID
- `title` - Video title
- `description` - Video description
- `type` - Either 'video' or 'short'

### Responsive Design
The CSS includes responsive breakpoints:
- Desktop: Auto-fit grid with minimum 250px columns
- Mobile (768px and below): Single column layout

## Troubleshooting

### Common Issues

1. **CSS not loading**: Make sure the CSS file path is correct in the `wp_enqueue_style()` function
2. **Shortcode not working**: Ensure the PHP code is properly added to `functions.php`
3. **Elementor widget not appearing**: Check that Elementor is active and the widget registration code is correct
4. **Images not loading**: YouTube thumbnail URLs might be blocked - the code includes fallback to `hqdefault.jpg`

### Performance Optimization

1. **Lazy Loading**: Consider adding lazy loading for images
2. **Caching**: The video data is static, so it will be cached by WordPress
3. **CDN**: Consider using a CDN for the CSS file

## Browser Compatibility

The gallery uses modern CSS features:
- CSS Grid (supported in all modern browsers)
- CSS Transforms (supported in all modern browsers)
- Flexbox (supported in all modern browsers)

For older browsers, consider adding fallbacks or using a different layout approach.

## Security Considerations

- All output is properly escaped using WordPress functions (`esc_html()`, `esc_attr()`, `esc_url()`)
- Direct access to PHP files is prevented
- User input is validated through shortcode attributes

## Support

If you need help with implementation or customization, make sure to:
1. Check WordPress and Elementor are up to date
2. Verify file permissions are correct
3. Check for PHP errors in your error logs
4. Test with a default WordPress theme to rule out theme conflicts