Textpattern Forum

You are not logged in. Register | Login | Help

#371 2010-06-12 09:19:22

thebombsite
Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

Re: Improving TXP Image Management

Is that image meant to link somewhere Stef?


Stuart – The BombsiteProText ThemesTextgarden

In a Time of Universal Deceit
Telling the Truth is Revolutionary.

Offline

#372 2010-06-12 09:29:55

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,713
Website

Re: Improving TXP Image Management

thebombsite wrote:

Is that image meant to link somewhere Stef?

No. It’s just a screenshot of my dev site.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

#373 2010-06-12 17:21:45

Gocom
Developer
Registered: 2006-07-14
Posts: 4,403
Website

Re: Improving TXP Image Management

thebombsite wrote:

Is that image meant to link somewhere Stef?

Remember that depending the forum theme you use, the image might not fit the column well and it might get cut if it exceeds the width. If that is the case, remember to Rclick / View Image.


Rah-plugins | What? I’m a little confused… again :-) <txp:is_god />

Offline

#374 2010-06-13 07:39:27

thebombsite
Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

Re: Improving TXP Image Management

Is it just me Jukka or do you have to keep reminding me of the obvious? ;)

So does the display of the main image on the edit screen have a width or max-width setting or does it always display at full-size?


Stuart – The BombsiteProText ThemesTextgarden

In a Time of Universal Deceit
Telling the Truth is Revolutionary.

Offline

#375 2010-06-13 08:21:53

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,713
Website

Re: Improving TXP Image Management

thebombsite wrote:

So does the display of the main image on the edit screen have a width or max-width setting or does it always display at full-size?

Ah, sorry I misinterpreted your earlier comment! Yes, the image links to its full size counterpart. Nothing fancy at the moment — just shows the raw image in your browser window.

The main image is max-width limited to, ummm, can’t remember. Think it’s 450px at the moment. That’s so it all fits comfortably within 1024 × 768. We tried elastic so it could take advantage of wide screen monitors but it doesn’t work given the fact that the admin side’s container isn’t elastic.

At the moment the 450px is hard-coded so that the <img width> attribute is never greater than 450px. I don’t like this approach and would prefer to allow themes to set it, but for some reason the CSS max-width wasn’t responding to my advances. I put it down to the fact my CSS coding is rather rubbish. If anybody would like to propose some cross-browser style rules that would work to limit the image’s dimensions to a maximum width while allowing smaller images to remain at their native resolution, please let me know how it might be done. I can offer a login to a dev space so someone could have a fiddle with Firebug / the web dev toolbar if required.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

#376 2010-06-13 10:44:56

Gocom
Developer
Registered: 2006-07-14
Posts: 4,403
Website

Re: Improving TXP Image Management

thebombsite wrote:

Is it just me Jukka or do you have to keep reminding me of the obvious? ;)

Yes-ssss!… No :-)

Bloke wrote:

If anybody would like to propose some cross-browser style rules that would work to limit the image’s dimensions to a maximum width while allowing smaller images to remain at their native resolution, please let me know how it might be done.

The max-width should work. There’s nothing else to that, just the img {max-width:450px;}. As for the scaling, I don’t know. Usually scaling looks awful (just like pixel rendered fonts and those XP’s controls) and if the image is just a raw link, it will either force a new tab/window or causes duhs and dohs. I would like to see on-fly resizing with JavaScript. If you click the image it shows the full-sized version and hides (or pushes down) the sidebar — that is if scaling is used.

Other option to scaling is hiding, and showing just part of the high quality image, and presenting a nice message that states something obvious like click here to see the full-sized jadajadajada. But I don’t know about that either — I do know that scaling looks horrible.

Personally to me it is the same if the upload fields are on the right, left or bottom. When they are on the side, it just means that my wide photo won’t fit the screen. And If my thumbnail is huge, I would still have to scroll down, or the image is horrible looking scaled version.

The uploading and creating thumbnails looks bit confusing, atleast for those that do not know how it works, like us do. For someone like our mom or regular non-techie it’s really distracting. There are buttons everywhere. There should be something that makes the forms apart or there could be just one of them showed at once.

For newcomer or non-techie it might look that you can actually use the uploading and cropping at same time, when that is not the case.

Heh, now when there are two columns, I’m seeing my mom asking “where is the caption field for the full-sized image, i see only one for the thumbnail”.

Maybe collapsing and expanding panels could do. You could just create or upload and there would be no possiblity of mixing the two features.

I don’t really mind either way. I can use that thing. It looks cool too, but I don’t really know about the end-user that end up using it.

Last edited by Gocom (2010-06-13 10:52:07)


Rah-plugins | What? I’m a little confused… again :-) <txp:is_god />

Offline

#377 2010-06-13 13:30:28

Bloke
Developer
From: Leeds, UK
Registered: 2006-01-29
Posts: 5,713
Website

Re: Improving TXP Image Management

Gocom wrote:

The max-width should work. There’s nothing else to that, just the img {max-width:450px;}.

I’ll try it again. Perhaps I was just being dim.

Usually scaling looks awful

Yes it does. I don’t know how it handles it if it uses CSS — probably the same!

But I had a bunch of fairly large 2048px-width pictures uploaded and it didn’t look so bad.

if the image is just a raw link, it will either force a new tab/window or causes duhs and dohs.

Yes. The raw link will have to go. It was just a placeholder so I could quickly see how badly the browser scaled :-)

I would like to see on-fly resizing with JavaScript.

Got a script in mind? I could check it out.

Other option to scaling is hiding

