Yup the title, I just want to improve the loading times on mobile phones.
I hope that there is something like that. Thank u
You want it for the image page or for the thumbnails page?
Anyway is possible and I will help you.
Quote from: allvip on November 08, 2019, 04:08:41 AM
You want it for the image page or for the thumbnails page?
Anyway is possible and I will help you.
For the index / thumbnail page
Can I post the code tomorrow.
Now I'm a little busy.
Give me 24h.
Your gallery is http://twwcaps.paperbuildings.net/gallery/ (http://twwcaps.paperbuildings.net/gallery/) ?
I need to inspect it with firefox to help you better.
Nope, it is https://mabelphotos.net/ (https://mabelphotos.net/)
Thank yoyu so much! I'll be waiting
Now only the images that fit in the screen will load.
As the user scrolls, the next images will load.
STEP 1
open your_theme_name/template.html
and paste down before </body>
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
<script>
lazyload();
</script>
STEP 2
Paste in your_theme_name/theme.php function $template_thumbnail_view and theme_display_thumbnails
ATTENTION If those two functions are already in your theme.php then I need to tell you the edits to make.
Small edits. Don't worry.
PASTE
/******************************************************************************
** Section <<<$template_thumbnail_view>>> - START
******************************************************************************/
// HTML template for thumbnails display
$template_thumbnail_view = <<<EOT
<!-- BEGIN header -->
<tr>
<!-- END header -->
<!-- BEGIN thumb_cell -->
<td valign="top" class="thumbnails " width ="{CELL_WIDTH}" align="center">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<a href="{LINK_TGT}">
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="{THUMB-DATA-SRC}" />
</a>
{CAPTION}
{ADMIN_MENU}
</td>
</tr>
</table>
</td>
<!-- END thumb_cell -->
<!-- BEGIN empty_cell -->
<td valign="top" class="thumbnails" align="center"> </td>
<!-- END empty_cell -->
<!-- BEGIN row_separator -->
</tr>
<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
******************************************************************************/
/******************************************************************************
** 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) ? '' : '&cat=' . $cat;
$date_link = $date=='' ? '' : '&date=' . $date;
if ($superCage->get->getInt('uid')) {
$uid_link = '&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 . '&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 . '&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);
if ($mode == 'thumb') {
starttable('100%', $title, $thumbcols);
} else {
starttable('100%');
}
$header = CPGPluginAPI::filter('theme_thumbnails_header', $header);
echo $header;
$i = 0;
global $thumb; // make $thumb accessible to plugins
foreach($thumb_list as $thumb) {
$i++;
/**************************** CODE FOR LAZY LOAD *********************************/
$thumbImg = $thumb['image'];
preg_match('(<img[^>]* src=\"([^\"]*)\"[^>]*>)', $thumbImg, $matchesImg);
$thumbFilePath = $CONFIG['site_url'] . $matchesImg[1];
if (!isset($thumb['data_src'])) { $thumb['data_src'] = $thumbFilePath; }
/**************************** CODE FOR LAZY LOAD *********************************/
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'],
// {THUMB-DATA-SRC} for LAZY LOAD
'{THUMB-DATA-SRC}' => $thumb['data_src'],
'{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)) ? "&page=$page" : '';
$target = "displayimage.php?album=$aid$cat_link$date_link&pid={$thumb['pid']}$uid_link&msg_id={$thumb['msg_id']}$page#comment{$thumb['msg_id']}";
} else {
$target = "displayimage.php?album=$aid$cat_link$date_link&pid={$thumb['pid']}$uid_link#top_display_media";
}
$params = array(
'{CELL_WIDTH}' => $cell_width,
'{LINK_TGT}' => $target,
'{THUMB}' => $thumb['image'],
// added {THUMB-DATA-SRC} for LAZY LOAD
'{THUMB-DATA-SRC}' => $thumb['data_src'],
'{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'],
// added {THUMB-DATA-SRC} for LAZY LOAD
'{THUMB-DATA-SRC}' => $thumb['data_src'],
'{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);
}
endtable();
CPGPluginAPI::action('theme_thumbnails_wrapper_end', null);
echo $spacer;
}
/******************************************************************************
** Section <<<theme_display_thumbnails>>> - END
******************************************************************************/
The edits I made in the code for step 1 are
REPLACE {THUMB} with
<img class="lazyload" src="data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=" data-src="{THUMB-DATA-SRC}" />
add
/**************************** CODE FOR LAZY LOAD *********************************/
$thumbImg = $thumb['image'];
preg_match('(<img[^>]* src=\"([^\"]*)\"[^>]*>)', $thumbImg, $matchesImg);
$thumbFilePath = $CONFIG['site_url'] . $matchesImg[1];
if (!isset($thumb['data_src'])) { $thumb['data_src'] = $thumbFilePath; }
/**************************** CODE FOR LAZY LOAD *********************************/
AND pasted 3 times
// {THUMB-DATA-SRC} for LAZY LOAD
'{THUMB-DATA-SRC}' => $thumb['data_src'],
It works fine.
I tested only on my pc.
For step 1, you can download Lazy Load from https://github.com/tuupola/lazyload/tree/2.x and and upload in your_theme_name just lazyload.min.js from the zip archive
change
<script src="https://cdn.jsdelivr.net/npm/lazyload@2.0.0-rc.2/lazyload.js"></script>
WITH
<script src="{THEME_DIR}lazyload.min.js"></script>
With Firefox inspect the rows that are not showing in the browser window have src gif 1x1px and the ones in view have src the real thumbnail.
Thank you so so much
I've been very busy lately that is why this is such a late response but thank u thank u
If I can find some time, I will create a lazy-load plugin so it can work with all themes.
Quote from: ron4mac on November 09, 2019, 05:25:42 PM
If I can find some time, I will create a lazy-load plugin so it can work with all themes.
That would be amazing! I'm looking forward to seeing this
Quote from: ron4mac on November 09, 2019, 05:25:42 PM
If I can find some time, I will create a lazy-load plugin so it can work with all themes.
8)
Instead of using the code in this topic, use Lazy load plugin by ron4mac.
https://forum.coppermine-gallery.net/index.php/topic,80011.0.html (https://forum.coppermine-gallery.net/index.php/topic,80011.0.html)