WordPress MU

Has anyone thought of, used, or seen anything about breaking the available themes listed in the admin section (Presentation tab, not Site Admin) into multiple pages?

If you have a ton of themes, it might be helpful on both bandwidth and query size. Every little bit helps, right?

If you have 100 themes, and each one has an average screenshot size of say 25k, that's an awful lot for a single page load.

If someone has any info on if this has been done before, I'd appreciate it. If not, I'll see what I can cook up. :D

Even smaller screenshots would help. :) They are supposed to be a standard size and I remember Dr Mike saying he had to manually redo a whole pile of them AND he changed them all to JPGs instead of png, which were bigger.

well all of those screenshots I have seen around are 200x151 pixels and somehow those I manually added are only around 6-10kb big...

still a paged presentation page would be great

I agree that some are smaller, but some are hideously large. Like 50 or 60k.

Even if each one was only 10k, that's 500MB overhead for every 50 themes you have available.

If you only have a handful, it isn't too bad I guess. But still, every little bit helps, right?

I'm digging into that area of the code right now.
The initial values are returned in an array, then the output in a loop. So it shouldn't be too difficult to do something with.

yep, every bit does help. oooo.... searchable themes would be good too. Say a user only wated to see the three column themes available. :D

That would require like a new global table, with theme information most likely.

The way themes work now, through the get_themes function (wp-includes/themes.php, for reference):

Every single one is read from the themes directory.

So that's X number of directories (however many themes you have), plus it reads 2 files per directory. It reads style.css, and also reads index.php so that's X*2...

And, the presentation page isn't the only one to call this function.

On a standard WP install, I can see this not being an issue.

For an MU install, where the total number of themes is (most likely) much much higher, and the users much greater, it seems like it might be possible to save all that overhead with a simple DB call.

What would eat up less resources? Reading in 2 files per theme, or a database call to a global table that returns say 5 or 6 cells per row (1 row = 1 theme)?

"Technically", a theme isn't there until it's activated under Site Admin. So since that page is visited much less often than a users presentation tab, could that page run the checks on the current themes in the dir, and then once it's activated stick it into this global themes table?

Maybe I'm just nuts. How many themes do your sites have available? Farms? Quentin? Andrea?

I know initially I'm looking at 25 different themes to start with, but I could see it getting upwards of 100 or more. The more to offer, the better right?

Of course, if someone edits a theme, and mucks it up, it would still be active. Then again, I can't imagine anyone operating at this level not working with a theme offline before uploading changes. Also, of course, unless it's an error in the commented portion of the stylesheet or deleting index.php, it's not going to be picked up by the current method anyway.

OK, so check this.
26 total themes.

Largest screenshot size: 128k
2nd biggest: 116k

Smallest: 16k (3)

Total: 1014k (1.014Mb)
Average: 39k

So I ran each one through photoshop, saved at 40%(quality) jpg's. Fine for a preview. Surprisingly, gif's we larger, but not much.

Afterwards...

Total: 239k
Largest: 13k
2nd largest: 12k(2)
Avg: 9.19k

Saving: ~76.5%

Holy batcrap, batman.

116k was daydream, from the recent themepack.
128k was sunburn.

Other notables out of the recent themepack:
andreas09 (76k), newsportal (56k), stripedplus (60k), waterlily (40k)

Several others above 20 and 30k as well.

Here's a massive hack combining themes.php with userthemes.php(and works with or without userthemes.php plugin). Themes page loads instantly (200+themes, >100 queries, .9 secs). Users must rollover a title to see a screenshot. Smallest bandwidth possible while still showing a screenshot of every theme, on rollover only.

Find in themes.php...
<div id="message2" class="updated fade"><p><?php printf(__('New theme activated. <a href="%s">View site &raquo;</a>'), get_bloginfo('home') . '/'); ?></p></div>
<?php endif; ?>

