Advanced search  

News:

cpg1.5.48 Security release - upgrade mandatory!
The Coppermine development team is releasing a security update for Coppermine in order to counter a recently discovered vulnerability. It is important that all users who run version cpg1.5.46 or older update to this latest version as soon as possible.
[more]

Pages: [1]   Go Down

Author Topic: thumbnails wrapped in divs no tables  (Read 4839 times)

0 Members and 1 Guest are viewing this topic.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
thumbnails wrapped in divs no tables
« on: November 22, 2013, 08:54:19 am »

now the thumbnails are wrapped in tables:



Code: [Select]
<table class="maintable " width="100%" cellspacing="1" cellpadding="0" align="center">
        <tbody><tr>
                <td class="" colspan="5">
                    <div class="cpg_starttable_outer">
                        <div class="cpg_starttable_inner">
                            Last additions - Beyonce
                        </div>
                    </div>
                </td>
        </tr>

        <tr>

        <td class="thumbnails" align="center" valign="top" width="20%">
                <table cellpadding="0" cellspacing="0" width="100%">
                        <tbody><tr>
                                <td align="center">
                                        <a href="displayimage.php?album=lastup&amp;cat=54&amp;pid=24582#top_display_media"><img src="albums/userpics/10001/thumb_Beyonce_0264~0.jpg" class="image" alt="Beyonce_0264~0.jpg" title="Filename=Beyonce_0264~0.jpg
Filesize=940KiB
Dimensions=1400x2100
Date added=Dec 24, 2012" border="0" height="128" width="85"><br></a>
                                        <span class="thumb_title">Beyonce</span><span class="thumb_title">29 views</span><span class="thumb_caption">Dec 24, 2012</span><span class="thumb_title">Uploaded by <a href="profile.php?uid=1">allvip</a></span>
                                       
                                </td>
                        </tr>
                </tbody></table>
        </td>

 </tr>
</tbody></table>


How can I remove the tables and wrapp the thumbnalis in a div?

replace  all tables , all the tr and td - all thumbnails wrapped in a div and each thumbnail wrapped in a div.something like this:

Code: [Select]
<div class="AllThumbWrapper">
  <div class="thumbTitle">Random Files</div>
  <div class="thumb">{THUMB}</div>
  <div class="thumb">{THUMB}</div>
</div>
<div class="AllThumbWrapper">
  <div class="thumbTitle">Last Uploads</div>
  <div class="thumb">{THUMB}</div>
  <div class="thumb">{THUMB}</div>
</div>




Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #1 on: November 22, 2013, 09:07:10 am »

If is possible without editing coppermine files just the theme files.
Logged

Phill Luckhurst

  • Administrator
  • Coppermine addict
  • *****
  • Country: gb
  • Offline Offline
  • Gender: Male
  • Posts: 4660
    • Windsurf.me
Re: thumbnails wrapped in divs no tables
« Reply #2 on: November 22, 2013, 11:16:34 am »

Many people have tried it and failed but there is some success with a couple of current themes such as blankstrap for instance. It is not a simple task and requires quite a substantial amount of work.
Logged
It is a mistake to think you can solve any major problems just with potatoes.

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #3 on: November 22, 2013, 11:44:50 am »

thanks.blankstrap is proabibly going to help.


BUT if I do it this way :

1.

Code: [Select]
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/

// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT

<!-- BEGIN header -->

<!-- END header -->
<!-- BEGIN thumb_cell -->
        <div class="thumb" width ="{CELL_WIDTH}" align="center">
                                        <a href="{LINK_TGT}">{THUMB} <br /></a>
                                        {CAPTION}
                                        {ADMIN_MENU}
        </div>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->

        <tr>
<!-- END row_separator -->
<!-- BEGIN footer -->
        </tr>
<!-- END footer -->
<!-- BEGIN tabs -->
        <tr>
                <td colspan="{THUMB_COLS}" style="padding: 0px;">
                        <table width="100%" cellspacing="0" cellpadding="0">
                                <tr>
                                       {TABS}
                                </tr>
                        </table>
                </td>
        </tr>
