Add media support: image uploads, gallery rendering, video oEmbed

- New class-media.php: handles image upload via REST, stores in post meta, renders Twitter-style gallery
- Added POST /beep/v1/media/{id} and DELETE routes for media management
- Updated composer: media upload button, preview area
- Updated beep_render_post: displays image gallery + video embed
- Supports YouTube, Vimeo, Twitter/X video URLs via oEmbed
- Max 4 images per beep, 10MB each (JPEG/PNG/GIF/WebP)
This commit is contained in:
Krystie
2026-05-18 04:01:41 -07:00
parent 0807eb74d9
commit 6c9b06ccb2
4 changed files with 305 additions and 0 deletions
+26
View File
@@ -40,10 +40,24 @@ function beep_render_composer() {
maxlength="<?php echo (int) BEEP_CHAR_LIMIT; ?>"
rows="1"></textarea>
<div class="beep-compose-footer">
<div class="beep-compose-tools">
<label class="beep-media-btn" title="Add up to 4 images">
<input type="file" accept="image/jpeg,image/png,image/gif,image/webp" multiple data-beep-media-input hidden>
<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
</label>
<span class="beep-media-count" data-beep-media-count hidden>0/4</span>
</div>
<span class="beep-char-counter" data-beep-counter><?php echo (int) BEEP_CHAR_LIMIT; ?></span>
<button class="beep-button beep-post-button" data-beep-submit disabled>Beep</button>
</div>
</div>
<div class="beep-compose-media-preview" data-beep-media-preview hidden></div> <div class="beep-compose-footer">
<span class="beep-char-counter" data-beep-counter><?php echo (int) BEEP_CHAR_LIMIT; ?></span>
<button class="beep-button beep-post-button" data-beep-submit disabled>Beep</button>
</div>
</div>
</div>
</div>
</div>
<?php
return ob_get_clean();
@@ -72,6 +86,8 @@ function beep_render_post($post) {
$user_liked = Beep_Likes::user_has_liked($post->ID, 'post');
$can_delete = current_user_can('delete_post', $post->ID);
$can_interact = is_user_logged_in() && !beep_user_is_banned(get_current_user_id());
$beep_images = Beep_Media::get_images($post->ID);
$beep_video = Beep_Media::get_video_url($post->ID);
ob_start();
?>
@@ -91,6 +107,16 @@ function beep_render_post($post) {
<img class="beep-post-badge" src="<?php echo esc_url(BEEP_URL . 'assets/beep-icon.png'); ?>" alt="" width="32" height="32">
</div>
<div class="beep-text"><?php echo $content; ?></div>
<?php if (!empty($beep_images)) : ?>
<div class="beep-media-attachments">
<?php echo Beep_Media::render_image_gallery($beep_images); ?>
</div>
<?php endif; ?>
<?php if ($beep_video) : ?>
<div class="beep-media-attachments">
<?php echo Beep_Media::render_video_embed($beep_video); ?>
</div>
<?php endif; ?>
<div class="beep-actions">
<button class="beep-action beep-action-reply"
data-beep-toggle-reply