WordPress.org

Ready to get started?Download WordPress

Forums

Attitude
New Page Template for Thumbnail Grid with Expanding Preview (4 posts)

  1. ju_k2_ju
    Member
    Posted 11 months ago #

    Hi there,

    I'm currently working on a new page template to integrate this very cool script: Thumbnail Grid with Expanding Preview. If you follow the link, you'll notice that all the css and js files are up for download, so all you need to do is create a new page template. I know that the page templates in Attitude are called with the content-extensions.php file, and I can't seem to put something together that works. This is the code that has been suggested I use in the content section of my page template:

    [please post that to a pastebin - it just messed up the forums because you did not use the code buttons - http://codex.wordpress.org/Forum_Welcome#Posting_Code

    I would greatly appreciate any help or suggestions that you could give me. Your time is very much appreciated.

    Thanks,

    Julie-Anne

  2. ju_k2_ju
    Member
    Posted 11 months ago #

    Sorry, here is the code I tried (without success):

    <?php get_header(); ?>
    
    <div id="container">
    
    <div id="content">
    <section id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <article>
    <ul id="og-grid" class="og-grid">
    
    <?php query_posts('cat=22&showposts=9'); ?>
    <?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post();?>
    <li><a href="<?php the_permalink();?>" data-largesrc="<?php echo get_post_meta($post->ID, "large_img", $single = true); ?>" data-title="<?php the_title();  ?>" data-description="<?php the_excerpt();?>"><img src="<?php echo get_post_meta($post->ID, "the_thumbnail", $single = true); ?>" alt=""/></a></li>
    <?php endwhile; ?>
    <?php endif; ?>
    </ul>
    </article>
    </section>
    </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="<?php bloginfo('template_directory');?>/js/grid.js"></script>
    <script>
    $(function() {
    Grid.init();
    });
    </script>
    <?php wp_reset_query(); ?>
    <?php get_footer(); ?>
  3. WPyogi
    Volunteer Moderator
    Posted 11 months ago #

    Are you using a child theme? If not all of your changes will be lost when the theme is updated.

    http://codex.wordpress.org/Child_Themes

    Also, have you seen:

    http://codex.wordpress.org/Page_Templates

    http://codex.wordpress.org/Using_Javascript

  4. skwisgaar
    Member
    Posted 5 months ago #

    Hello, I'll paste the code for how I did it. You can see it here: http://www.webshowcase.tk/wp1
    I did not use the same theme I created a child theme for the Twenty Thirteen theme. I hope it helps though.

    I did it for my homepage so I have a file called index.php and between the loop I do get template part for a file I named content-home.php

    Index.php:

    get_header(); ?>
    
    	<div id="primary" class="content-area">
    		<div id="content" class="site-content" role="main">
            <ul id="og-grid" class="og-grid">
      <?php      if(is_home() || is_front_page()) {
    $page = (get_query_var('paged')) ? get_query_var('paged') : 1;
         query_posts('showposts=12&paged='.$page.'&posts_per_page=10');
         } ?>
    		<?php if (have_posts()) : ?>
    			<?php /* The loop */ ?>
    			 <?php while ( have_posts() ) : the_post(); ?>
    				<?php get_template_part( 'content-home', get_post_format() ); ?>
    			<?php endwhile; ?>
           		</ul>
               <?php twentythirteen_paging_nav(); ?>
    	   <script>
    			$(function() {
    				Grid.init();
    			});
    		</script>
    		<?php else : ?>
    			<?php get_template_part( 'content-home', 'none' ); ?>
    		<?php endif; ?>
    		</div><!-- #content -->
    	</div><!-- #primary -->
    <?php get_footer(); ?>

    The part you care about is the
    ul tag
    In content-home.php:

    <?php
    //Preview Size Image
     if ( has_post_thumbnail() ) {
      $image_id = get_post_thumbnail_id();
      $image_url = wp_get_attachment_image_src($image_id,'homepage-preview');
      $url = $image_url[0];
     }
     else $url = get_bloginfo('stylesheet_directory').'/images/home-preview-default.jpg'
     ?>
    
      <?php
    //Thumb Size Image
     if ( has_post_thumbnail() ) {
      $image_id = get_post_thumbnail_id();
      $image_url = wp_get_attachment_image_src($image_id,'homepage-thumb');
      $url2 = $image_url[0];
     }
     else $url2 = get_bloginfo('stylesheet_directory').'/images/home-thumb-default.jpg'
     ?>
    
    <!---------------------Grid Posts---------------------->
    
    	<li class="invisible"><!--post-->
    		<a href= "<?php the_permalink() ?>" data-largesrc="<?php echo $url; ?>" data-title="<?php if (strlen($post->post_title) > 25) {
    echo substr(the_title($before = '', $after = '', FALSE), 0, 25) . '...'; } else {
    the_title();
    } ?>" data-description="<?php echo get_excerpt(190); ?>"
            >
            <img src="<?php echo $url2; ?>" alt="<?php the_title(); ?>"/><span class="pstTitle"><h4><?php the_title(); ?></h4></span>
            </a>
    	</li><!--end of post-->

    For the second part I get the thumbnail image and the preview size image of the post or a default image in my images folder if no image exists for the post.

Reply

You must log in to post.

About this Theme

About this Topic