New to the community? Start here

Add a blog newspage to the homepage below the slider

I know it isn't meant for it, but I would like to add an overview of blogposts under the slider in the gallery. Is there a way to do this easily, or do I have to program it from scratch?

Thanks!

  • arnehulstein
    • Site Builder, Child of Zeus

    Ok, getting there. I do have a slight problem with the jquery masonry I want to use. Wonder whether you would have an answer.

    I have put the jquery.masonry.min.js in the libary/scripts/ folder and I call it in functions.php within the existing gallery_load_scripts: 

    if ( ! function_exists( 'gallery_load_scripts' ) ) :
function gallery_load_scripts() {
	$version = '1.3';
	if ( !is_admin() ) {
		wp_enqueue_script("jquery");
		wp_enqueue_script( "slideshow", get_bloginfo('template_directory') . "/library/scripts/nivo-slider/jquery.nivo.slider.pack.js" );
		wp_enqueue_script( "fancybox", get_bloginfo('template_directory') . "/library/scripts/fancybox/jquery.fancybox-1.3.4.pack.js" );
		wp_enqueue_script( "mousewheel", get_bloginfo('template_directory') . "/library/scripts/fancybox/jquery.mousewheel-3.0.4.pack.js" );
		wp_enqueue_script( "jqueryeasing", get_bloginfo('template_directory') . "/library/scripts/fancybox/jquery.easing-1.3.pack.js" );
		wp_enqueue_script("masonry", get_bloginfo('template_directory') . "/library/scripts/jquery.masonry.min.js");

		if ( is_singular() && get_option( 'thread_comments' ) && comments_open() )
		wp_enqueue_script( 'comment-reply' );
	}
}
endif;

    On the homepage I have commented out the custom elements and I then call the masonry script in home.php through:

    /*
locate_template( array( '/library/components/option-socialbuttons.php' ), true );

if (($homecontent == "") && ($socialbuttons == "") && ($slideshow == "")){
	locate_template( array( '/library/components/slideshow-partial.php' ), true );
}

locate_template( array( '/library/components/option-content.php' ), true );
*/

?>

<?php while (have_posts()) : the_post(); ?>
<?php if(has_post_thumbnail() ) { ?>
<div class="loop-entry">
        <div class="loop-entry-thumbnail">
            <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(); ?></a>
        </div>
  	<div class="loop-entry-details">
    	<h2><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    	<?php the_excerpt(); ?>
<!--     	<a href="<?php the_permalink(); ?>" title="Read the rest of <?php the_title(); ?>" class="more-link">Read the rest of this entry »</a> -->
    </div>
    <!-- END loop-entry-details -->
</div><!-- END entry -->

<?php } ?>
<?php endwhile; ?>

    My last problem now is that I would like masonry to show 8 posts in 4 columns. However, it seems as if it always wants to add an extra one. Any thoughts? Check: ikensocialmedia.nl

  • arnehulstein
    • Site Builder, Child of Zeus

    Oh, changed the method for getting the post thumbnails to get_the_post_thumbnail() to get the featured images, but they are still way to big to load. Annoying...

    And I changed the loader in library/components/slideshow.php to:

    <script type="text/javascript">
  jQuery.noConflict();
jQuery(function() {
    jQuery('#slider').nivoSlider({
	effect:'fade'
});
});
</script>

    Instead of:

    <script type="text/javascript">
  jQuery.noConflict();
