inline attachment image links

Post Reply
User avatar
cmloegcmluin
Site Admin
Posts: 1700
Joined: Tue Feb 11, 2020 3:10 pm
Location: San Francisco, California, USA
Real Name: Douglas Blumeyer (he/him/his)
Contact:

inline attachment image links

Post by cmloegcmluin »

The current behavior when clicking on thumbnail images for inline attachments is: basically nothing. If you inspect what's happening with the browser dev tools, clearly some scripts are running and changing some style classes, but nothing major.

This has been bothering me for some time. I think it would be great if when I attached an image to my post and included it inline, that when somebody clicked on, a new tab would pop up in their browser with the full-size image. Unfortunately the attachment tag's BBCode is not editable like other tags (such as anchor, audio, etc., which we have made recent improvements to).

This solution worked for me:
https://www.phpbb.com/community/viewtop ... #p15033581

In order to get the needed file ID before posting, I had to click "Preview" and then open the browser dev tools.

Demonstration:

[url=http://forum.sagittal.org/download/file.php?id=134]
	[img]http://forum.sagittal.org/download/file.php?id=134[/img]
[/url]

results in:

Image


I did also have to cancel out of my original post and start a new one in order to avoid the duplication of the image, once in its non-inline attachment form, and once as the img tag.

The orange underline due to the url tag is suboptimal, but it'll do.
Last edited by Dave Keenan on Thu May 28, 2020 8:48 am, edited 1 time in total.
Reason: Displayed BBCode source
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: inline attachment image links

Post by Dave Keenan »

Thanks for that.

You can wrap [url] tags around any kind of image, including smilies :#: and emoji :smiley_cat:.

I think the underline is useful in alerting the reader to the fact that the image is clickable.

I note that your example above wasn't really a thumbnail. The inline image was full size. Here's how to make it a thumbnail:

[url=http://forum.sagittal.org/download/file.php?id=134]
	[image=50]http://forum.sagittal.org/download/file.php?id=134[/image]
[/url]

results in:




The number after "image=" is the desired width in pixels.

BTW, while you did indeed improve the [anchor], [audio] and [audio_controls] BBCodes, they are not part of the standard phpBB install. Like most of the other admin-editable BBCodes, I created them.
User avatar
cmloegcmluin
Site Admin
Posts: 1700
Joined: Tue Feb 11, 2020 3:10 pm
Location: San Francisco, California, USA
Real Name: Douglas Blumeyer (he/him/his)
Contact:

Re: inline attachment image links

Post by cmloegcmluin »

:thumbsup:
User avatar
Dave Keenan
Site Admin
Posts: 2180
Joined: Tue Sep 01, 2015 2:59 pm
Location: Brisbane, Queensland, Australia
Contact:

Re: inline attachment image links

Post by Dave Keenan »

cmloegcmluin wrote: Thu May 28, 2020 8:31 am In order to get the needed file ID before posting, I had to click "Preview" and then open the browser dev tools.
You can obtain the URL of an attachment before submitting the post, by clicking on the Attachments tab below the edit pane, right-clicking on the file-name, and choosing Copy link location or similar. The file-names don't look like links until you hover over them.
I did also have to cancel out of my original post and start a new one in order to avoid the duplication of the image, once in its non-inline attachment form, and once as the img tag.
I have now made it so an image attachment is only ever shown as a link, the same as other attachments, unless you put its URL inside [img] or [image=width] tags as shown above.
User avatar
cmloegcmluin
Site Admin
Posts: 1700
Joined: Tue Feb 11, 2020 3:10 pm
Location: San Francisco, California, USA
Real Name: Douglas Blumeyer (he/him/his)
Contact:

Re: inline attachment image links

Post by cmloegcmluin »

Thanks for the improvement! I went back and used it on my 140th and 75th mina posts w/ the detailed diagrams.
Post Reply