Fixing the display of attachments.

[DrStrangelove]

Hi guys. I have a simple proposal for the display of attachments in phpbb that once implemented should make the whole attachment feature more pleasant to look at and use.

On my discussion board we have a lot of users uploading pictures, and naturally there have been a lot of modifications done to the attachment system. Our users biggest complain was in fact how thumbnails looked and that it was cumbersome to use the upload feature. Some of the modifications were simple to do, and for this reason I recommend they become part of mainline.

* feature hotkeys.: multiple uploads are hard to get right, and a good system would require ajax or something like a flash client. however, we figured that some modest hacks makes uploading many pictures a lot more plesant: hotkeys. what we did on our forum was to display the upload tab by default, and assign the inputs hotkeys. this way you can select a file to upload by pressing Shift+Alt+F, and then attach it with Shift+Alt+A. This saves the user from many clicks, not to mention scrolling the page.

* feature display: phpbb displays attachments vertically which is butt ugly. if you upload 10 pictures, the thumbnails will display in a vertical line and the horizontal space isn't used as it should. currently on our forum we encapsulated each thumbnail in a table, and removed a line-break. this displays the thumbnails using all available horizontal space. now, there is of course a better way to do this. first you'd want to split the attachments that have thumbnails and those who do not into two groups. then you'd display the ones without thumbnails vertically and display the thumbnailed attachments using the horizontal space available (or lock it at an configurable number of thumbnails per line. to account for comments each thumbnailed attachments should be put in a div box where there's set aside some space for the text.

---
Post title.

Post text
Post text
Post text

Attached images:
IMG1 IMG2 IMG3 IMG4 IMG5
IMG6 IMG7 IMG8 IMG9 IMG0

Attached files:
FIL1 - info
FIL2 - info
FIL3 - info
...

These features are all easy to implement so i hope you will consider them.

[DavidIQ]

Those would all be modifications to the template/style and is technically already possible, as you've already done. But I would agree that maybe in the default style (prosilver2?) it should be looked at.

[ahauck]

I completely agree that the thumbnails attached below a post should make use of all the space available, i.e. they should be placed side-by-side if possible. I can't see any reason or benefit in placing them all in a column below each other.

DrStrangelove: can you provide some more details about how you managed this on your board (you mentioned tables for encapsulation and removing a line-break). I probably can figure that out myself but it would take some time and since you already spend time on it maybe you can share your solution...

[DrStrangelove]

@ahauck: Ah... actually I had a co-admin take care of that particular modification. Using tables is easy but not recommended, a good way to do it would be to use DIVs instead and then edit the style-sheet to make the thumbnails display horizontally. I'll attach a diff where the feature is implemented (but it lacks the hacks to the preview page).

[Meis2M]

good idea.. i like it

[igorw]

Could you perhaps post a screenshot? And I'd rather not use tables and inline CSS for the actual implementation.

[DrStrangelove]

The initial post outlined how it would look when implemented.

It's a rather small change so I don't mind submitting a proper patch.
Is one for 3.0.7-pl1 acceptable or does it have to be against 3.1?

[A_Jelly_Doughnut]

A patch against phpBB 3.0.7 would be fine.

[Lone Lycan]

hello folks.. i'm the co-admin that DrStrangelove was talking about... had been extremely busy with other stuff, but finally got back around to this...

Proposed change for thumbnails in rows, without using tables:

Code: Select all

<!-- IF postrow.S_HAS_ATTACHMENTS -->
	<dl class="attachbox">
		<dt>{L_ATTACHMENTS}</dt>
		<!-- BEGIN attachment -->
			<div style="float:left;height:300px">{postrow.attachment.DISPLAY_ATTACHMENT}</div>
		<!-- END attachment -->
	</dl>
<!-- ENDIF -->

naturally the style changes could/should be done in the css,... and just change the dd tag to a div

i..... don't have a safe-for-work example screenshot at the moment..... give me another week or two for that...

[nekkidblogger]

Could embed the attachments in floating div's that all float in the same direction. If they have the same dimension (for thumbnails, for instance), they would keep floating until the horizontal space was too small for one more, and then start filling the next "line".

Easy stuff if classes for images and attachments were allowed or made available.

Best,
Peter