Skip to content

Add linked image syntax without fancybox gallery#116

Merged
pjohnst5 merged 5 commits intomainfrom
copilot/add-image-display-functionality
Dec 22, 2025
Merged

Add linked image syntax without fancybox gallery#116
pjohnst5 merged 5 commits intomainfrom
copilot/add-image-display-functionality

Conversation

Copy link
Contributor

Copilot AI commented Dec 20, 2025

Adds support for clickable images that link to URLs without triggering the fancybox gallery. Useful for images that should navigate to another page rather than open in a lightbox.

Changes

  • New transformLinkedImages function: Processes [![](image.png)](url) pattern before standard image processing

    • Renders as <figure> with <a> wrapper (no data-fancybox)
    • Applies same logic as transformCaption for target attribute: external links (starting with "http") get target="_blank", internal links do not
    • Supports optional caption: *caption text* with markdown processing
    • Handles all image formats: png, jpg, jpeg, gif, svg
  • Fixed transformLinksToTargetBlank: Now skips links that already have target="_blank" to avoid duplicate attributes

Usage

External link (opens in new tab):

[![](./diagram.png)](https://external-docs.com/detail)
*Click to view full documentation*

Generates:

<figure class="text-center">
  <a href="https://external-docs.com/detail" target="_blank">
    <img src="/images/diagram.png" />
  </a>
  <figcaption>Click to view full documentation</figcaption>
</figure>

Internal link (same tab):

[![](./diagram.png)](/internal/page)
*Navigate to internal page*

Generates:

<figure class="text-center">
  <a href="/internal/page">
    <img src="/images/diagram.png" />
  </a>
  <figcaption>Navigate to internal page</figcaption>
</figure>

Standard image syntax ![](image.png) continues to use fancybox gallery behavior.

Original prompt

Add functionality to mmarkdownnext.go that allows the user to put something like this


some caption, but sometimes might not have a caption

Which does NOT do fancy box (but still displays the image in a figure element with caption if provided or without if not provided)

When clicking this image, it should open the link in a new tab


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@pjohnst5
Copy link
Owner

@copilot tou can actually just take the caption (if it's there) and call the existing transformCaption function (ignore what I said about opening it in new tab, just use the existing transformCaption logic)

Copilot AI and others added 2 commits December 20, 2025 19:11
- Add transformLinkedImages function to handle [![](image.png)](url) pattern
- Support optional caption with *caption text*
- Generate figure elements with target="_blank" links
- Do NOT include data-fancybox attribute for linked images
- Update transformLinksToTargetBlank to avoid duplicate target attributes
- Add comprehensive tests for all scenarios

Co-authored-by: pjohnst5 <35265851+pjohnst5@users.noreply.github.com>
- Add explanatory comment for linkedImageRE regex pattern
- Fix absoluteLinkRE regex to properly match all anchor tags with http URLs
- Remove extra blank lines to match existing code style

Co-authored-by: pjohnst5 <35265851+pjohnst5@users.noreply.github.com>
Copilot AI changed the title [WIP] Add functionality to display images with captions in markdown Add linked image syntax without fancybox gallery Dec 20, 2025
Copilot AI requested a review from pjohnst5 December 20, 2025 19:17
Apply same logic as transformCaption for determining when to add target="_blank":
- External links (starting with "http") get target="_blank"
- Internal links (starting with "/" or "#") do not get target="_blank"

This matches the existing behavior throughout the codebase.

Co-authored-by: pjohnst5 <35265851+pjohnst5@users.noreply.github.com>
Copy link
Contributor Author

Copilot AI commented Dec 20, 2025

@copilot tou can actually just take the caption (if it's there) and call the existing transformCaption function (ignore what I said about opening it in new tab, just use the existing transformCaption ...

Done in 2dd48e8. Now following the same logic as transformCaption: external links (starting with "http") get target="_blank", while internal links (starting with "/" or "#") do not.

@pjohnst5 pjohnst5 marked this pull request as ready for review December 22, 2025 22:15
Copy link
Owner

@pjohnst5 pjohnst5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Send it copilot 🚀

@pjohnst5 pjohnst5 merged commit 857e76f into main Dec 22, 2025
15 of 20 checks passed
@pjohnst5 pjohnst5 deleted the copilot/add-image-display-functionality branch December 22, 2025 23:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants