[Mark]

I’m in the process of building my first site and am witnessing a homepage load problem. The site is not public yet so let me explain. My home page is static one column and consists of a small logo, no background, a slider with 4 featured images (jpegs 50-116K), a text post followed by a 4-song JPlayer (MP3s). When I refresh the homepage the first featured image comes up immediately but content from lower on the page temporarily appears partially underneath the image, distorting the page badly. After a few seconds the page updates and the text and audio player move down the page to their proper place.

The problem is intermittent and seems worse after clearing the cache or making significant changes to the page. I use Godaddy’s Managed WordPress hosting and the system speed seems excellent.

Any ideas what might be causing this?

[Sakin]

@Mark: Hum don’t know how to check in before the site is live, can you share with the the staging server URL so that I can check. I don’t think we have issue in the theme as it’s lading fast in our demo server at http://catchthemes.com/demo/catch-base/.

Let me know once it’s become available to view it.

[Denys]

Hi Sakin,

I’ve got the same problem. I have bought 2 copies of CatchBase Pro for two related sites, and neither are open to the public yet. But when I or anyone else visits the site with Chrome, Firefox, or IE, and reloads the page the same thing happens that Mark describes.In my case however, it happens any time the page is refreshed while viewing the site. I can give you a login if needed.

Thanks,
Denys

[Sakin]

@Denys: First please send me your site URL then I can check in and if needed I will ask for login. Also can you check in demo site and see if it works fine or not.

[Denys]

Hi Sakin,

The site is currently password protected: http://www.discovernaramata.ca

Denys

[Sakin]

@Denys: I will not be able to access your site without being live. Ok I will send you email.

[Sakin]

@Denys: Thanks for your access and cooperation. I check in your site and found that you have large image as background image and also 8 slider image which was making your site heavy and the slider code checks height after the slider is fully loaded. So, it take time to clear the height. So, I need to set data-cycle-loader="true" which will start slider after 2 images is loaded in slider. Then I see that you were using child theme. So, I simply added in the following code in your child theme functions.php file.

/**
 * Add slider.
 *
 * @uses action hook catchbase_before_content.
 *
 * @since Catch Base 1.0
 */
function catchbase_featured_slider() {
	global $post, $wp_query;
	//catchbase_flush_transients();
	// get data value from options
	$options 		= catchbase_get_theme_options();
	$enableslider 	= $options['featured_slider_option'];
	$sliderselect 	= $options['featured_slider_type'];

	// Get Page ID outside Loop
	$page_id = $wp_query->get_queried_object_id();

	// Front page displays in Reading Settings
	$page_on_front = get_option('page_on_front') ;
	$page_for_posts = get_option('page_for_posts'); 
 
	if ( $enableslider == 'entire-site' || ( ( is_front_page() || ( is_home() && $page_for_posts != $page_id ) ) && $enableslider == 'homepage' ) ) {
		if( ( !$catchbase_featured_slider = get_transient( 'catchbase_featured_slider' ) ) ) {
			echo '<!-- refreshing cache -->';
		
			$catchbase_featured_slider = '
				<section id="feature-slider">
					<div class="wrapper">
						<div class="cycle-slideshow" 
						    data-cycle-log="false"
						    data-cycle-pause-on-hover="true"
						    data-cycle-swipe="true"
						    data-cycle-loader="true"
						    data-cycle-auto-height=container
						    data-cycle-fx="'. $options['featured_slide_transition_effect'] .'"
							data-cycle-speed="'. $options['featured_slide_transition_length'] * 1000 .'"
							data-cycle-timeout="'. $options['featured_slide_transition_delay'] * 1000 .'"
							data-cycle-slides="> article"
							>
						    
						    <!-- prev/next links -->
						    <div class="cycle-prev"></div>
						    <div class="cycle-next"></div>

						    <!-- empty element for pager links -->
	    					<div class="cycle-pager"></div>';

							// Select Slider
							if ( $sliderselect == 'demo-featured-slider' && function_exists( 'catchbase_demo_slider' ) ) {
								$catchbase_featured_slider .=  catchbase_demo_slider( $options );
							}
							else if ( $sliderselect == 'featured-post-slider' && function_exists( 'catchbase_post_slider' ) ) {
								$catchbase_featured_slider .=  catchbase_post_slider( $options );
							}
							elseif ( $sliderselect == 'featured-page-slider' && function_exists( 'catchbase_page_slider' ) ) {
								$catchbase_featured_slider .=  catchbase_page_slider( $options );
							}
							elseif ( $sliderselect == 'featured-category-slider' && function_exists( 'catchbase_category_slider' ) ) {
								$catchbase_featured_slider .=  catchbase_category_slider( $options );
							}
							elseif ( $sliderselect == 'featured-image-slider' && function_exists( 'catchbase_image_slider' ) ) {
								$catchbase_featured_slider .=  catchbase_image_slider( $options );
							}

			$catchbase_featured_slider .= '
						</div><!-- .cycle-slideshow -->
					</div><!-- .wrapper -->
				</section><!-- #feature-slider -->';
			
			set_transient( 'catchbase_featured_slider', $catchbase_featured_slider, 86940 );
		}
		echo $catchbase_featured_slider;
	}
}

