CSS and Forums

[ViagraFalls]

jimi,

I basically just defined a "maxAllowed" integer value. I intend to reuse the control throughout the site, and thus have written it with that in mind.

For now, the idea will be to implement the control on a page, and at runtime decide how many files a user should be able to upload. Some of the settings I am working with include the ability to:

- Specify what title to give the label (if blank, the control will adapt its total width in order to not leave any whitespace on the form)
- Specify the number of allowed files. Defaults to 5, but it can also be one (for instance, in the case of an avatar picture) or n.
- Specify the desired width of the label (defaults to 100, and as stated above, will be 0 when the title is blank).
- Specify the desired width of the upload control. Defaults to 300.
- Specify the maximum allowed size of a file. Defaults to 200kb.
- Specify the maximum width of an image.
- Specify the maximum height of an image.
- Specify whether the file is limited to images only.
- Specify whether the file is supposed to represent an avatar picture.

I implemented some logic already, but plan on potentially including your thumbnails suggestion as well.

Take for instance an avatar picture. If the site owner would set this flag to yes, a few things should happen:

1) It should be 1 file only.
2) Obviously, it can only be an image, so that flag is set to true.
3) The desired width and height should be limited. For now, I think it’s sufficient to hard-code these values. However, a neater solution might be to actually set those values in a configuration file or class.
4) The maximum file size should also be limited. As above, and whichever value is smaller will end up deciding whether the image should be cropped or not).
5) Thumbnails should not be necessary for avatars, so that flag defaults to false.

I do intend to add a bit more logic, For instance to ensure the image retains its quality, and if the width would be reduced by 50%, the height does the same. You get the picture though ;)

Once I finish that, perhaps you can beta-test the functionality, and add the S3 stuff you have? I feel that when we get both functionalities incorporated, we’d end up with a very useful all-round control for the site.

I'm not sure yet on the eventual UI bits and pieces, but perhaps you and others have ideas (I would prefer ending up with a sort of "paged" gallery containing pictures uploaded by a single user, that they can access when typing a forum/post or article, and which (just maybe) automatically inserts the picture into the post/article.

I'm not sure if I will go quite that far with things though. It's what I would envision the "end-result" to be like. However, my current priority list differs a bit ;)

Cheers.

Peter


http://entropia-online.blogspot.com/

[jimibt]

Peter,

here's a quick 'n' dirty with the S3 stuff using metabuilders multi upload control. i make no apologies for the slightly slap-dash code (stuff like the thumbnail creation shouldn't really exist inside the amazon S3 section but hey, we're on a deadline!!), this can be smoothed out once you've got it running as you want it:

http://www.originaltalent.com/downlo...teS3Upload.zip

give it a quick whirl. ultimately, i think your control sounds more fully featured that the metabuilders one by quite a bit, it's (metabuilders) 'saving grace' being that it's been in use 'in the wild' for quite some time, so wondering if they could be interchangeable until such time as your control is completed??.

[edit] if you don't already have it, make sure you've got the firefox S3 Organiser, it's handy for just viewing the folders and files that you already have up on S3.

jimi

http://www.originaltalent.com

[ViagraFalls]

I think I'm pretty much done for now... For now, I have two open issues:

- I need to try and come up with a way to properly return an n amount of fileurls, where the files have been uploaded, and an equal amount of thumburls, pointing to the location of the urls of the thumbs, so the user will
be able to copy/paste these. My code (for now) uses the old way Marco coded it, and just creates a "/thumbs" folder within the Uploads folder.
- I have cheated a bit... While I implemented max sizes for the thumbnail's width and height as well, the code (at this moment) only ensures the original is no bigger than the specified values. It then uses the maxWidth setitng to calculate the proper heigth, in order not to mess up the proportions. (Which potentially means that if the heigth is bigger than the width, you'd end up with a larger than specified heigth.

Brain is overheated at the moment, so I have to call it a night for now. I'll try and test the component a bit tomorrow, and see if I can figure out proper ways to handle things. I'll then upload it so you guys can have a go at it.

If no bugs are discovered, I'll rework the code a bit more, in order to cater to different locations to store the files (like jimi's S3. Unless, of course, jimi feels inspired to add that bit to the existing code ;)). Also, I'd lean more towards storing the location of the pictures in a database, rather than in an XML file, so I'll try and see if I can do something with that as well. My reasoning is that I'll most likely end up coding some kind of control that picks a few random pictures out of the database.

Any thoughts are welcome.

I cannot commit to finishing up the mentioned functionality, as I promised the missus I'd work on Private Messages and Forumcategories during the weekend ;)

Cheers,

Peter

http://entropia-online.blogspot.com/

[jimibt]

quote:Originally posted by ViagraFalls

I cannot commit to finishing up the mentioned functionality, as I promised the missus I'd work on Private Messages and Forumcategories during the weekend ;)

Cheers,

Peter

http://entropia-online.blogspot.com/