<!-- END tabs -->
<!-- BEGIN spacer -->
        <img src="images/spacer.gif" width="1" height="7" border="" alt="" /><br />
<!-- END spacer -->

EOT;
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - END
******************************************************************************/

2. replace 
Code: [Select]
if ($mode == 'thumb') {
        starttable('100%', $title, $thumbcols);
    } else {
        starttable('100%');
    }
with
Code: [Select]
echo '<div class="thumbTitle">';
    echo $title;
    echo '</div>';
    echo '<div class="AllThumbWrapper">';
like this:

Code: [Select]
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - START
******************************************************************************/
function theme_display_thumbnails(&$thumb_list, $nbThumb, $album_name, $aid, $cat, $page, $total_pages, $sort_options, $display_tabs, $mode = 'thumb', $date='')
{
    global $CONFIG, $CURRENT_ALBUM_DATA;
    global $template_thumb_view_title_row,$template_fav_thumb_view_title_row, $lang_thumb_view, $lang_common, $template_tab_display, $template_thumbnail_view, $lang_album_list, $lang_errors;

    $superCage = Inspekt::makeSuperCage();

    static $header = '';
    static $thumb_cell = '';
    static $empty_cell = '';
    static $row_separator = '';
    static $footer = '';
    static $tabs = '';
    static $spacer = '';

    if ($header == '') {
        $thumb_cell = template_extract_block($template_thumbnail_view, 'thumb_cell');
        $tabs = template_extract_block($template_thumbnail_view, 'tabs');
        $header = template_extract_block($template_thumbnail_view, 'header');
        $empty_cell = template_extract_block($template_thumbnail_view, 'empty_cell');
        $row_separator = template_extract_block($template_thumbnail_view, 'row_separator');
        $footer = template_extract_block($template_thumbnail_view, 'footer');
        $spacer = template_extract_block($template_thumbnail_view, 'spacer');
    }

    $cat_link = is_numeric($aid) ? '' : '&amp;cat=' . $cat;
    $date_link = $date=='' ? '' : '&amp;date=' . $date;
    if ($superCage->get->getInt('uid')) {
      $uid_link = '&amp;uid=' . $superCage->get->getInt('uid');
    } else {
      $uid_link = '';
    }

    $album_types = array(
        'albums' => array('lastalb')
    );
    $album_types = CPGPluginAPI::filter('theme_thumbnails_album_types', $album_types);

    $theme_thumb_tab_tmpl = $template_tab_display;

    if ($mode == 'thumb') {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => in_array($aid, $album_types['albums']) ? $lang_album_list['album_on_page'] : $lang_thumb_view['pic_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'thumbnails.php?album=' . $aid . $cat_link . $date_link . $uid_link . '&amp;page=%d'));
    } else {
        $theme_thumb_tab_tmpl['left_text'] = strtr($theme_thumb_tab_tmpl['left_text'], array('{LEFT_TEXT}' => $lang_thumb_view['user_on_page']));
        $theme_thumb_tab_tmpl['page_link'] = strtr($theme_thumb_tab_tmpl['page_link'], array('{LINK}' => 'index.php?cat=' . $cat . '&amp;page=%d'));
    }

    $thumbcols = $CONFIG['thumbcols'];
    $cell_width = ceil(100 / $CONFIG['thumbcols']) . '%';

    $tabs_html = $display_tabs ? create_tabs($nbThumb, $page, $total_pages, $theme_thumb_tab_tmpl) : '';

    if (!GALLERY_ADMIN_MODE && stripos($template_thumb_view_title_row, 'admin_buttons') !== false) {
        template_extract_block($template_thumb_view_title_row, 'admin_buttons');
    }
    // The sort order options are not available for meta albums
    if ($sort_options) {
        if (GALLERY_ADMIN_MODE) {
            $param = array(
                '{ALBUM_ID}'   => $aid,
                '{CAT_ID}'     => ($cat > 0 ? $cat : $CURRENT_ALBUM_DATA['category']),
                '{MODIFY_LNK}'     => $lang_common['album_properties'],
                '{MODIFY_ICO}'     => cpg_fetch_icon('modifyalb', 1),
                '{PARENT_CAT_LNK}' => $lang_common['parent_category'],
                '{PARENT_CAT_ICO}' => cpg_fetch_icon('category', 1),
                '{EDIT_PICS_LNK}'  => $lang_common['edit_files'],
                '{EDIT_PICS_ICO}'  => cpg_fetch_icon('edit', 1),
                '{ALBUM_MGR_LNK}'  => $lang_common['album_manager'],
                '{ALBUM_MGR_ICO}'  => cpg_fetch_icon('alb_mgr', 1),
            );
        } else {
            $param = array();
        }
        $param['{ALBUM_NAME}'] = $album_name;
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_thumb_view_title_row, $param);
    } elseif ($aid == 'favpics' && $CONFIG['enable_zipdownload'] > 0) { //Lots of stuff can be added here later
        $param = array(
            '{ALBUM_ID}'   => $aid,
            '{ALBUM_NAME}' => $album_name,
            '{DOWNLOAD_ZIP}' => cpg_fetch_icon ('zip', 2) . $lang_thumb_view['download_zip'],
        );
        // Plugin Filter: allow plugin to modify or add tags to process
        $param = CPGPluginAPI::filter('theme_thumbnails_title', $param);
        $title = template_eval($template_fav_thumb_view_title_row, $param);
    } else {
        $title = $album_name;
    }

    CPGPluginAPI::action('theme_thumbnails_wrapper_start', null);

    echo '<div class="thumbTitle">';
    echo $title;
    echo '</div>';
    echo '<div class="AllThumbWrapper">';
    echo $header;
    $i = 0;
    global $thumb;  // make $thumb accessible to plugins
    foreach($thumb_list as $thumb) {
        $i++;
        if ($mode == 'thumb') {
            if (in_array($aid, $album_types['albums'])) {
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => "thumbnails.php?album={$thumb['aid']}",
                    '{THUMB}'      => $thumb['image'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            } else {
                // determine if thumbnail link targets should open in a pop-up
                if ($CONFIG['thumbnail_to_fullsize'] == 1) { // code for full-size pop-up
                    if (!USER_ID && $CONFIG['allow_unlogged_access'] <= 2) {
                       $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['login_needed'],'','','','').'\');';
                    } elseif (USER_ID && USER_ACCESS_LEVEL <= 2) {
                        $target = 'javascript:;" onclick="alert(\''.sprintf($lang_errors['access_intermediate_only'],'','','','').'\');';
                    } else {
                       $target = 'javascript:;" onclick="MM_openBrWindow(\'displayimage.php?pid=' . $thumb['pid'] . '&fullsize=1\',\'' . uniqid(rand()) . '\',\'scrollbars=yes,toolbar=no,status=no,resizable=yes,width=' . ((int)$thumb['pwidth']+(int)$CONFIG['fullsize_padding_x']) .  ',height=' .   ((int)$thumb['pheight']+(int)$CONFIG['fullsize_padding_y']). '\');';
                    }
                } elseif ($aid == 'random') {
                    $target = "displayimage.php?pid={$thumb['pid']}$uid_link#top_display_media";
                } elseif ($aid == 'lastcom' || $aid == 'lastcomby') {
                    $page = cpg_get_comment_page_number($thumb['msg_id']);
                    $page = (is_numeric($page)) ? "&amp;page=$page" : '';
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link&amp;msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
                } else {
                    $target = "displayimage.php?album=$aid$cat_link$date_link&amp;pid={$thumb['pid']}$uid_link#top_display_media";
                }
                $params = array(
                    '{CELL_WIDTH}' => $cell_width,
                    '{LINK_TGT}'   => $target,
                    '{THUMB}'      => $thumb['image'],
                    '{CAPTION}'    => $thumb['caption'],
                    '{ADMIN_MENU}' => $thumb['admin_menu'],
                );
            }

        } else {  // mode != 'thumb'

            // Used for mode = 'user' from list_users() in index.php
            $params = array(
                '{CELL_WIDTH}' => $cell_width,
                '{LINK_TGT}'   => "index.php?cat={$thumb['cat']}",
                '{THUMB}'      => $thumb['image'],
                '{CAPTION}'    => $thumb['caption'],
                '{ADMIN_MENU}' => '',
            );

        }

        // Plugin Filter: allow plugin to modify or add tags to process
        $params = CPGPluginAPI::filter('theme_display_thumbnails_params', $params);
        echo template_eval($thumb_cell, $params);

        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
    } // foreach $thumb

    unset($thumb);  // unset $thumb to avoid conflicting with global

    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }
    $footer = CPGPluginAPI::filter('theme_thumbnails_footer', $footer);
    echo $footer;
    if ($display_tabs) {
        $params = array(
            '{THUMB_COLS}' => $thumbcols,
            '{TABS}'       => $tabs_html,
        );
        echo template_eval($tabs, $params);
    }

    echo '</div>';
    CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
    echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/

Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #4 on: November 22, 2013, 11:45:34 am »

