php - Edit: Bootstrap panel-body that echoes a post title and acts as a link to the corresponding post -
edit: attempting this result, index.php generates bootstrap panel-body containing corresponding post title each time new post made. want panel-body act link corresponding post (e.g. there post title 'sofa @ market day' , panel-body on index.php contains 'sofa @ market day' text , links 'sofa on market day' post). these panel-body's contained in 2 separate columns, shown in code below.
additionally, these thumbnails arranged in descending order, newest post @ top left , older posts following right, , in next row on left, etc, shown in example image (meaning 'sofa @ market day recent post, 'interview with...' 2nd recent, , 'cut thumb ari' 3rd recent, 'lecture by...' 4th recent, etc, etc).
this index.php looks like:
<?php /** * main template file * * generic template file in wordpress theme * , 1 of 2 required files theme (the other being style.css). * used display page when nothing more specific matches query. * e.g., puts home page when no home.php file exists. * * @link https://codex.wordpress.org/template_hierarchy * * @package wpbootstrap-sofa */ get_header(); ?> <div class="starter-template"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3"> <div class="center-block"> <a href="http://www.uqsofa.com/"> <img src="<?php echo get_bloginfo("template_directory"); ?>/img/sofa-logo.png" class="img-responsive center-block" alt="uq sofa logo"> </a> </div> <!-- /.center-block --> </div> </div> <div class="row"> <div class="col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4"> <div class="navbar-collapse collapse sidebar-navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="http://www.uqsofa.com/">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#blog">blog posts</a> </li> <li><a href="http://www.uqsofa.com/blog-post-submissions/">submit blog post</a> </li> <li><a href="#events">events</a> </li> <li><a href="http://www.uqsofa.com/contact/">contact</a> </li> <li><a href="http://uqsofa.bigcartel.com/" target="_blank">store</a> </li> </ul> </div> <!--/.collapse navbar-collapse --> </div> <!-- /.col-xs-0 col-sm-0 col-md-4 col-lg-4 col-xl-4 --> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <div class="panel panel-default"> <div class="panel-body">sofa @ market day</div> </div> <!-- /.panel panel-default--> <div class="panel panel-default"> <div class="panel-body">cut thumb ari</div> </div> <!-- /.panel panel-default--> <div class="panel panel-default"> <div class="panel-body">goma talks</div> </div> <!-- /.panel panel-default--> </div> <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4--> <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4"> <div class="panel panel-default"> <div class="panel-body">interview with...</div> </div> <!-- /.panel panel-default--> <div class="panel panel-default"> <div class="panel-body">lecture by...</div> </div> <!-- /.panel panel-default--> <div class="panel panel-default"> <div class="panel-body">post #474</div> </div> <!-- /.panel panel-default--> </div> <!-- /.col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4--> </div> <!-- /.row--> </div> <!-- /.starter-template--> </div> <!-- /.container --> </div> <!-- /.background --> <?php get_footer();?> i've got no idea begin this, , don't know if it's possible, appreciated. i've read through lot of posts, none seem trying recreate wanting post thumbnail echoing post title. in advance.
to able use thumbnail post excerpt display should done this:
// must inside loop. if ( has_post_thumbnail() ) { the_post_thumbnail(); } else { echo '<img src="' . get_bloginfo( 'stylesheet_directory' ) . '/images/thumbnail-default.jpg" />'; } if wanted customize the_post_thumbnail can add these attributes inside code , this:
the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive responsive--full', 'title' => 'feature image']); post-thumbnail can set via functions.php , give them specific sizes. can declare different sets of dimension base on needs. need set add_image_size(). here's how need via functions.php
add_image_size( 'post-thumbnail', 220, 180, true ); // 220 pixels wide 180 pixels tall, hard crop mode or can set right away this:
the_post_thumbnail([150, 150, true], ['class' => 'img-responsive responsive--full', 'title' => 'feature image']); hope you.
2nd updated version
again, base on title, feel irrelevant statement here. so, guessing trying achieve (if not, @ least tried best).
note: mixed answer yuri including answer.
if want output, here's static version: codepen link
<div class="starter-template"> <div id="header" class="container"> <img src="http://www.logomarket.de/images/p/germany%202-4-17-01.png" class="img-responsive center-block" alt="your logo here"> <!-- placeholder image only. credit logomarket.de --> </div> <div id="content" class="container"> <div class="row"> <div id="menu-list" class="col-md-4"> <ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#home">home</a></li> <li><a href="#about">about</a></li> <li><a href="#blog">blog posts</a></li> <li><a href="#post">submit blog post</a></li> <li><a href="#events">events</a></li> <li><a href="#contact">contact</a></li> <li><a href="#store" target="_blank">store</a></li> </ul> </div> <div id="post-list" class="col-md-8"> <div class="row"> <!-- start loop --> <?php $query = new wp_query([ 'post_type' => ['post'], 'post_status' => 'publish', 'orderby' => 'date', 'order' => 'desc' ]); ?> <?php while ( $query->have_posts() ) : $query->the_post(); ?> <div class="col-md-6"> <div class="panel panel-default"> <div class="panel-body"> <?php if ( has_post_thumbnail() ) { the_post_thumbnail('post-thumbnail', ['class' => 'img-responsive', 'title' => 'feature image']); } else { echo '<img src="https://placem.at/things?w=500&h=300&txt=0&random=100">'; } ?> </div> <div class="panel-footer"> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </div> </div> </div> <?php endwhile; wp_reset_query(); ?> <!-- end loop --> </div> </div> <!-- #post-list --> </div> <!-- .row --> </div> <!-- #content --> </div> 
Comments
Post a Comment