Yes, using overflow:hidden would also work with a hyperlink above the picture “View full size image” or something. The link would solve another problem: as it stands EBL_Image_Edit will not work if the image itself is hyperlinked because as you drag over the picture to crop/zoom/resize/whatever, you sometimes trigger the anchor. So I would prefer not to have the picture hyperlinked at all. The only problem with a truncated picture is that you can’t use EBL_Image_Edit (or equivalent) because you can’t see the entire picture at once.

When they are on the side, it just means that my wide photo won’t fit the screen.

True. I hadn’t considered widescreen photos much. Figured they’d just get squatter. But giant pictures at the top of the screen force you to scroll down to get to the meta information area, which is the whole point of the Image Edit page. So I figured that a scaled-down image — sort of a larger version of the thumbnail — was enough to give you:

  1. an overview of the picture; enough that you can make informed choices about what meta data to type in ;-)
  2. the ability to use 3rd party tools to crop/resize/create thumbs from it
  3. minimal / no scrolling to reach the meta & manipulation section

And If my thumbnail is huge, I would still have to scroll down

Another good point. I’ve never used huge thumbnails but theoretically it’s possible so you’re right it needs to cater for this somehow. I guess it’d have to be yucky scaling again with a link to the full size thumb! Incidentally, large thumbs would also impact the grid view — the thumbnails are currently scaled there too. But some kind of per-user pref to control grid cell size might make things more flexible for site authors.

The uploading and creating thumbnails looks bit confusing

Good point. Newbies might not like it. But newbies and veterans alike don’t care for it the way it is now either becuase it’s also not exactly logical!

There are buttons everywhere

Yep. Those are the existing buttons from the existing site layout, just squished over on the right. The markup and position of that will have to change because you’re right, it’s terrible. As for the layout of the buttons — I don’t kow why the Upload buttons are floated right like that. I think it’s because the markup is so bad — tables inside tables inside tables — that it wasn’t possible to get at them easily. Since this mockup was done, the markup has changed dramatically so it may well be easier to figure out a better layout and alter the workflow completely.

btw, I originally had the Replace Image above or below the main image (because it’s related to the main picture) but it looked crap. And also it separated even further the fact that caption/alt might not ‘belong’ to the main image.

For newcomer or non-techie it might look that you can actually use the uploading and cropping at same time, when that is not the case.

Yes. It’s the same now. Yuk!

Maybe collapsing and expanding panels could do.

That would be my preference as well; to group related things together, perhaps using legend boxes like on the right-hand side of the Write tab? But making them collapsible.


The smd plugin menagerie — for when you need one more gribble of power from Textpattern.

Txp Builders – finely-crafted code, design and Txp

Offline

#378 2010-06-13 15:31:59

jameslomax
Member
From: UK
Registered: 2005-05-09
Posts: 391
Website

Re: Improving TXP Image Management

Looks good. I’ve said it before several times so I’m not going to labour it, and others have also, that the Images tab also sucks. That single column display is appalling use of white space, when 5 or 6 columns are possible and would make image navigation much more efficient.

As I recall, someone provided a mock up about 2 years ago showing how the Image tab could look with multiple columns and edit/access features for each image. As I recall also, someone commented that txp uses some kind of locked grid structure to organise the thumbs in that tab, that would have to be rebuilt from the beginning – its not just a css modification. However, is this also being considered? And is there any interim modification to improve the Images tab, if this is a big job? Seems to me, with the various plug ins that change the Admin interface quite drastically, something similar could be done with the Image tab design…..

Offline

#379 2010-06-13 16:14:29

thebombsite
Plugin Author
From: Exmouth, England
Registered: 2004-08-24
Posts: 3,251
Website

Re: Improving TXP Image Management

Ummm. Well as far as employing an image-resizing script is concerned that would be a nice, welcome jump to make. At the moment a lot of the sites and theme ports I’m doing are using several size variants of each image, depending on whether they appear in an article_list or individual_article view, maybe in the sidebar, maybe in a “tags” listing or category listing or wherever. At the moment I am using timthumb.php to generate all the images on-the-fly so the only image that needs uploading to Txp is the largest version the user wants you to see.

Now that is all on my side of course, however if Txp had it’s own resizing script (as a separate script rather than within the base code), maybe sitting alongside jquery, not only would someone like me simply be able to point at it when I needed it, the possibilities for it’s use within Txp admin and Txp tags seems endless.

Sticking to the Image Edit screen for now, you wouldn’t need all the thumbnail fields nor a thumbnail. Just the main image, centred, maybe resized to a max-width and the main image fields underneath. I know that pretty much retains the current page layout but it will be a shorter page and less confusing as it only deals with the main image. A small thumbnail could be auto-generated for the Image listing pages. Even now, when I don’t need a thumbnail I begrudge the space it occupies but on the other hand I find that the Image listing pages are lot easier to negotiate if they have thumbs in them.

But then I’m thinking it could also be used within tags (though you are the coder not me but if there are no thumbs in the Txp image base this would be a definite requirement) so that I could go <txp:thumbnail id="14" link="1" link_rel="prettyPhoto" width="200" class="alignright" /> and end up with an auto-generated thumbnail with a width of 200px and whatever the relative height is, floated right, linked to the original image and using prettyPhoto for a lightbox. Have you any idea how much easier my life would suddenly become? Not to mention the same for the <txp:article_image /> and <txp:image /> tags.


Stuart – The BombsiteProText ThemesTextgarden

In a Time of Universal Deceit
Telling the Truth is Revolutionary.

Offline

#380 2010-06-13 17:44:12

hakjoon
Moderator
From: Arlington, VA
Registered: 2004-07-29
Posts: 1,631
Website

Re: Improving TXP Image Management

It really seems that all that needs is a public interface to the existing thumbnailing class. Of course mayb replacing that with something that does the new fangled content aware resizing probably wouldn’t be bad.


Shoving is the answer – pusher robot

Offline

Board footer

Powered by FluxBB