ImageDox turns a Blogger site into a practical media library: keep images and supported YouTube embeds in published gallery posts, then browse, preview, search, and copy their URLs or HTML from one clean interface. This guide explains how to set up ImageDox v1.0, work with multiple galleries, and resolve the most common issues using the features actually included in the template.
Unlike a conventional blog theme, ImageDox is designed around an interactive homepage. Your published Blogger posts act as media collections; the public feed supplies their content to ImageDox. You do not need to create a cloud-storage backend or manually register each gallery URL.
Version covered: ImageDox v1.0, released November 2, 2026. Live demo · Template page and download.
1. How ImageDox Works
- Install the ImageDox XML on a Blogger blog.
- Review site access, feed, and search visibility settings.
- Create a Blogger post containing images or supported YouTube iframe embeds.
- Add the exact label
ImageDoxGallery, then publish the post. - Open the ImageDox homepage and select that post under Choose gallery feed.
- Preview images, search the selected gallery, copy links or code, and update media through the Blogger editor.
2. Before You Begin
- A Google account with access to a Blogger blog and permission to publish or edit posts.
- The ImageDox XML file and a backup of any existing theme.
- A publicly accessible blog and published gallery posts with the exact label
ImageDoxGallery. - A public Blogger post feed set to Full, so ImageDox can read the images and embeds in post HTML.
- A modern browser with JavaScript enabled; HTTPS is recommended for dependable clipboard support.
Public does not mean searchable, and unindexed does not mean private. The public feeds and published posts required by ImageDox can still be accessed by anyone with their URLs, even when you ask search engines not to index them. Do not use this setup for confidential files.
3. Install the ImageDox XML
- Open Blogger Dashboard and select the intended blog.
- Go to Theme, open the menu beside Customize, choose Backup, and download a copy of your existing theme.
- In the Theme menu, choose Restore or the option to upload a theme, depending on your Blogger interface.
- Choose the extracted
.xmlfile for ImageDox v1.0. Do not upload a ZIP package. - Open the blog homepage and verify that the feed selector, generator buttons, gallery toolbar, and light/dark toggle appear.
- Create or select a published gallery post to test the workflow; an empty initial gallery is expected if none exists.
Not a Layout-based theme: ImageDox intentionally includes no active Blogger Layout gadgets. The Layout editor displays a notice instead of a normal gadget manager. Build media collections through Posts, not Layout.
4. Essential Blogger Settings
Settings names follow Blogger’s dashboard terminology. Some controls may appear in different positions as Blogger updates its interface. These are recommendations for ImageDox, not hidden settings provided by the template.
| Setting | Where | Recommended approach | Why it matters |
|---|---|---|---|
| Blog title | Settings → Basic | Use a short, descriptive library name | The title appears as the ImageDox text logo. |
| Description | Settings → Basic | Summarize your media library | Gives people and search engines useful context. |
| Blog access | Settings → Permissions | Keep reader access public | The gallery relies on public posts and feeds. |
| Visible to search engines | Settings → Privacy | On for a searchable site; Off if discovery is not wanted | This is a search visibility preference, not an access restriction. |
| HTTPS redirect | Settings → HTTPS | Enable when available | Supports secure access and clipboard APIs. |
| Enable search description | Settings → Meta tags | Enable, then write a useful blog description | Avoid unclear or duplicated metadata. |
| Custom robots.txt | Settings → Crawlers and indexing | Leave disabled unless you have a specific validated need | Custom rules can block pages or feed access. |
| Custom robots header tags | Settings → Crawlers and indexing | Optional, only for intentional noindex choices | Allows different indexing rules for home, archives and posts. |
| Allow blog feed | Settings → Site feed | Full | Required to read the complete post HTML and discover media. |
| Image lightbox | Settings → Posts | Optional | ImageDox includes its own separate gallery lightbox. |
| Comments | Settings → Comments | Choose according to your publishing needs | The ImageDox homepage does not render a conventional comments interface. |
Choose an indexing approach
| Approach | Homepage | Gallery posts and archives |
|---|---|---|
| Personal, public-link library | Turn Visible to search engines off; optionally set homepage noindex if deliberately configured | Published URLs remain publicly accessible; noindex may be used for posts, but does not make them private. |
| Searchable media library | Allow indexing and provide useful homepage description | Consider noindex for supporting gallery posts or archive/search pages only if you intentionally do not want those URLs in search results. |
Index/noindex are directives about search-result inclusion; Allow/Disallow in robots.txt regulate crawler access. Blocking a URL from crawling can prevent a crawler from seeing its noindex directive. Avoid blanket robots.txt disallows for all posts or feed URLs. For targeted post controls, review Blogger’s Custom robots tags options and Google Search Console.
If Allow blog feed is set to Short, Until Jump Break, or None, ImageDox may receive incomplete markup or no usable gallery content. Set it to Full and check that any custom post-feed settings also provide full content.
5. Understand the One-Page Layout
ImageDox displays a custom media-library homepage rather than traditional post cards, older/newer post pagination, or a native Blogger comment section. Underlying gallery posts still exist at their own public Blogger URLs; selecting a gallery on the homepage changes the displayed collection without navigating to a separate article page. The built-in gallery pagination shows additional media cards, not additional standard blog posts.
6. Create Your First Gallery
- Open Blogger → Posts → New post.
- Give the post a descriptive gallery title such as Product Photography Collection.
- Add the label
ImageDoxGalleryexactly as written; capitalization and spelling must match. - Insert one or more Blogger-hosted images, or supported YouTube iframe embeds.
- Click Publish rather than leaving the post as a draft.
- Return to ImageDox and reload the homepage if necessary.
- Open Choose gallery feed and select the newly published post title.
- Confirm its media appears. Use Refresh gallery after subsequent edits.
Multiple galleries: publish additional posts using the same label. Each post becomes a separate option named after its post title—no manual gallery registration field or pasted editor URL is needed.
7. Upload Images in Blogger: Compose or HTML?
| Editor mode | Best for | Important details |
|---|---|---|
| Compose | Standard image uploads and adding several images | Use Insert image, choose the files, and set display size where available. |
| HTML | Precise markup, custom alt text and generated snippets | Useful for pasting Image SEO HTML or supported YouTube iframe code. |
- Open the selected gallery post in Blogger.
- In Compose view, choose Insert image and select one or more images.
- Where appropriate, choose Original size rather than a small display preset if you intend to copy a higher-resolution image URL.
- Add descriptive alt text and a useful title where relevant; then publish or update the post.
- Return to ImageDox and choose Refresh gallery.
ImageDox examines each post’s HTML for <img> elements. When an image sits inside an <a> link to a supported Blogger image URL, the linked URL is preferred; otherwise ImageDox uses the image src. It accepts HTTPS images from supported Google/Blogger image hosts. Unsupported external image hosts are not automatically added to the gallery.
<a href="https://blogger.googleusercontent.com/img/b/EXAMPLE/s1600/photo.jpg"><img src="https://blogger.googleusercontent.com/img/b/EXAMPLE/s640/photo.jpg" alt="Blue ceramic mug on a desk"/></a>
Image quality: choosing Original size can affect the inserted image URL, but Blogger may compress or optimize uploads. It does not guarantee the original uncompressed master. Inspect the copied URL and the delivered image dimensions before reusing it for print or high-resolution output.
8. Update Media with Open upload popup
- Select a gallery first from Choose gallery feed.
- Click Open upload popup to open the editor for its underlying Blogger post.
- Sign in to the Google account that has edit permission if Blogger asks.
- Add, remove, or reorder media in that post using the Blogger editor.
- Click Update.
- Return to ImageDox and click Refresh gallery; returning from the popup may also trigger a refresh automatically.
The popup does not upload directly to ImageDox. The actual upload and edit take place in Blogger, and ImageDox subsequently reads the updated public post feed.
Account-route limitation in v1.0: the editor link is constructed with a fixed /u/9/ Google account path. This may open the wrong account or an unexpected Blogger screen on installations with a different account order. Switch to the correct Blogger account and open the selected gallery post from Posts if needed. There is no automatic account selector in this release.
9. Work with Multiple Galleries
ImageDox scans the public feed for posts labeled ImageDoxGallery, uses their published titles in the dropdown, and lists them by publication time. Feed discovery fetches entries in batches, so a large number of labeled posts can be discovered without maintaining a manual list. Choose a different post to replace the media shown on screen. If a recent post is missing, confirm that it is published and labeled correctly, reload the page, or use Retry if feed discovery reports an error.
10. Gallery Views, Search and Load More
| Control | What it does |
|---|---|
| Masonry | Default on each reload; follows varying image heights. |
| Grid | Uses equal-height square gallery tiles. |
| Media count | Shows the media count for the selected post. |
| Search image or video | Filters currently loaded gallery data by media URL or name; it is not a whole-site search. |
| Copy all URLs | Copies URLs for all detected items in the selected gallery, not only cards currently visible. |
| Load More | Adds the next 20 media cards to the current display. |
Load More reduces the number of rendered cards and the immediate image-loading burden. It does not split a gallery post into separate feed requests: ImageDox reads the selected post’s full HTML in one feed response.
11. Copy Image URLs and HTML
| Action | Output | Use it for |
|---|---|---|
| Copy URL — image | Direct image URL | Embedding an existing image in supported places. |
| Copy HTML — image | An <img> element | Pasting image markup into an HTML editor. |
| Copy URL — YouTube | Standard YouTube video URL | Sharing or linking to a video. |
| Copy Embed — YouTube | An iframe embed inside a youtube-embed wrapper | Adding a video player to suitable HTML content. |
| Copy all URLs | Newline-separated media URLs | Collecting the URLs from the selected gallery. |
<img src="https://blogger.googleusercontent.com/img/b/EXAMPLE/s1600/photo.jpg" alt=""/>
The gallery’s basic Copy HTML action uses an empty alt attribute. If the image conveys information, add an appropriate description before publishing the snippet, or use the Image SEO generator to produce more complete markup. Clipboard behavior is most reliable on HTTPS pages.
12. Preview Images and Zoom
Click an image card to open the built-in ImageDox lightbox. Use Previous/Next, Zoom In/Out, Reset, and Close; the zoom scale ranges from 1× to 4×. Supported keyboard commands include the left and right arrow keys, Esc to close, +/- for zoom, and Ctrl/Cmd plus mouse wheel where available. Clicking the image also toggles zoom. This preview is separate from Blogger’s native post-image lightbox.
13. Add and Preview YouTube Videos
ImageDox detects supported YouTube <iframe> elements in gallery post HTML. For supported IDs, it creates a thumbnail card and starts an embedded player only when the visitor opens the video preview. Supported URL parsing includes regular youtube.com/watch?v=, youtu.be, and supported /embed/, /shorts/, or /live/ paths; gallery detection specifically reads iframe src values. Arbitrary video platforms are not recognized.
<div class="youtube-embed"> <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="Example YouTube video" loading="lazy" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> </div>
This code demonstrates the expected embed structure; replace the example video ID with your own permitted video. A private, unavailable, removed, or embedding-restricted YouTube video may fail to play even if its thumbnail is detected.
14. Use the Image SEO Generator
Click Image SEO in the header, or open it through the mobile hamburger menu. The generator builds image HTML; it does not upload files.
| Field | Purpose |
|---|---|
| Image URL | Required image link; dimensions are probed from the image served by this URL. |
| SEO Alt Text | Required, descriptive alternative text without keyword stuffing. |
| Image Title | Optional title attribute. |
| Width / Height | Detected automatically when possible; editable positive pixel values. |
| Loading | Choose Lazy for offscreen images or Eager for a high-priority image visible immediately. |
| Create Code / Copy HTML | Generate and copy the finished snippet. |
- Open Image SEO and paste a valid image URL.
- Allow a moment for dimension detection, or enter correct width and height manually.
- Write natural alt text describing what is actually shown.
- Choose Lazy or Eager loading according to placement.
- Click Create Code, then Copy HTML.
- Paste into your Blogger post using HTML view, and verify that it renders properly.
<img src="https://blogger.googleusercontent.com/img/b/EXAMPLE/s1600/photo.jpg" alt="Minimal workspace with a laptop and notebook" title="Minimal workspace" width="1600" height="900" loading="lazy" decoding="async"/>
Correct width and height values help the browser reserve space and can reduce layout shifts. loading="lazy" delays offscreen image loading; loading="eager" requests early loading. decoding="async" permits asynchronous image decoding. These attributes should match the page context, not be added mechanically.
15. Use the YouTube Embed Generator
- Open YouTube Embed from the header or mobile menu.
- Paste a supported YouTube URL, including a valid Shorts URL if applicable.
- Add an optional descriptive video title.
- Click Create Code and then Copy Embed.
- Paste the generated markup into Blogger HTML view and publish or update the gallery post.
The generated code includes a responsive youtube-embed wrapper and an iframe with loading="lazy", a title, the supported playback permissions, referrerpolicy="strict-origin-when-cross-origin", and allowfullscreen. It embeds a video; it does not upload a video to Blogger.
16. Header, Appearance and Mobile Controls
The text logo uses your Blogger blog title followed by a colored dot. Desktop actions include Image SEO, YouTube Embed, and a light/dark theme toggle. On narrow screens the hamburger menu contains those three controls. Light mode is the initial default; the selected light or dark preference is stored in the browser. There is no dedicated System/Auto theme mode.
17. DRAG WIDTH: Desktop Gallery Workspace
On larger desktop viewports, use the right-side DRAG WIDTH handle to resize the centered content area horizontally. Click it to alternate between the standard and available wider view. The handle uses a repeating attention animation that pauses while hovered or dragged, and keyboard left/right arrows can adjust its width. The width resets after reloading; it is not a tool for editing or resizing image files. The handle is hidden on smaller screens.
18. Collapse Sections to Save Space
The section headings Your personal image library, the gallery section, and How to get started each include an expand/collapse button. Collapsing hides the section body in the interface; it does not delete media or change Blogger posts.
19. Troubleshooting
| Problem | Likely cause | What to do |
|---|---|---|
| Gallery dropdown is empty | No matching published posts, incorrect label, or inaccessible feed | Publish a post with ImageDoxGallery; set feed to Full and reload. |
| New gallery not listed | Post still a draft or feed has not refreshed | Publish it, check the label, and refresh the page. |
| Gallery shows zero images | No supported img/iframe markup or partial feed | Inspect HTML view and confirm Site feed = Full. |
| Images missing despite upload | Image served from unsupported host or non-HTTPS URL | Use Blogger-hosted HTTPS image markup. |
| Copied image looks small | The URL refers to a reduced-size variant | Check image URL and editor size selection; do not assume Original size is lossless. |
| YouTube card missing | No supported YouTube iframe src detected | Use the built-in YouTube Embed generator and insert its output into post HTML. |
| YouTube cannot play | Video is restricted or embedding is disabled | Test playback and permission on YouTube. |
| Open upload popup blocked | Browser blocked a new window | Allow popups for this site; alternatively open the post from Blogger Posts. |
| Popup opens wrong account | Fixed /u/9/ account route | Switch to the account owning the blog and open the intended post manually. |
| Popup shows a post list | Editor route or account does not match | Navigate through Blogger Posts; edit the selected gallery by title. |
| Updated images do not show | Public feed not refreshed yet | Click Refresh gallery and retry after Blogger updates its feed. |
| Refresh times out | Feed/network problem | Confirm feed availability, connectivity and post publishing; use Refresh gallery. |
| Retry appears | Gallery list discovery failed or is incomplete | Check public feeds and click Retry. |
| Copy fails | Clipboard permission or unsupported browser context | Use HTTPS and a current browser; manually select the snippet if needed. |
| Image dimensions unavailable | URL cannot be loaded or probed | Enter correct dimensions manually or use a working image URL. |
| Theme looks incorrect | Wrong XML or stale browser cache | Restore the original ImageDox XML and hard-reload. |
| Dark mode resets | Browser storage disabled/cleared | Allow browser storage; change the toggle again. |
| Lightbox behaves oddly | Zoomed image or unsupported key interaction | Press Reset Zoom or Esc and reopen the preview. |
| Feed list incomplete | Feed paging/network timeout | Use Retry, then verify all gallery posts have the required label. |
20. Performance and Lighthouse
ImageDox uses a compact, single-page interface with Blogger’s existing public post feeds rather than a separate cloud service. Images are rendered lazily in gallery batches, and YouTube cards use thumbnails until playback is requested. The initial visible media batch is limited to 20 cards; however, the selected post’s HTML is retrieved as a whole. Images with appropriate dimensions and sensible resolutions help avoid layout shifts and unnecessary transfers.
21. Limitations and Good Practices
- Gallery discovery depends on public Blogger feeds, published posts, and the exact
ImageDoxGallerylabel. - ImageDox does not provide private media protection, its own login system, or a separate cloud storage backend.
- Blogger-hosted uploads may be optimized or compressed; original file fidelity is not assured.
- There are no standard Layout gadgets, native comments, or conventional multi-page post lists in the ImageDox homepage.
- Published post URLs may remain accessible even if the homepage is designed as a one-page library.
- Use appropriately licensed media and respect the policies of Blogger and third-party services.
- Keep one descriptive gallery per post when useful, and test copied URLs before embedding them elsewhere.
22. Frequently Asked Questions
Is ImageDox free?
ImageDox v1.0 is presented by BloggerTheme.net as a Premium Free Blogger template. Check its official template page for the current download.
Can I create multiple galleries?
Yes. Publish multiple posts labeled ImageDoxGallery; each appears as a separate choice in the gallery dropdown.
Does ImageDox require Google Cloud or Firebase?
No separate Google Cloud, Cloud Run, Cloud Build, Firebase, or additional upload backend is configured in this release.
Do I need a custom domain?
No. You can use a standard blogspot.com address. HTTPS remains recommended.
Why must my gallery posts be published?
ImageDox retrieves media through the public post feed. Drafts are not available in that public feed.
Can I keep the library out of Google Search?
You can disable Visible to search engines and use suitable noindex directives where applicable, but that does not make public posts or image URLs private.
Can gallery posts be noindexed separately?
Blogger provides custom robots tag controls for posts/pages. Use them carefully, and avoid preventing the media feeds from working.
Should Visible to search engines be enabled?
Enable it for a publicly discoverable media library; otherwise leave it off. This choice affects search discovery, not reader authentication.
Why is Full blog feed required?
ImageDox parses the complete HTML of each published gallery post to find supported media. Short or disabled feeds may omit it.
Does Original size preserve the uncompressed uploaded file?
No. Blogger can optimize uploaded images. Confirm the resolution and quality delivered from the URL.
Can I upload with Blogger Compose view?
Yes. Compose is recommended for routine image uploads; HTML view is useful for specialized markup.
Can I paste my own image or iframe HTML?
Yes, provided it uses image sources or YouTube iframe formats recognized by the current gallery parser.
Does ImageDox support YouTube Shorts?
The YouTube URL parser recognizes supported /shorts/ links; for gallery cards, insert the supported iframe embed rather than a plain link.
Can I reuse copied image URLs elsewhere?
ImageDox copies the source URL or HTML, but availability, permissions, and usage rights depend on the hosting and intended use.
Why does the upload popup open the wrong account?
This XML uses a fixed /u/9/ account route. Switch to the correct Google account and open the gallery post manually if necessary.
Does ImageDox have dark mode?
Yes. It offers Light and Dark, with the selected preference stored locally in the browser.
Can I change the gallery width?
On larger desktop screens, DRAG WIDTH adjusts the workspace width temporarily; it resets after reload.
Why are gallery changes not visible immediately?
The edited Blogger post must be updated, then ImageDox must reread its public feed. Use Refresh gallery and allow for normal feed update delays.
23. Final Setup Checklist
- Install ImageDox v1.0 and save a backup of the previous theme.
- Review blog access and whether the library should appear in search results.
- Set Allow blog feed to Full.
- Publish at least one gallery post with
ImageDoxGallery. - Upload images and select Original size when appropriate.
- Confirm the post appears in Choose gallery feed.
- Test Open upload popup, Update, and Refresh gallery.
- Test Copy URL, Copy HTML, search, Masonry/Grid, and Load More.
- Test Image SEO and YouTube Embed generators.
- Review light/dark mode, mobile layout, and indexing choices.
ImageDox works best when gallery posts are consistently labeled, media URLs are checked, and public feeds remain accessible. For a working example, visit the ImageDox demo. Find the template at BloggerTheme.net and other guides at BloggerTheme documentation.