jQuery(window).load(function()  {
    jQuery('#slider').nivoSlider({
	effect:'fade'
});
});
</script>

    Which allows it to start without loading all images on the page first.

    Now all that is left is to sort the size of the featured images and the fifth column for the masonry.

    All suggestions are very, very welcome.

  • Patrick
    • Support Monkey

    Hi arnehulstein,

    My last problem now is that I would like masonry to show 8 posts in 4 columns.

    Fixing the grid display is a rather easy css fix (also discussed here: https://premium.wpmudev.org/forums/topic/single-product-on-category-page-sitting-alone-on-a-row-while-there-are-four-products-on-the-rows-above-and-below#post-198699 )

    In your theme's stylesheet, modify the style rules for .loop-entry as follows:

    .loop-entry {
float:none;
display:inline-block;
vertical-align:top;
margin-right:7px;
}

    I can't say why the script is adding a 9th entry but, if you can't pin down the problem, that too could well be resolved with css. Try adding the following to your stylesheet:

    .loop-entry:last-child {
display:none;
}

    Hope this helps! :slight_smile:

  • Patrick
    • Support Monkey

    Aha, just saw you posted again while I was writing an answer :slight_smile:

    Now all that is left is to sort the size of the featured images and the fifth column for the masonry.

    Try changing the width in .loop-entry to 185px in your stylesheet, and add the following rules to .loop-entry-thumbnail img, like so:

    .loop-entry {
width:185px;
}
.loop-entry-thumbnail img {
max-width:162px;
height:auto;
}

    Hope this helps! :slight_smile:

  • arnehulstein
    • Site Builder, Child of Zeus

    Ok, thanks for the suggestion. That got me on my way. Changing them as you said didn't quite work out as it then listed the items vertically. However, when I added the width for an item back on 235px, it miraculously worked. :slight_smile:

    However, the last-child fix did not. :slight_frown: The changes have removed the last child from the middle of the page and have now moved it to the bottom...

    Any new insights on this?

  • Patrick
    • Support Monkey

    Hi again arnehulstein,

    Huh... Yup, I just refreshed the page on your site and saw that the images have indeed disappeared.

    Odd, the last-child selector should work :slight_frown:
    Let's try getting down and dirty with the last-child technique by getting real specific:

    div.loop-entry:nth-last-child(1) {
display:none;
}

    Also odd: in Firebug, setting the image width to 162px and the div width to 185px (along with the other rules) works to create a 5-column grid on your page.

  • arnehulstein
    • Site Builder, Child of Zeus

    I came across an article somewhere that said that there is a good chance that it has to do with masonry not being able to estimate the height of the whole thing. Apparently the slider makes that difficult. They suggested in that article to add an overflow:hidden to it, but that does not change anything either.

  • arnehulstein
    • Site Builder, Child of Zeus

    I have found that it does work fine if I limit the maximum number of blogposts that can be shown to 8 by assigning them to a separate category and filtering on that.

    Wish there was something as easy as post_limit=(8); for this. :wink:

  • Patrick
    • Support Monkey

    Ok, I took a look at your stylesheet (lightroom.css) and everything looks fine. The changes I make in Firebug work fine too.

    The only other suggestion I can come up with for now is to try and add the style rules to your theme's main stylesheet to see if they take.

    On that note, I also see that you are using the Gallery parent theme. If you are customizing and don't want to lose those customizations when you update the theme, it's preferable to move all your custom work to the child theme and activate that instead. Styles would then go in _inc/css/child-style.css

  • arnehulstein
    • Site Builder, Child of Zeus

    Dropping it into the main css did the trick.

    However, I am not sure how to transfer all the changes to a child theme. I can rummage along quite nicely with php and all that, but I am not a real programmer. :wink:

    However, I can take a stab at it. After I make this site work. :slight_smile: I will then restructure into a child theme. Will post questions about that later this week then.

  • Patrick
    • Support Monkey

    Yes, your 4x2 grid looks great! Maybe just add a margin-bottom:15px; to .loop-entry to give the entries a bit of breathing room.

    Wish there was something as easy as post_limit=(8); for this. :wink:

    Lol. That reminds me of a quote I recently came across from Bertrand Russell (while reading up on Occam's Razor) in his Introduction to Mathematical Philosophy: "The method of 'postulating' what we want has many advantages; they are the same as the advantages of theft over honest toil. Let us leave them to others and proceed with our honest toil."

    :slight_smile:

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.