isn't she the lucky one :). i'll also get back a bit later next week on other things, out 'playing' (in my band), for the next 3 nights.

later

jimi

http://www.originaltalent.com

[ViagraFalls]

Woot!

I managed to solve my CSS problems. I've been reading, and puzzling, and debugging, and testing, and I think I actually cracked the puzzle.

Here's what I did:

1) Removed the absolute positioning from both the right and left column in CSS, and set them to float (left to left, and right, to right).
2) I gave the middle col margins equal to the width of the left and right column.
3) Found out that the cols are all wrapped within container and container2 classes. Cursed those a few times, then set their background-color to my background color, and removed width settings from those.
4) Removed the width from the postBody setting, and gave the div in the ShowThread an id of "post".
5) Added the following piece of Javascript to the ShowThread page:

// get a reference to the width of the window
// as well as to the width of the left- and rightcol
var documentWidth = window.document.documentElement.clientWidth;
var leftCol = window.document.getElementById('leftcol');
var wLeftCol = leftCol.offsetWidth;
var rightCol = window.document.getElementById('rightcol');
var wRightCol = rightCol.offsetWidth;

var postDiv = window.document.getElementById('post');
postDiv.style.width = (documentWidth - (100 + wLeftCol + wRightCol)) + 'px';

I then added an onload and an onresize event to the sript, and presto. One thing that confuses me is the value of 100 I need to put in. I figured if I have the width of the window (which in my case came to 1260), and substracted the width of the right and left col (both at 240). This ensured the width of the post div was right, but it was slightly over my rightcol. I just played a bit with it, and 100 proved to be rather alright.

http://entropia-online.blogspot.com/

[jimibt]

Peter,

could you upload a zip of those mods somewhere as i'd quite like to try them out too. my plan is to have a bit more control over the posts view and in general, the entire css layout. to date, i've done minimal work in this area, so would like to 'see' what you've done and test it within my own current implementation if possible.

btw - how did you get on with the S3 stuff i uploaded for you??

jimi

http://www.originaltalent.com

[ViagraFalls]

jimi,

I'll create a zip for you tonight. It's basically just the template.master I had to do a little work on (the centercol will need to be the last of the cols defined), the CSS file, and the showthreads page. I'll zip 'm up and link them tonight or tomorrow.

I didn't check the S3 stuff yet. I have been meaning to run some tests with the upload control I worked on, but got distracted by other things. I'll have a few days off next week, and I'll be sure to give things a whirl then :)

I know that despite my users mostly complaining about proper forum stuff, introducing an image bucket for them will be a welcome addition to the site :)

Cheers,

Peter

http://entropia-online.blogspot.com/

[jimibt]

Peter,

thanks for that (re zip later). once more, i've thought of an addition for the threads which might be quite nice and i'd be interested in opinions. the idea is very basic and is just the addtion of a 'favourites' (add/remove) option on each thread. this would mean that each user could have a 'dashboard' webpart that contained any threads that they'd marked as 'favourite'. unchecking the favourite (i.e. it would read as 'remove favourite' on a fave selected thread) link would set it back to being just a bog standard thread (as far as they were concerned).

anyway, just wondering how useful or otherwise that'd be.

jimi

http://www.originaltalent.com

[ViagraFalls]

In vB, that option does exist. I think any thread you reply in automatically is added to a subscription list, while you also have an option to manually add a thread to it.

I've added a top link to an anchor at the top of the ShowThread page in the title of every single thread so far, and I will most likely do the same for postIDs. This will enable users to quickly navigate to a single post within a thread (one thing my users have already suggested is a "New posts since last visit" option, where that technique would work wonders :)).

Update: Little point of interest I still need to explore: I initially planned on adding the top-text to the post-title div. However, I want the top-text to be on the very right of the title-section. I tried creating a nested div, but that only ended up adding an extra "line" to the title-div. Anyone know of a quick fix for that? Perhaps a label with a text-algin right? (Just making this up as I go).

I'm just wondering how we'll ever be able to deliver things *L* There's three of us doing all kinds of stuff, and I bet it'd be nice to have a merge of a bunch of useful forum additions at some point. (I.e. a combinaton of what now is your forum extensions, your search module, Maxxim's pager (which I'm in the process of rewriting to a usercontrol), my HumanizeDates, and other stuff we manage to come up with).

If we manage to somehow merge all of that into a single module, it'll enable others to easily merge this into the existing TBH forums, and be on their merry way with some added functionality.

Any thoughts/ideas?

Cheers,

Peter

http://entropia-online.blogspot.com/

[jimibt]

Peter,

i still think a v2 of the bare-bones TBH release is required where it's organised as i mentioned in this post:

http://p2p.wrox.com/topic.asp?TOPIC_ID=65800

that way, most NEW functionality can be 'self contained' and there's no need to paste bit's of code into existing config files etc, etc..

i've already adopted this 'pattern' for my site and amended my flixon templates to organise in the same way.

jimi

http://www.originaltalent.com