Note: for child theme and sample child theme you can refer to http://catchthemes.com/blog/create-child-theme-wordpress/

[Eero]

Hi, I have the same problem as reported above and the two images in the slider are only 110kb each.
Can you please tell me where, in which file, I should put this “data-cycle-loader=”true”” to fix the problem.

regards
ET

[Mark]

I still have the problem even after reducing the number of slider images to 4. The images are 1200×514 pixels and are small files (54, 79, 94, 127 kB). Content below the slider initially loads on top of the slider and after a delay the content properly falls into place below the slider. It looks bad. The only content below the slider is a paragraph of text and a 4-song MP3 Jplayer. So I don’t have a heavy page here.

I’m supposed to go live shortly and would appreciate help with a solution.

Best, Mark

[Sakin]

@Eero: If you are using Catch Base Pro theme. Then you can download child theme from http://catchthemes.com/blog/create-child-theme-wordpress/. Then in your child theme functions.php file add the function mention above.

[Sakin]

@Mark: You can try the same fixed mentioned above.

[Eero]

Hi Sakin, thanks for your prompt reply but seriously…
I have paid for a premium theme – catch base pro.
One of the major features of the theme’s front page is the slider.

I would expect that the major feature on the front page would work properly, and keep a space reserved whilst the small sized images load. The present method that allows the lower sections to ride up is not satisfactory.

I dont expect, as customer, to have to go and download something to create another version of the site using another product.

The internet is full of wordpress themes with sliders- none of these have the need to create a child theme to work.

Can you please advise when you have fixed the theme so that the slider space is kept open whilst the slider loads.
As a paying customer I would like the product to work properly for my clients the first time they visit.

regards
Eero

[Mark]

Eero, a friend highly skilled in WordPress suggested pasting the code supplied by Sakin into function.php window and that seems to have worked for me. No need to use a child theme. Go to Appearance > Editor and open the files editor for the website. In the right hand column find and click on function.php and it will open in the window edit area. In the upper right make sure you are in the correct Theme.​ Copy and past the code supplied by Sakin into that window. Save and test the site.

Note, there is some danger this could result in trouble but it worked for me. There is also the possibility that you can’t edit the function.php file from inside your admin area because of the permissions placed on it by you hosting company. Finally, it’s my understanding the fix may be nullified by updating the Catch Base Pro theme in the future. I’m a novice and not sure about this.

Finally, there is some evidence the load problem is more of an issue with the Chrome browser.

Best,

Mark

[Sakin]

@Mark: Don’t worry, we will be adding this in new version update soon. Give us sometime, we are not fully operational due to massive earthquake in Nepal.

[Eero]

thanks for your responses guys.
Yes I am using Chrome but its also a problem on FF.

I went to an IT forum last night and asked if anyone knew a solution.
In ten minutes I had three people telling me they could fix it.
Some guy in India fixed the problem, it took him half an hour and cost me $10.

It works.
He made changes to the slider file.

[Sakin]

@Eero: Sorry for that. We are coming up with better solution and will add option in Customizer as well. We will be using all these settings http://jquery.malsup.com/cycle2/demo/loader.php. We will be release update for all Premium theme with Cycle2 slider by tonight and will push update to WordPress.org free theme as well.

Thanks for all your detail reporting.

[Sakin]

Sorry for the late response due to disaster in Nepal. We are finally released Catch Base Pro 2.4, Catch Responsive Pro 2.1 and Full Frame Pro 2.3. Also we have pushed Catch Responsive 1.4, Full Frame 1.5 and Catch Base 1.8 to WordPress.org and these free themes will be live after approval from WordPress.org theme review team.

[Mark]

The Cycle2 Image Loader fixes the overlapping content problem on the slider. However, the downside is that slides may appear out of order, which is a problem in my case. Eero, is this an issue with the patch you had done by the person from India?

[Sakin]

@Mark: You can use “Image Loader” as “wait” if you have issue with sliders appear our of order. But most of the time “true” will load slider appear in same order.

[Author]

Posts