Board index Themes Default/standard image size for preview_fullsize.jpg

Skinning and designing Serendipity (CSS, HTML, Smarty)
User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 1:37 am

Height here is really more of an issue than width since the current admin theme constrains width to the parent.

I see that every theme listed in the backend uses a container height equal to the tallest preview image. 800 x 600 is pretty common. One of the newer themes, bartleby, is 800 x 690. One of my theme's images is 1300px tall!!!! When I did it, we were only displaying the large image when clicking on the small preview. Now we are using the large image exclusively and that height is way too much.

Do we want to have a default height, or better yet, a default aspect ratio? 4:3? or is that too old school?

Another thought, if this is possible, is to set the container height to the max preview image height just for that row... but that could look sloppy with all the variation in preview image sizes, especially when viewing all themes on spartacus.

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Wed Mar 11, 2015 11:18 am

Don Chambers wrote:Do we want to have a default height, or better yet, a default aspect ratio? 4:3? or is that too old school?

I think we'll have to have at least a default aspect ratio so that all preview images look the same. Whether that should be 4:3, 16:9 or whatever is kind of open for discussion. Personally, I feel that 4:3 works a bit better because it shows more of a theme vertically, which is usually the more interesting dimension.

Don Chambers wrote:Another thought, if this is possible, is to set the container height to the max preview image height just for that row... but that could look sloppy with all the variation in preview image sizes, especially when viewing all themes on spartacus.

I am strongly opposed to that. Setting a fixed height (even a max-height) in CSS is usually not a good idea, especially if there's no fixed (max-)width set along with it and especially in a responsive context (which the backend is). Also, I assume that the equal heights JS we're using in the backend to keep the theme containers' heights in sync would react badly to that.

Probably the only good argument for a CSS solution is that it's hard to make theme authors adhere to a default format for this preview image. But it's not as if we get like 10 new theme submissions for Spartacus every month (or even year). New themes usually come from someone in the community. Yes, that may (and hopefully will) change, which is why now is a great point to define this format.

My proposal would be: preview_fullsize.jpg should be 4:3, 800x600. (I think I have ignored my own proposal already. :lol:)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 3:24 pm

So upon further investigation..... Why does the class .template_preview have a max-width: 400px? images are already constrained to max-width:100%.

I just created a preview image at 1200 x 900, medium quality (photoshop) to reduce file size. Same aspect ratio as 800 x 600. Looks great.

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Wed Mar 11, 2015 4:50 pm

Don Chambers wrote:Why does the class .template_preview have a max-width: 400px? images are already constrained to max-width:100%.

Honestly, I don't know. Off the top of my head I would say either to maintain the aspect ratio or to help with the equal heights. Might also be related to the theme info overlay. I would have to test it by removing the explicit max-width in px in the admin stylesheet, which I don't have time for right now. Removing it in the dev tools doesn't seem to hurt it, but I'm sure it's there for a reason.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 5:51 pm

Using only firefox firebug, removing the max-width: 400px did no harm, and quite frankly looks much better. I'll try to remove it in the admin stylesheet and see what happens.

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 6:25 pm

I removed the following at line 1701 from 2k11's admin stylesheet:

Code: Select all
.template_preview {
    max-width: 400px;
}


I tested in the latest windows versions of firefox, opera, chrome, MSIE, as well as the last release of safari for windows.

It works great. All preview images will expand to fit the container without breaking. Column heights remain equal. I see no reason NOT to remove this from 2k11's admin stylesheet, but will leave it up to YL to test and make that decision.

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Wed Mar 11, 2015 6:50 pm

Don Chambers wrote:It works great. All preview images will expand to fit the container without breaking. Column heights remain equal. I see no reason NOT to remove this from 2k11's admin stylesheet, but will leave it up to YL to test and make that decision.

Hey, if you already tested that thoroughly, why should I have to do that again? :wink:

(I just tested it for smartphone and tablet resolutions as well, just in case.)

As I said: I don't know why it's there. It might be legacy code that was at some point necessary, but no longer is. Over two years of backend development you sometimes just lose track of these tiny details, especially since this one did not hurt.

Will remove it right now.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 9:57 pm

What about the thought of somehow indicating that the theme is responsive... I had this idea of a corner ribbon that says "responsive".

Image

Something to make themes like 2k11, next, and the two I am working on stand out a little more?

Thoughts?

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Wed Mar 11, 2015 10:24 pm

Don Chambers wrote:What about the thought of somehow indicating that the theme is responsive... I had this idea of a corner ribbon that says "responsive".

I find that pointless.

Sooner or later, “responsive” is not going to be something special anymore. In fact, outside of the s9y bubble, it already isn't. I don't think it's worth the effort of adding and styling such an element.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Wed Mar 11, 2015 10:53 pm

Sorry - I didn't mean to imply styling it inside the backend. I simply meant stamping it onto the image in photoshop. Though, you are right, at some point in the not too distant future, it will not have as much meaning as presumably all themes will be responsive.

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Thu Mar 12, 2015 12:09 am

Don Chambers wrote:I simply meant stamping it onto the image in photoshop.

Oh, okay. I would've never assumed that. :lol:

If you want to do that, sure. But that way, it will most likely not be very readable on small screens.

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)

User avatar
Don Chambers
Regular
 
Posts: 3576
Joined: Mon Feb 13, 2006 3:40 am
Location: Chicago, IL, USA

Postby Don Chambers » Thu Mar 12, 2015 12:58 am

Have not decided whether to keep it or not just yet. I know it wouldn't be very readable on small screens, but how many people are configuring themes on their phones anyway?? :lol:

User avatar
yellowled
Regular
 
Posts: 6815
Joined: Fri Jan 13, 2006 12:46 pm
Location: Eutin, Germany

Postby yellowled » Thu Mar 12, 2015 10:31 am

I have heard the “How many people do X on their phone?” line throughout backend development, and I realize that some backend workflow will probably never be something that people do on their phones regularly. However, with “phablets” like the Galaxy Note and the iPhone 6+, I would still assume that at least some people will want to be able to do anything on their phones. :)

YL
amazon Wishlist - Serendipity-Podcast (German only, sorry)



Return to Themes

Who is online

Users browsing this forum: No registered users and 1 guest