Is this a good way to do it or a huge mistake?
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #5 on: November 23, 2013, 09:18:59 am »

somebody please confirm if my way is correct.
blankstrap uses ul and I want just divs.
Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15759
Re: thumbnails wrapped in divs no tables
« Reply #6 on: November 27, 2013, 03:32:15 pm »

I just had a short look, but it looks basically correct. You haven't replaced
Code: [Select]
<!-- BEGIN empty_cell -->
                <td valign="top" class="thumbnails" align="center">&nbsp;</td>
<!-- END empty_cell -->
but I assume that's not necessary when using divs. But I think you still need to remove
Code: [Select]
    for (;($i % $thumbcols); $i++) {
        echo $empty_cell;
    }
and probably
Code: [Select]
        if ((($i % $thumbcols) == 0) && ($i < count($thumb_list))) {
            echo $row_separator;
        }
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #7 on: November 27, 2013, 10:43:14 pm »

FOR ANDRE

I already replaced td with div but for the rest is too late.
I already uploaded my curve masonry theme on the forum.

Can you please tell me when or where the empty_cell td shows in the curve theme?

my theme is done very well with help from desandro - the designer that made masonry - everything I used was written by him.

THE ONLY PROBLEM is "replace tables with divs" in functions $template_thumbnail_view and theme_display_thumbnails.the way I did that is proabibly incorrect.

