Ondersteuning » Code oplossingen gezocht » Lijst van posts op front-page

  • Opgelost nielsdevries86

    (@nielsdevries86)


    Ik ben bezig met mijn portfoliowebsite en daar wil ik alle posts (portfolio items) op de homepagina (front-page) tonen. Ik heb bovenin de pagina een while voor de content van de homepagina. Er onder heb ik onderstaande code om mijn lijst met items te tonen.

    <ul class="portfolio">
    
    			<?php $args = array( 'numberposts' => 30, 'order' => 'DESC');
    			$myposts = get_posts( $args );
    			foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
    				<?php if (has_post_thumbnail( $post->ID ) ){ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    				<li style="background-image:url(<?php echo $image[0]; ?>);" data-diff="100" data-img-width="300" data-img-height="300">
    					<a href="<?php the_permalink(); ?>">
    						<?php } ?>
    						<div class="box">
    							<b><?php the_title(); ?></b><br />
    							<?php $posttags = get_the_tags(); if ($posttags) {
    								foreach($posttags as $tag) {
    									echo $tag->name . ' <i>+</i> ';
    								}
    							} ?>
    						</div>
    					</a>
    				</li>
    			<?php endforeach;
    			wp_reset_postdata();?>			
    
    		</ul>

    Echter hij hapert als een gek met scrollen. Enig idee hoe dit kan?

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Linkje?

    Thread starter nielsdevries86

    (@nielsdevries86)

    Helaas, draai mijn WordPress lokaal. Dit is mijn hele front-page.php. In de header en footer staan verder niet veel dingen. Het lijkt wel of hij heel veel moeite moet doen om alle items in te laden…

    <?php include ('header.php'); ?>
    
    	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    	<section class="sub-header fullscreen background parallax" data-speed="8" data-type="background"
    	id="large-image" data-anchor="top"
    		style="background:url(<?php echo $image[0]; ?>) 50% 0 no-repeat fixed;" data-diff="400" data-img-width="1920" data-img-height="1080">
    
    		<div class="content-a">
    	        <div class="content-b">
    	        	<div class="container">
    			 		<h1><?php the_title(); ?></h1>
    			 		<?php the_content(); ?>
    	        	</div>
    	        </div>
    	    </div>
    	    <div class="overlay normal-overlay"></div>
    	</section>
    
    	<?php endwhile; else: ?>
    	    // no posts found
    	<?php endif; ?>
    
    	<section class="align-center grey">
    		<div class="container">
    			<h2>Lorem Ipsum</h2>
    			<p>
    				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sed sapien quam.
    				Sed dapibus est id enim facilisis, at posuere turpis adipiscing. Quisque sit amet dui dui.
    			</p>
    		</div>
    	</section>
    
    	<section class="no-padding" id="portfolio">
    
    		<ul class="portfolio">
    
    			<?php $args = array( 'numberposts' => 30, 'order' => 'DESC');
    			$myposts = get_posts( $args );
    			foreach ( $myposts as $post ) : setup_postdata( $post ); ?>
    				<?php if (has_post_thumbnail( $post->ID ) ){ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>
    				<li style="background-image:url(<?php echo $image[0]; ?>);">
    					<a href="<?php the_permalink(); ?>">
    						<?php } ?>
    						<div class="box">
    							<b><?php the_title(); ?></b><br />
    							<?php $posttags = get_the_tags(); if ($posttags) {
    								foreach($posttags as $tag) {
    									echo $tag->name . ' <i>+</i> ';
    								}
    							} ?>
    						</div>
    					</a>
    				</li>
    			<?php endforeach;
    			wp_reset_postdata();?>
    
    		</ul>
    	</section>
    
    <?php include ('footer.php'); ?>

    beperk het aantal posts eens van 30 naar 1 of 3.

    Wat voor probleem loop je dan tegen aan? (ik heb de code verder nog niet inhoudelijk bekeken, op dit moment wil ik een vormgevings/css ding uitsluiten, ben benieuwd hoeveel tags er bijvoorbeeld worden geladen.)

    Thread starter nielsdevries86

    (@nielsdevries86)

    Het aantal post naar 3 zetten levert al een heleboel op. Bij 1 loopt hij heel erg soepel (zoals het zou moeten). Heb mijn code ook iets aangepast. Wellicht helpt het. Er werden op het vorige moment ongeveer 20 posts geladen…

    <?php
    /*
    Template Name: Homepage
    */
    ?>
    
    <?php get_header(); ?>
    
    	<section class="fullscreen background parallax" data-speed="8" data-type="background"
    	id="large-image" data-anchor="top" data-diff="400" data-img-width="1920" data-img-height="1080">
    
    		<div class="content-a">
    	        <div class="content-b">
    	        	<div class="container">
    		        	<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    			 			<?php the_content(); ?>
    			 		<?php endwhile; else: ?>
    					<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    					<?php endif; ?>
    	        	</div>
    	        </div>
    	    </div>
    	    <div class="overlay normal-overlay"></div>
    
    	</section>
    
    	<section class="align-center grey">
    		<div class="container">
    			<h2>Wat heb ik gemaakt?</h2>
    			<p>
    				Een greep uit mijn werk tot nu toe, mijn portfolio. Meer informatie over een project of gewoon interesse? Stuur mij een mailtje.
    			</p>
    		</div>
    	</section>
    
    	<div class="portfolio">
    		<ul id="portfolio">
    			<?php
    			global $post;
    			$args = array('posts_per_page' => 1, 'order' => 'DESC');
    			$myposts = get_posts( $args );
    			foreach( $myposts as $post ) :	setup_postdata($post); ?>
    				<li>
    					<a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>">
    						<div class="box">
    							<b><?php the_title(); ?></b><br />
    								<?php
    								  $posttags = get_the_tags();
    								  if ($posttags) {
    									foreach($posttags as $tag) {
    									  echo $tag->name . ' <i>+</i> ';
    									}
    								  }
    								?>
    
    						</div>
    						<?php the_post_thumbnail();  ?>
    					</a>
    				</li>
    			<?php endforeach; ?>
    		</ul>
    	</div>
    
    <?php get_footer(); ?>

    Benieuwd hoe het verder gaat. Zou je je oplossing willen plaatsen en de topic sluiten als het zover is?

    Als je er niet uitkomt, geef dan vooral meer info, screenshots etc. zodat wij beter kunnen zien wat er precies speelt.

    Thread starter nielsdevries86

    (@nielsdevries86)

    Momenteel nog geen oplossing gevonden. Zodra ik hem weer ophoog zet qua aantal posts is het weer een probleem. Echter groot verschil in Crome (schokkerig) en Firefox (soepel). Een dezer dagen ga ik hem sowieso online zetten. Bedankt voor de moeite/hulp tot zover.

    kijk eens wat er gebeurt als je de opmaak van je list uitkleedt. dus enkel de date weergeven, zonder a, ul, li, div. Enkel met een br er tussen.

    Thread starter nielsdevries86

    (@nielsdevries86)

    Dat werkt snel… Zou het dan toch aan de css liggen (croppen van images)?

    Thread starter nielsdevries86

    (@nielsdevries86)

    Het lijkt een css issue te zijn namelijk het grayscalen van images…

    -webkit-filter: grayscale(1); filter: grayscale(1); filter: gray;

    Dit was de boosdoener. Zal een andere oplossing moeten verzinnen. Mijn WordPress code was in ieder geval oké. Super bedankt voor de (snelle) hulp!

9 reacties aan het bekijken - 1 tot 9 (van in totaal 9)
  • Het onderwerp ‘Lijst van posts op front-page’ is gesloten voor nieuwe reacties.