Paste this after it....
<!-- Userthemes go here -->
<div class="wrap">
<h2><?php _e('Current Theme'); ?></h2>
<div id="currenttheme">
<?php if ( $ct->screenshot ) : ?>
<img src="<?php echo get_option('siteurl') . '/' . $ct->stylesheet_dir . '/' . $ct->screenshot; ?>" alt="<?php _e('Current theme preview'); ?>" />
<?php endif; ?>
<p><?php
$cTheme = get_current_theme();
echo "<p>The currently active theme is <b>$cTheme</b>, ";
if (get_option('ut_use_user_theme') == 1 )
echo "from the <b>Userthemes</b> library.</p>";
else
echo "from the <b>System Themes</b> library.</p>";
?></p>
</div>
<h2> </h2>
</div>
<?php
$theme_names = array_keys($themes);
natcasesort($theme_names);
?>
<div class="wrap">
<form>
<table id='the-list-x' width='80%'>
<tr style='background-color: #444444; color:#ffffff;'>
<td colspan='5'>System Themes <i style='font-size:.8em'>(no editing)</i></td></tr>
<?php
foreach ($theme_names as $theme_name) {
$template = $themes[$theme_name]['Template'];
$stylesheet = $themes[$theme_name]['Stylesheet'];
$title = $themes[$theme_name]['Title'];
$version = $themes[$theme_name]['Version'];
$description = $themes[$theme_name]['Description'];
$author = $themes[$theme_name]['Author'];
$screenshot = $themes[$theme_name]['Screenshot'];
$stylesheet_dir = $themes[$theme_name]['Stylesheet Dir'];
$alt = $alt == '' ? 'alternate' : '';
$activate_link = wp_nonce_url("themes.php?action=activate&amp;template=$template&amp;stylesheet=$stylesheet", 'switch-theme_' . $template);
?>
<tr class='<?php echo $alt; ?>'><td><a style='text-decoration: none; color: black;' href='<?php echo $activate_link; ?>'<?php echo "onMouseOver=\"preview('" . get_option('siteurl') . '/' . $stylesheet_dir . '/' . $screenshot . "', getTopPosition(this));\"onMouseOut=\"unpreview();\"
"; ?>><?php echo "$title"; ?></a></td>
<td colspan='2'><a href='<?php echo $activate_link; ?>'>Activate</a></td></tr>
<?php } // end foreach theme_names ?>
</form>
</table>
</div>
<script>
var pendingOpen = 0;
var open = 0;
var pendingClose = 0;
function preview(url, top) {
document.getElementById('previewbox').style.top=top-100 + "px";
document.getElementById('previewimage').src=url;
pendingOpen = 1;
pendingClose = 0;
setTimeout('showpreview()', 1000);
}
function unpreview() {
pendingClose = 1;
setTimeout('hidepreview()', 400);
}
function showpreview() {
if (pendingOpen == 0) { return; }
var p = document.getElementById('previewbox');
p.style.visibility='visible';
}
function hidepreview() {
if (pendingClose == 0 ) {return;}
pendingClose = 0;
pendingOpen = 0;
var p = document.getElementById('previewbox');
p.style.visibility='hidden';
}
function getTopPosition(e) {
p = 0;
while (e!=null) {
p += e.offsetTop;
e = e.offsetParent;
}
return p;
}
</script>
<style>
#previewbox {
visibility: hidden;
width: 200px;
height: 200px;
background-color: white;
border: 5px solid #cccccc;
position: absolute;
left: 220px;
top: 300px;
}
</style>
<div id='previewbox'>
<img id='previewimage' width='200' height='200' border='0' src='http://www.google.com/intl/en/images/logo.gif'/>
</div>
<!--End Userthemes-->

Then remove everything else(the original theme page stuff) before this...
<?php
// List broken themes, if any.
$broken_themes = get_broken_themes();

dasder, once again, you are a hero. :D

luna: I think I have around 40-60 themes. Yeah, it chugs when the page loads. :-/ Tinkering with that is on my list.

dsader... that's the s**t right there. :D

MUCH appreciated, and better than the hack I was mapping out. :D

Andrea, I can see a point in time where you know theme X hasn't ever drawn any interest, and themes Y and Z are "hot", so hopefully it balances out over time. All depends on the crowd I suppose.

Its great!

as before I used to resize huge pic and convert png/gif file type to jpg for better themes preview speed.

Now I found this nice hack without any themes plugin, and its no crash for themes extra function page.
Thanks!

also can add panel on top, for switching between screenshot preview.

I think I'm going to cry, that's just beautiful :~)

Darn cool. :)

I did make one change to the code though and I do recommend it. Right after it says "no editing", I put in a bit saying "Hold your mouse over the link to see the preview image" That way you don't get folks asking where the images are.

I also added a link to a page where I do list the themes by image and give links to demos.

Hope this helps,
-drmike

All thats missing is a call for the description to be listed after the name of the theme in the list.

I say this because I have an entire series of themes with no images! The author forget them or left them out, so far I've relied on the description so I don't have to load it up and check what it is.

I guess I 'll have to make my own preview image(s), another thing to add to the never ending list of things to do ;-)

I had to make new screenshots for almost all of the themes I added in. pre 1.5, I don't think there was screenshot support either.

Plus those 300kb png files were a pain to load. :(

Can anyone confirm if this works for 1.2? I tried following the direction above, and I end up only seeing one theme listed.

I assumed that the themes will retain it's activated state, but after upgrade, one must go and activate all the themes again. Not a big deal for those with just a handful of selections, but a hassle for those with a huge collection, especially without a select all option.

intimez,

I'm at 1.1.1, trouble-free upgrade. No impact on my themes.php and userthemes.php plugin.

I can't find it right off but you have to revisit the Site Admin -> Themes page again and resave them.

http://trac.mu.wordpress.org/ticket/284

I was looking for where Donncha said to revisit the page actually but thanks:

http://trac.mu.wordpress.org/changeset/936

thanks for this modification, my users are happy)

I cannot get this to work (pagination of themes), the script posted is not up to date, can someone who has this working kindly post the script again? Thank you.

Considering it's from over a year ago, and taking into account all the changes since then, it's not surprising it doesn't work.