Logged

Αndré

  • Administrator
  • Coppermine addict
  • *****
  • Country: de
  • Offline Offline
  • Gender: Male
  • Posts: 15759
Re: thumbnails wrapped in divs no tables
« Reply #8 on: November 28, 2013, 07:49:40 am »

I already replaced td with div but for the rest is too late.
I already uploaded my curve masonry theme on the forum.
Feel free to upload an updated version. I added you to the contributor group, so you can maintain your contribution threads. Please don't abuse your privilege to edit your posts.


Can you please tell me when or where the empty_cell td shows in the curve theme?
Empty cells are added to fill up tables if the amount of pictures doesn't fit the number of column setting. E.g. if you have set 4 columns in the config and your album contains 6 pictures, Coppermine will display 4 pictures in the first row and in the second row the remaining 2 pictures and 2 empty cells.
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #9 on: November 28, 2013, 08:34:47 am »

thanks
Logged

allvip

  • Global Moderator
  • Coppermine addict
  • *****
  • Country: 00
  • Offline Offline
  • Posts: 1291
Re: thumbnails wrapped in divs no tables
« Reply #10 on: March 19, 2014, 05:46:48 pm »

It also needs some css.Something like this:

Code: [Select]
.thumb {
    float:left;height:200px;
}
.thumbTitle {
    clear:both;
}
Logged
Pages: [1]   Go Up
 

Page created in 0.023 seconds with 20 queries.