an update to some previous code , it now shows full instagram , sendvid and reddit urls.
Basic Overview
The bookmarklet, which I’ll call "XenForo DynamicImageCollector v1.3" for clarity, is a tool you run on a XenForo forum page (or any webpage) by clicking it in your browser’s bookmarks. It creates a floating panel that collects and displays images and specific URLs (like links to media embeds) from the page. You can interact with it to filter, copy, or scroll to content, making it easier to manage and save media you find in forum threads.
What It Does on a XenForo Forum
On a XenForo-compatible forum (like thecoli.com or similar platforms), this bookmarklet:
- Finds Images: It grabs all the images (e.g., JPGs, PNGs, GIFs) from posts, but skips unwanted ones like avatars or smilies.
- Extracts Special URLs: It pulls out links to embeds (e.g., Instagram, Reddit, Streamable) from iframe tags and certain <a> links in posts.
- Shows a Panel: Displays a movable, resizable box with thumbnails of the images and tools to work with them.
- Lets You Filter: You can switch between showing all images, just GIFs, or embedded media (like Twitter or Instagram pics).
- Copies URLs: Provides buttons to copy image URLs or embed links in different formats (multi-line or single-line).
- Scrolls to Images: When checked, clicking a thumbnail jumps you to that image on the page.
- Manages Changes: You can delete thumbnails and undo/redo those changes.
Detailed Summary in Simple Terms
Here’s an extensive breakdown of what "XenForo DynamicImageCollector v1.3" does on a XenForo forum, explained step-by-step in plain language:
1. Starting the Tool
- You click the bookmarklet in your browser while on a XenForo forum thread.
- A white box (panel) pops up on the right side of the screen. You can drag it around or resize it by pulling the blue corner.
2. Collecting Images
- The tool scans the page for all <img> tags (pictures in posts).
- It cleans up the image URLs by:
- Removing extra stuff like ? or :large (e.g., turns
https://pbs.twimg.com/media/Fg5dUuNUcAAvmg8.jpg:large
into https://pbs.twimg.com/media/Fg5dUuNUcAAvmg8.jpg).
- Fixing Reddit preview links (e.g., preview.redd.it becomes i.redd.it).
- Skipping junk like avatars (e.g.,
https://www.thecoli.com/data/avatars/...),
smilies (e.g., https://www.thecoli.com/styles/...),
or tiny icons.
- Only keeps images ending in .gif, .jpg, .jpeg, .png, or .webp unless you’re in "embeds" mode.
3. Collecting Special Links
- It also looks for special URLs in the thread:
- Iframe Embeds: Finds hidden iframe tags (common in XenForo for media embeds) and extracts URLs like:
- Reddit posts (e.g.,
https://old.reddit.com/r/subreddit/comments/id).
- Sendvid videos (e.g.,
https://sendvid.com/id).
- Streamable videos (e.g.,
https://streamable.com/id).
- Instagram posts (e.g.,
https://www.instagram.com/p/id/).
- Anchor Links: Grabs <a> tags with links to:
- Erome albums (e.g.,
https://erome.com/a/id).
- Bunkr files (e.g.,
https://bunkr.is/...).
- Instagram pages.
- These URLs are stored separately from images and shown only when you choose "Show Domains."
4. Displaying the Panel
- The panel shows:
- Top Bar:
- A checkbox for "Scroll to image" (checked by default—clicking thumbnails jumps to the image on the page).
- A "Preserve state" checkbox (locks your current filtered list so it doesn’t reset).
- A count (e.g., "5 Images / 3 URLs Found").
- Buttons: "Show GIFs Only," "Show Embeds Only," "Show Domains," and a close "×" button.
- A "Drag Here" spot to move the panel.
- Buttons Below:
- "Copy All URLs" (copies what’s in the text box).
- "
Undo" and "
Redo" (undo/redo deleting thumbnails).
- Thumbnails: Small previews of the collected images, each with a red "×" to delete it.
- Text Box: A multi-line list of URLs (starts with image URLs).
- Single Line Field: A single-line version of the URLs.
- Copy Buttons: "Copy Single Line URLs" and "Copy All Combined URLs" (grabs everything—images and embeds).
5. Interacting with Images
- Thumbnails:
- Click an image (with "Scroll to image" checked), and the page scrolls to the top of that image in the thread, with a blue outline flashing for 2 seconds.
- Click the red "×" to remove a thumbnail from the list (you can undo this).
- Filtering:
- "Show GIFs Only": Cycles to show only GIFs, then non-GIFs, then all images.
- "Show Embeds Only": Shows only embedded media (e.g., Twitter or Instagram images).
- Updates the thumbnails and text fields to match what’s shown.
6. Interacting with URLs
- Show Domains:
- Hides thumbnails and shows buttons for each domain (e.g., reddit.com, instagram.com).
- Click a domain to see only URLs from that site in the text fields.
- Go back to images with "Show Images."
- Copying:
- "Copy All URLs": Copies the multi-line text box (images or domain URLs, depending on view).
- "Copy Single Line URLs": Copies the single-line field.
- "Copy All Combined URLs": Copies a unique list of all images and embed URLs together.
7. Managing Changes
- Delete: Removing a thumbnail updates the count and fields, saving the old state so you can undo.
- Undo/Redo:
- "Undo" brings back the last deleted thumbnail.
- "Redo" reapplies the deletion.
- Preserve State: Checking this locks your current filtered list (e.g., only GIFs) so it doesn’t reset when switching filters.
8. Extra Features
- Toast Messages: Little pop-ups at the bottom tell you what’s happening (e.g., "Image removed," "URLs copied").
- Persistent Scroll Setting: Your "Scroll to image" choice saves across uses via localStorage.
Example on a XenForo Forum
Imagine you’re on a thread at thecoli.com with:
- A post with image.jpg and smile.png.
- An Instagram embed (
https://www.instagram.com/p/abc123/).
- A link to
https://erome.com/a/xyz789.
What Happens:
- The panel opens, showing image.jpg as a thumbnail (skips smile.png because it’s in /styles/).
- The text fields show image.jpg initially.
- Click "Show Domains," and you see buttons for instagram.com and erome.com. Click one, and the fields show
https://www.instagram.com/p/abc123/
or https://erome.com/a/xyz789.
- Check "Scroll to image," click the image.jpg thumbnail, and the page scrolls to that image in the thread.
Why It’s Useful
- Saves Time: Quickly grab all media without manually copying links.
- Organizes: Separates images from embeds and lets you filter by type or domain.
- Interactive: Scroll to images or tweak the list without refreshing the page.
This tool is tailored for XenForo forums but works on any site, adapting to its content. Let me know if you need more details or tweaks!
pastebin.com/wyNVT3uX