function bb_pro_display_stories_fb_style() { if (!is_user_logged_in()) return 'You must be logged in to view stories.'; $current_user_id = get_current_user_id(); // Query stories not expired $args = array( 'post_type' => 'bb_story', 'post_status' => 'publish', 'meta_query' => array( array( 'key' => '_bb_story_expiration', 'value' => time(), 'compare' => '>', 'type' => 'NUMERIC', ), ), 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page' => 20, ); $stories = new WP_Query($args); if (!$stories->have_posts()) return 'No stories available.'; // Get viewed stories from user meta for read/unread ring $viewed_stories = get_user_meta($current_user_id, 'bb_viewed_stories', true); if (!is_array($viewed_stories)) $viewed_stories = []; // Wrapper container for stories + right scroll arrow $html = '
'; $html .= '
'; // 1. Create Story Button $html .= '
'; $html .= '
+
'; $html .= ''; $html .= '
'; // 2. Loop stories while ($stories->have_posts()) { $stories->the_post(); $story_id = get_the_ID(); $author_id = get_post_field('post_author', $story_id); $author_name = get_the_author_meta('display_name', $author_id); $author_avatar = get_avatar_url($author_id, ['size' => 48]); $story_thumb = get_the_post_thumbnail_url($story_id, 'medium'); $story_title = get_the_title($story_id); if (empty($story_title)) $story_title = $author_name; // Check if viewed $is_viewed = in_array($story_id, $viewed_stories); $ring_class = $is_viewed ? 'viewed' : 'unread'; $html .= '
'; $html .= '
'; $html .= 'Story cover'; $html .= ''.$author_name.' avatar'; $html .= '
'; $html .= ''; $html .= '
'; } $html .= '
'; // close bb-story-bar // Add right scroll arrow $html .= ''; $html .= '
'; // close wrapper wp_reset_postdata(); // Modal HTML for full screen story viewer $html .= ''; // Enqueue CSS + JS needed for this style and behavior bb_pro_enqueue_fb_style_assets(); // Prepare stories JSON for JS $story_data = []; foreach ($stories->posts as $post) { $id = $post->ID; $thumb_id = get_post_thumbnail_id($id); $mime = get_post_mime_type($thumb_id); $src = wp_get_attachment_url($thumb_id); $story_data[] = ['id'=>$id, 'src'=>$src, 'mime'=>$mime]; } $story_json = json_encode($story_data, JSON_HEX_TAG|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_HEX_AMP); // JS: Click handlers, modal open, mark viewed, swipe, progress bar, Create Story redirect, and scroll arrow $html .= ""; return $html; } add_shortcode('bb_stories', 'bb_pro_display_stories_fb_style'); // Enqueue styles for Facebook style stories bar with scroll arrow function bb_pro_enqueue_fb_style_assets(){ wp_add_inline_style('swiper-css', ' .bb-story-wrapper.fb-style-wrapper { position: relative; max-width: 100%; overflow: hidden; } .bb-story-bar.fb-style { display: flex; overflow-x: auto; padding: 8px 12px; gap: 10px; align-items: flex-start; scrollbar-width: thin; scrollbar-color: #999 transparent; scroll-behavior: smooth; scroll-padding-right: 50px; /* avoid arrow overlay */ } .bb-story-bar.fb-style::-webkit-scrollbar { height: 8px; } .bb-story-bar.fb-style::-webkit-scrollbar-thumb { background: #999; border-radius: 4px; } .bb-story-card { flex: 0 0 auto; width: 110px; height: 180px; background: #f9f9f9; border-radius: 16px; box-shadow: 0 1px 5px rgb(0 0 0 / 0.1); cursor: pointer; position: relative; outline: none; } .bb-story-card:focus { box-shadow: 0 0 0 3px #0a74da; } .bb-story-card.create-story { display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: 600; color: #333; font-size: 14px; user-select: none; background: #e6f0ff; } .bb-story-card.create-story .create-thumb { width: 70px; height: 70px; border-radius: 50%; background: #ddd; display: flex; justify-content: center; align-items: center; font-size: 36px; color: #0a74da; margin-bottom: 8px; } .bb-story-thumb-wrapper { position: relative; width: 100%; height: 140px; border-radius: 16px 16px 0 0; overflow: hidden; } .bb-story-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.3s ease; } .bb-story-card:hover .bb-story-thumb { transform: scale(1.05); } .author-avatar { position: absolute; top: 8px; left: 8px; width: 48px; height: 48px; border-radius: 50%; border: 3px solid #2196f3; box-sizing: content-box; background: #fff; transition: border-color 0.3s ease; } .author-avatar.viewed { border-color: #888; } .story-label { padding: 8px 10px; font-size: 13px; font-weight: 600; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Scroll arrow styling */ .bb-story-scroll-arrow { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%; width: 32px; height: 32px; font-size: 24px; cursor: pointer; z-index: 1001; display: flex; align-items: center; justify-content: center; user-select: none; transition: background 0.3s ease; } .bb-story-scroll-arrow:hover { background: rgba(0,0,0,0.8); } .bb-story-modal { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.95); z-index: 10000; justify-content: center; align-items: center; } .bb-story-modal.active { display: flex; } .bb-story-content img, .bb-story-content video { max-width: 100vw; max-height: 90vh; border-radius: 12px; box-shadow: 0 0 30px rgba(0,0,0,0.6); user-select: none; } .bb-story-close { position: absolute; top: 20px; right: 20px; font-size: 36px; color: #fff; cursor: pointer; background: transparent; border: none; padding: 0; user-select: none; z-index: 10001; outline: none; } .bb-story-progress { position: absolute; top: 10px; left: 10px; right: 10px; height: 4px; background: rgba(255,255,255,0.25); border-radius: 2px; overflow: hidden; } .bb-story-progress-bar { width: 0%; height: 100%; background: #2196f3; transition: width 0.05s linear; } '); } Feed – 13-Sign Astrology – Abibitumi.com

Group Feed

Show by