The MU forums have moved to

Paged "Presentation" Page (24 posts)

  1. lunabyte
    Posted 11 years ago #

    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

  2. andrea_r
    Posted 11 years ago #

    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.

  3. Ovidiu
    Posted 11 years ago #

    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

  4. lunabyte
    Posted 11 years ago #

    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.

  5. andrea_r
    Posted 11 years ago #

    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

  6. lunabyte
    Posted 11 years ago #

    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.

  7. lunabyte
    Posted 11 years ago #

    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.


    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.

  8. dsader
    Posted 11 years ago #

    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; ?>
    $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>";
    echo "from the <b>System Themes</b> library.</p>";
    <h2> </h2>
    $theme_names = array_keys($themes);
    <div class="wrap">
    <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>
    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 ?>
    var pendingOpen = 0;
    var open = 0;
    var pendingClose = 0;
    function preview(url, top) {
    document.getElementById('previewbox') + "px";
    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');'visible';
    function hidepreview() {
    if (pendingClose == 0 ) {return;}
    pendingClose = 0;
    pendingOpen = 0;
    var p = document.getElementById('previewbox');'hidden';
    function getTopPosition(e) {
    p = 0;
    while (e!=null) {
    p += e.offsetTop;
    e = e.offsetParent;
    return p;
    #previewbox {
    visibility: hidden;
    width: 200px;
    height: 200px;
    background-color: white;
    border: 5px solid #cccccc;
    position: absolute;
    left: 220px;
    top: 300px;
    <div id='previewbox'>
    <img id='previewimage' width='200' height='200' border='0' src=''/>
    <!--End Userthemes-->

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

  9. andrea_r
    Posted 11 years ago #

    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.

  10. lunabyte
    Posted 11 years ago #

    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.

  11. conpeo
    Posted 11 years ago #

    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.

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

  12. stewdio
    Posted 11 years ago #

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

  13. drmike
    Posted 11 years ago #

    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,

  14. stewdio
    Posted 11 years ago #

    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 ;-)

  15. drmike
    Posted 11 years ago #

    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. :(

  16. intimez
    Posted 11 years ago #

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

  17. intimez
    Posted 11 years ago #

    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.

  18. dsader
    Posted 11 years ago #


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

  19. drmike
    Posted 11 years ago #

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

  20. dsader
    Posted 11 years ago #

  21. drmike
    Posted 11 years ago #

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

  22. byjournal
    Posted 11 years ago #

    thanks for this modification, my users are happy)

  23. yyvonne
    Posted 10 years ago #

    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.

  24. lunabyte
    Posted 10 years ago #

    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.

About this Topic

  • Started 11 years ago by lunabyte
  • Latest reply from lunabyte