I am trying to redesign the review summary for the product page, so it shows the list of reviews and the form to add a new review.
The form works, but the list does not. I add the summary from view.phtml like this:
<?php echo $this->getReviewsSummaryHtml($_product, false, true)?>
My summary.phtml file return this error:
Fatal error: Call to a member function getItems() on a non-object in /home/content/41/6755141/html/keepwell/buy/app/design/frontend/fvm/default/template/review/helper/summary.phtml
for this line:
<?php $_items = $this->getReviewsCollection()->getItems();?>
My summary.phtml file looks like this:
<div id="column-one-left">
<?php if ($this->getReviewsCount()): ?>
<p class="title-noline"><?php echo $this->__('Customer Reviews') ?></p>
<div id="customer-reviews">
<?php $_items = $this->getReviewsCollection()->getItems();?>
<?php if (count($_items)):?>
<?php echo $this->getChildHtml('toolbar') ?>
<dl>
<?php foreach ($_items as $_review):?>
<div class="review">
<p class="review-title"><?php echo $this->htmlEscape($_review->getTitle()) ?></p>
<p class="review-name"><?php echo $this->__('by <span>%s</span>', $this->htmlEscape($_review->getNickname())) ?></p>
<p class="review-body"><?php echo nl2br($this->htmlEscape($_review->getDetail())) ?></p>
</div>
<hr class="review" />
<dt>
<?php echo $this->htmlEscape($_review->getTitle()) ?>
</dt>
<dd>
<?php $_votes = $_review->getRatingVotes(); ?>
<?php if (count($_votes)): ?>
<table class="ratings-table">
<col width="1" />
<col />
<tbody>
<?php foreach ($_votes as $_vote): ?>
<tr>
<th><?php echo $this->escapeHtml($_vote->getRatingCode()) ?></th>
<td>
<div class="rating-box">
<div class="rating" style="width:<?php echo $_vote->getPercent() ?>%;"></div>
</div>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<?php endif; ?>
<?php echo nl2br($this->htmlEscape($_review->getDetail())) ?>
<small class="date"><?php echo $this->__('(Posted on %s)', $this->formatDate($_review->getCreatedAt()), 'long') ?></small>
</dd>
<?php endforeach; ?>
</dl>
<?php echo $this->getChildHtml('toolbar') ?>
<?php endif;?>
<div class="review">
<p class="review-title">This is the Review Title / Summary</p>
<p class="review-name">by John Q. Doe</p>
<p class="review-body">Nunc hendrerit, nisi eget adipiscing hendrerit, enim mauris elementum nibh, nec ornare nisi neque in quam. Vivamus ac ligula a felis hendrerit euismod. Etiam condimentum semper massa, ac bibendum diam lacinia ut. Nullam porttitor porttitor mi in sodales. Ut a vestibulum eros.</p>
</div>
<hr class="review" />
</div>
<hr/>
<hr/>
<div class="ratings">
<?php if ($this->getRatingSummary()):?>
<div class="rating-box">
<div class="rating" style="width:<?php echo $this->getRatingSummary() ?>%"></div>
</div>
<?php endif;?>
<p class="rating-links">
<?php echo $this->__('%d Review(s)', $this->getReviewsCount()) ?>
<span class="separator">|</span>
<?php echo $this->__('Add Your Review') ?>
</p>
</div>
<?php elseif ($this->getDisplayIfEmpty()): ?>
<p class="title-noline"><?php echo $this->__('Be the first to review this product') ?> >></p>
<?php endif; ?>
</div>
<div id="column-one-right">
<?php echo $this->getLayout()->createBlock('review/form')->setBlockId('product.review.form')->toHtml(); ?>
</div>
You have to do a little bit of work in your layout.xml. The guys at Classy Llama make it easy:
http://www.magentocommerce.com/boards/viewthread/41882/#t142654
Related
im working on my crud skills, but im having some trouble. the first page shows a list of all blog posts, when the user clicks on read more it sends the specific posts id through the url and is recieved by the destination page which uses that id to display the single post/ heres the code for that part. it actually works fine
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
like i said this all works fine. the get value is recieved and loads the post. the problem is when i try to use that $_get id in a query to insert a comment. all this code is on the one page im just showing the php without the html. anyway heres the code to insert the comment
if(isset($_POST["create_comment"])){
global $connect;
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
edit with all the code
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-8">
<h1 class="page-header">
Page Heading
<small>Secondary Text</small>
</h1>
<!-- First Blog Post -->
<?php
$connect = new db();
if(isset($_POST["create_comment"])){
global $connect;
echo "hello";
$post_id = $_GET["id"];
$comment_author = $_POST["comment_author"];
$author_email = $_POST["author_email"];
$comment_content = $_POST["comment_content"];
$comment_status = "pending";
$sql = "INSERT INTO comments(comment_post_id, comment_author, comment_email, comment_content, comment_status)
VALUES(:a,:b,:c,:d,:e)";
$stmt = $connect->link->prepare($sql);
$stmt->bindvalue(":a",$post_id);
$stmt->bindvalue(":b", $comment_author);
$stmt->bindvalue(":c",$author_email);
$stmt->bindvalue(":d",$comment_content);
$stmt->bindvalue(":e",$comment_status);
$stmt->execute();
}
function display_single_post($title,$author,$date,$image,$content){
$main_page_blog_html = "<h2>
<a href='#'>%s</a>
</h2>
<p class='lead'>
by <a href='index.php'>%s</a>
</p>
<p><span class='glyphicon glyphicon-time'></span> Posted on %s</p>
<hr>
<img class='img-responsive' src='images/%s'>
<hr>
<p>%s</p>
<hr>
<hr>";
printf("{$main_page_blog_html}",$title,$author,$date,$image,$content);
}
if(isset($_GET["id"])){
$id = $_GET["id"];
$stmt = $connect->link->query("SELECT * FROM posts WHERE post_id = $id");
while($row = $stmt->fetch()){
$post_title = $row["post_title"];
$post_author = $row["post_author"];
$post_date = date('F j, Y \a\t g:ia', strtotime( $row["post_date"] ));
$post_image = $row["post_image"];
$post_content = $row["post_content"];
$id = $row["post_id"];
display_single_post($post_title,$post_author,$post_date,$post_image,$post_content);
}
}
?>
<hr>
<!-- Blog Comments -->
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php">
<div class="form-group">
<input type="text" class="form-control" name="comment_author" placeholder="name">
</div>
<div class="form-group">
<input type="email" class="form-control" name="author_email" placeholder="email">
</div>
<div class="form-group">
<textarea class="form-control" rows="3" name="comment_content"></textarea>
</div>
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
<hr>
<!-- Posted Comments -->
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<!-- Nested Comment -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="http://placehold.it/64x64" alt="">
</a>
<div class="media-body">
<h4 class="media-heading">Nested Start Bootstrap
<small>August 25, 2014 at 9:30 PM</small>
</h4>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
</div>
</div>
<!-- End Nested Comment -->
</div>
</div>
</div>
Based on your code and your comments, I assume the page is called post.php and when you first reach the page it has the id on the url like this: post.php?id=156.
But once you submit the comments' form, since the action for said form it is simply post.php you're losing the id.
You could add the id on the action after post:
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
or add a hidden input with the id:
<input type="hidden" name="id" value="<?php echo $id; ?>">
But then you'd have to reach it with $_POST
Another option is to use the SELF for the action like this:
<form role="form" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
This will retain the id but also any other get variables you may have on the url.
//EDIT
This is a simplification of the probelm which is working, if you visit post.php?id=456 (or any number) and then press Submit, you get the proper response:
<!-- First Blog Post -->
<?php
if(isset($_POST["create_comment"])){
$post_id = $_GET["id"];
echo "The id is: $post_id";
// gets comment and inserts into the db
}
if(isset($_GET["id"])){
$id = $_GET["id"];
// calls display_single_post
}
?>
<!-- Comments Form -->
<div class="well">
<h4>Leave a Comment:</h4>
<form role="form" method="post" action="post.php?id=<?php echo $id; ?>">
<button type="submit" name="create_comment" class="btn btn-primary">Submit</button>
</form>
</div>
I am using the bootstrap framework for layout on my system. I want to arrange the layout of the page like this(See image below)
But I am facing a challenge. My code is showing this (See image below)
I need the Login forum section to go to the right like on the first picture that i have uploaded.
This is my code
<?php if($topics) : ?>
<p id="topics">
<div class="row">
<?php foreach ($topics as $topic) : ?>
<p class="topic">
<div class="row">
<div class="col">
</div>
<div class="col-md-5">
<div class="topic-content pull-right">
<h3><?php echo $topic['title']; ?></h3>
<div class="topic-info">
<?php echo $topic['name']; ?> >>
<?php echo $topic['username']; ?> >>
Posted on: <?php echo formatDate($topic['create_date']); ?>
<span class="badge pull-right"><?php echo replyCount($topic['id']); ?></span>
</div>
</div>
</div>
</div>
</p>
<?php endforeach; ?>
</p>
<?php else : ?>
<p>No Topics to Display.</p>
<?php endif; ?>
<div class="col-md-4" align="pull-right">
<div class="sidebar">
<div class="block">
<h3>Login Form</h3>
<?php if(isLoggedIn()) : ?>
<div class="userdata">
Logged in as <?php echo getUser()['username']; ?>
</div>
<br />
<form role="form" method="post" action="logout.php">
<input type="submit" name="do_logout" class="btn btn-default" value="Log Out" />
<hr>
<h4>All Topics</h4>
<h4>Create Topic</h4>
</form>
<?php else : ?>
<form role="form" method="post" action="login.php">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" placeholder="Enter Username" />
</div>
<div class="form-group">
<label>Password</label>
<input name="password" type="password" class="form-control" placeholder="password" />
</div>
<button name="do_login" type="submit" class="btn btn-primary">Login</button> <a class="btn btn-default" href="register.php">Create Account</a>
</form>
<?php endif; ?>
</div>
<div class="block">
<h3>Categories</h3>
<div class="list-group">
All topics <span class="badge pull-right"><?php echo totalPostCount() ;?></span>
<?php foreach(getCategories() as $category) : ?>
<a href="topics.php?category=<?php echo $category['id']; ?>" class="list-group-item <?php echo is_active($category['id']); ?>">
<?php echo $category['name']; ?>
<span class="badge pull-right">
<?php echo postCountByCategory($category['id']) ;?>
</span>
</a>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
<hr>
<h3>Forum Statistics</h3>
<p>
<h6>Total Number of Users: <strong><?php echo $totalUsers; ?></strong></li>
<h6>Total Number of Topics: <strong><?php echo $totalTopics; ?></strong></li>
<h6>Total Number of Categories: <strong><?php echo $totalCategories; ?></strong></li>
</ul>
There seems to be plenty of unnecessary rows and <p> tags within other <p> tags. It needs a restructure to be honest. It is best practice not to wrap divs inside <p> tags as they shouldn't really be used as a wrapper.
You want to separate the 2 columns into 2 separate Bootstrap cols which should be wrapped inside a row class.
For example:
<div class="row">
<div class="col-xs-12 col-sm-8">
<p>All your forum info here etc.</p>
</div>
<div class="col-xs-12 col-sm-4">
*Login Form Here*
*Categories Here*
</div>
</div>
The columns above will separate them into 66.66666667% by 33.33333333% width columns on desktop and then both full width (100%) on smaller devices.
you can simply use the bootstrap grid Grid system to achieve this task. Please checkout the official documentation through this link...
https://getbootstrap.com/docs/4.1/layout/grid/
However, I created a sample layout that I think fit to your requirement.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../../../favicon.ico">
<title>sample web page</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style type="text/css">
.left-block{
width:100%;
height:500px;
padding: 20px;
}
.right-block{
width:100%;
padding: 20px;
height:500px;
background-color: #D3D3D3;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-8">
<div class="left-block">
<h1>sample content</h1>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ullamcorper nisl ut sodales tincidunt. Praesent tristique lobortis tincidunt. Cras aliquet, lectus ut facilisis tempor, nulla felis porta sem, quis pulvinar lacus justo eget sapien. Integer dapibus bibendum sodales. Sed semper sagittis ex, et suscipit odio luctus vel. Fusce laoreet a sapien vitae mattis. Quisque ligula massa, sagittis vel odio vel, hendrerit iaculis leo. Aliquam erat volutpat. Fusce mollis, augue vel egestas tristique, nunc ligula placerat erat, sed venenatis elit ex et nulla. </p>
</div>
</div>
<div class="col-lg-4">
<div class="right-block">
<h2>Login Section</h2>
<hr>
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
still you have any problem, feel free to add a comment below...
Dont put structural divs inside a <p> tag! Try this:
<div class="container">
<div class="row">
<div class="col-md-4">
This is one third of the page wide (4/12)
</div>
<div class="col-md-8">
This is two thirds of the page wide (8/12)
</div>
</div>
</div>
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> this is where 'normalization' text should go </p>
</div>
<div class="col-md-4">
<p> this is where the form goes </p>
</div>
</div>
</div>
Try above code. This is an example of basic bootstrap grid layout. The first define the page as '12' - the remaining divs inside this must add up to 12 also, this example is 8 + 4 ( 2 columns ) but can also have 3 4+4+4 and so on.
You can use the following example to arrange the web page layout with Bootstrap:
<div class="col-md-12">
<div class="row">
<div class="col-md-8">
<p> Your Left area put here </p>
</div>
<div class="col-md-4">
<p> Your right area Put here </p>
</div>
</div>
</div
On my search results page I have 2 posts per row (col-md-6). The grid works fine and everything is aligned correctly, except when the excerpt or the post title is longer than the other excerpts or post titles. On my test site I have all of the titles and excerpts of my posts 1 line, and than I have 1 post that has a post title of one line and an excerpt of two lines. Since the excerpt is two lines it messes with the alignment of the rest of the posts. How could I fix this issue so that all posts no matter the length of the excerpt are aligned correctly?
When the excerpts and post titles are the same length everything is aligned
When the excerpt is longer it screws up the alignment
I'm attaching all my php files that go along with my search page. However, the main file is list-search-template.php (the last one)
search.php
<?php get_header(); ?>
<div class="content-holder clearfix">
<div class="container">
<div class="search-results-search">
<form role="search" method="get" class="search-form-search form-inline-search" action="">
<div class="input-group-search">
<input type="search" value="" name="s" class="input-sm-search search-field-search form-control-search" placeholder="<?php echo $s ?>">
</div>
</form>
</div>
<div class="row">
<div class="col-md-12" >
<div class="grid js-masonry ajax-container row">
<?php
get_template_part("loop/loop-search"); ?>
</div>
<?php get_template_part('post-template/post-nav'); ?>
</div>
</div>
</div>
<footer class="footer">
<?php get_template_part('wrapper/wrapper-footer'); ?>
</footer>
<?php get_footer(); ?>
loop-search.php
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
list-search-template.php
<?php
/**
* Grid post template
*/
?>
<?php
?>
<div class="post_content">
<div class="post_content grid-block <?php echo esc_attr(); ?>">
<?php if(has_post_thumbnail()) { ?>
<?php
if(has_post_format('video')){
$embed = get_post_meta(get_the_ID(), 'novablog_video_embed', true);
$vimeo = strpos($embed, "vimeo");
$youtube = strpos($embed, "youtu");
if($youtube !== false){
$video_id = str_replace( 'http://', '', $embed );
$video_id = str_replace( 'https://', '', $video_id );
$video_id = str_replace( 'www.youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtube.com/watch?v=', '', $video_id );
$video_id = str_replace( 'youtu.be/', '', $video_id );
$video_id = str_replace( '&feature=channel', '', $video_id );
$link = '//www.youtube.com/embed/'.esc_attr($video_id);
}
if($vimeo !== false){
//Get ID from video url
$video_id = str_replace( 'http://vimeo.com/', '', $embed );
$video_id = str_replace( 'http://www.vimeo.com/', '', $video_id );
$video_id = str_replace( 'https://vimeo.com/', '', $video_id );
$link = '//player.vimeo.com/video/'.esc_attr($video_id);
}
}
?>
<?php if(has_post_format('video')){ ?>
<a class="popup-youtube" href="<?php echo esc_attr($link); ?>" title="<?php the_title_attribute(); ?>">
<?php if(has_post_format('video')){
echo '<div class="cover-video"></div>';
} ?>
<?php } ?>
<div class="two-front-container">
<a title="<?php the_title_attribute(); ?>" href="<?php the_permalink(); ?>"><?php the_post_thumbnail('full', array('class' => 'medium-front-thumbnail')); ?></a>
</div>
<?php } ?>
</div>
<div>
<div class="front-page-date"><?php echo human_time_diff( get_the_time('U'), current_time('timestamp') ) . ' ago'; ?></div>
<div class="front-page-post-title"><?php the_title(); ?></div>
<div class="post_content"><p class="front-page-post-excerpt"><?php echo get_the_excerpt(); ?></p><div class="clear"></div></div>
<div class="front-page-post-info">
<a class="moretext" href="<?php the_permalink(); ?>">Read more</a>
<?php get_template_part( 'includes/front-shop-the-post' ); ?>
<?php get_template_part( 'includes/share-buttons' ); ?>
<div class="front-comments"><?php comments_popup_link ('0', '1', '%', 'comment-count', 'none'); ?></div>
</div>
</div>
</div>
The simplest way I've found to solve this is using a clearfix, but using Bootstrap's responsive utilities to only use the clearfix at the viewport sizes you want. You don't need to worry about opening and closing rows.
Here's a screenshot of a JSFiddle demonstration:
Note the JSFiddle uses http://lorempixel.com/ for images, and they can be slow to load sometimes - give it time.
To implement this in your code, simply add a $count in loop-search.php, and include the clearfix every 2nd post:
<?php /* Loop Name: Loop list-posts blog */
$count = 0;
if (have_posts()) :
while (have_posts()) : the_post();
$count++;
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php get_template_part('post-template/list-search-template'); ?>
</div>
<?php if ($count%2 === 0) { ?>
<div class="clearfix hidden-xs hidden-sm"></div>
<?php }
<?php endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
The clearfix is not applied for xs and sm viewports, so only becomes effective at md and larger - which is what you want.
Note - you have js-masonry classes in your code, if you're really using Masonry.js that will probably mess things up. Maybe you were experimenting with it instead of trying to get this horizontal alignment working? If you're not using it now make sure you've removed the JS links and remove the classes to avoid confusion.
Since you're keeping them all in the same row, there's no clearfix. Since you have widths of either 12 or 6 (full or half) you could close (and reopen) a new row every other post. In the cases where it's a small screen, the side by side height won't matter since each post will be on its own line anyway.
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$postCount = 0; // Initialize counter
while (have_posts()) : the_post();
$postCount++; // Increment counter
?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php
// Print row if needed
if($postCount % 2 == 0):
?>
</div><div class="grid js-masonry ajax-container row">
<?php
endif;
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
<!-- end snippet -->
The following code will help you to properly add row after every 2 columns.
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$counter = 0;
while (have_posts()) : the_post();
$post_count = $GLOBALS['wp_query']->post_count;
?>
<?php if($counter++%2==0){ ?>
<div class="row">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php
get_template_part('post-template/list-search-template');
?>
</div>
<?php if($counter%2==0 || $counter == $post_count){ ?>
</div>
<?php } ?>
<?php
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
I think the issue with load more button will be because of lack of div closing tag.
There is a very easy solution. You need to follow 2 steps.
Remove <div class="grid js-masonry ajax-container row"> from "search.php".
Edit "loop-search.php" with the below code:
<?php /* Loop Name: Loop list-posts blog */ ?>
<?php
if (have_posts()) :
$cnt = 1;
$endRow = false;
while (have_posts()) : the_post();
?>
<?php
if($cnt%2 != 0){
$endRow = true;
?>
<div class="grid js-masonry ajax-container row">
<?php } ?>
<div id="post-<?php the_ID(); ?>" class="post-list_h ajax-post-wrapper block col-xs-12 col-sm-6 col-md-6" >
<?php get_template_part('post-template/list-search-template'); ?>
</div>
<?php
if($cnt%2 == 0){
$endRow = false;
?>
</div>
<?php } ?>
<?php
$cnt++;
endwhile; wp_reset_postdata(); ?>
<?php else: ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
The proper workaround for this issue is to use css property display:flex see fiddle
But in your case you are using bootstrap i think, what you can do is to get the highest height of the div and apply it to all div using jquery eg:
jQuery(document).ready(function($){
var $divs = $('.row > div');
var highest = [];
$.each($divs, function($index, $item) {
highest.push($($item).height()); // Push all divs height into array
})
function compareNumbers(a, b) {
return b - a;
}
//console.log();
highest = highest.sort(compareNumbers); // sort Array
$('.row > div').height(highest[0]) // Apply the highest height to all divs
});
See live demo here
Give excerpt a fixed height using css. Then if the text is available or not. It would take that height.
Perhaps you could force having 1 line titles and excerpts. Check the example below.
.caption h3, .caption p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
<p>Short excerpt</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 2">Card 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 3">Card 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis auteirure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="thumbnail">
<img src="http://i68.tinypic.com/161z3fc.jpg" alt="" width="" height="">
<div class="caption">
<h3 title="Card 4">Card 4</h3>
<p>Another short excerpt</p>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
EDIT
If you choose to force having one line only, card Titles and excerpts, then try adding also title attribute in card titles. For example.
<h3 title="Card 1 is not like the rest cards. It's title is longer than the others.">Card 1 is not like the rest cards. It's title is longer than the others.</h3>
i've this problem with WP_Query and the HTML output:
The Query:
<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$caps = new WP_Query();
$caps->query('posts_per_page=4&category_name=entretencion');
while($caps->have_posts()) {
$caps->the_post();
$count++;
if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><?php $category = get_the_category(); echo $category[0]->cat_name; ?></h4>
<div class="post-image">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt="">
</div>
<div class="post-container">
<h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
<div class="post-content">
<p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
</div>
</div>
<div class="post-meta">
<span class="comments">24</span>
<span class="author">nextwpthemes</span>
<span class="date">13 Jan 2013</span>
</div>
<!-- End of first post -->
<?php } if($count >= 2) { //Contador ?>
<!-- Second and others posts -->
<div class="other-posts">
<ul class="no-bullet">
<!-- Repeat this list with post 2, 3, and 4 -->
<li id="<?php echo $post->ID; ?>">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt="">
<h3 class="post-title">Check Out the New Recommended Resources on Webdesigntuts+</h3>
<span class="date">13 Jan 2013</span>
</li>
</ul>
</div>
<?php } // Fin contador ?>
<?php } ?>
</article>
But the HTML output repeat 3 div with class other-post.
The problem (left) the original (right)
How to repeat only li tags?
<!-- Category posts -->
<!-- Entretencion -->
<article class="six column">
<?php
$count = '';
$perpage = 4;
$caps = new WP_Query();
$caps->query('posts_per_page='.$perpage.'&category_name=entretencion');
while($caps->have_posts()) {
$caps->the_post();
$count++;
if($count == 1) {
?>
<!--First post -->
<h4 class="cat-title"><?php $category = get_the_category(); echo $category[0]->cat_name; ?></h4>
<div class="post-image">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/imagepost1.jpg" alt="">
</div>
<div class="post-container">
<h2 class="post-title">Create a Flexible Folded Paper Effect Using CSS3 Features</h2>
<div class="post-content">
<p>Venenatis volutpat orci, ut sodales augue tempor nec. Integer tempus ullamcorper felis eget dipiscing. Maecenas orci justo, mollis at tempus ac, gravida non</p>
</div>
</div>
<div class="post-meta">
<span class="comments">24</span>
<span class="author">nextwpthemes</span>
<span class="date">13 Jan 2013</span>
</div>
<!-- End of first post -->
<?php
}
//only on second post/loop
if($count == 2) {
?>
<!-- Second and others posts -->
<div class="other-posts">
<ul class="no-bullet">
<?php
}
if($count >= 2) { //Contador
?>
<!-- Repeat this list with post 2, 3, and 4 -->
<li id="<?php echo $post->ID; ?>">
<img src="<?php bloginfo( 'template_url' ); ?>/upload/thumb1.jpg" alt="">
<h3 class="post-title">Check Out the New Recommended Resources on Webdesigntuts+</h3>
<span class="date">13 Jan 2013</span>
</li>
<?php
}
//again, only on final loop
if($count == $perpage) {
?>
</ul>
</div>
<?php
}
}
?>
</article>
That will only output one li in the second loop, and by the end of $perpage (i keep those 4 perpage you ask to the original WP_Query).
It's ugly, but should works.
I am new to joomla and trying to change a simple html template to joomla template. I made changes over the templatedetails.xml and index.php. Now my template is visible at templates of joomla. But it is not allowing to add menus or perform any joomla operation over to it.
Here is my index.php file,
<?php
/****************************************************
#####################################################
##-------------------------------------------------##
## TEMP ##
##-------------------------------------------------##
## Copyright = TEMP - 2013 ##
## Date = april 2013 ##
## Author = XYZ ##
## Websites = http://www.google.com ##
## ##
#####################################################
****************************************************/
// no direct access
defined('_JEXEC') or die('Restricted access');
/* The following line loads the MooTools JavaScript Library */
JHtml::_('behavior.framework', true);
/* The following line gets the application object for things like displaying the site name */
$app = JFactory::getApplication();
$csite_name = $app->getCfg('sitename');
$path = $this->baseurl.'/templates/'.$this->template;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jdoc:include type="head" />
<?php $mod_right = $this->countModules( 'position-7' );
if ( $mod_right ) {
$width = '';
} else {
$width = '-full'; }
?>
<?php
$newsflash = $this->params->get("newsflash", " Content to be added here.. ");
?>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/superfish.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/hoverIntent.js"></script>
<script language="javascript" type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template?>/js/hide.js"></script>
<script type="text/javascript" src="templates/<?php echo $this->template ?>/js/slideshow.js"></script>
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />
<!--[if IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
<script type="text/javascript">
// initialise plugins
jQuery(function(){
jQuery('.navigation ul').superfish();
});
</script>
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
</div>
<div id="menu">
<ul id="main">
<li class="current_page_item">Home</li>
<li>Courses and Admission </li>
<li>Department</li>
<li>Research</li>
<li>Hospital</li>
</ul>
<ul id="feed">
<li>Webmail</li>
<li>Contact us </li>
</ul>
</div>
</div>
<!-- end header -->
<div id="wrapper">
<!-- start page -->
<div id="page">
<div id="sidebar1" class="sidebar">
<ul>
<li>
<h2>Recent Posts</h2>
<marquee scrollamount="3" direction="up" onmouseout="start()" onmouseover="stop();">
<ul>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Proin gravida orci porttitor</li>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Proin gravida orci porttitor</li>
</ul>
</marquee>
</li>
<li>
<h2>Recent Comments</h2>
<ul>
<li> Templates on Aliquam libero</li>
<li> Templates on Consectetuer adipiscing elit</li>
<li> Templates on Metus aliquam pellentesque</li>
<li> Templates on Suspendisse iaculis mauris</li>
<li> Templates on Urnanet non molestie semper</li>
<li> Templates on Proin gravida orci porttitor</li>
</ul>
</li>
<li>
<h2>Categories</h2>
<ul>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
</ul>
</li>
<li>
<h2>Archives</h2>
<ul>
<li>September (23)</li>
<li>August (31)</li>
<li>July (31)</li>
<li>June (30)</li>
<li>May (31)</li>
</ul>
</li>
</ul>
</div>
<!-- start content -->
<div id="content">
<div class="flower">
<img src="templates/<?php echo $this->template ?>/images/img06.jpg" width="510" height="250" alt="logotype" /></div>
<div class="post">
<h1 class="title">Welcome to TEMP !</h1>
<div class="entry">
<p>
<strong>TEMP </strong> is one of the SIX TEMP like apex healthcare institutes being established by the Ministry of Health & Family Welfare, Government of India under the Pradhan Mantri Swasthya Suraksha Yojna (PMSSY). With the aim of correcting regional imbalances in quality tertiary level healthcare in the country, and attaining self sufficiency in graduate and postgraduate medical education and training the PMSSY planned to set up 6 new TEMP like institutions in under served areas of the country.</p>
<p>These institutions are being established by an Act of Parliament on the lines of the original All India Institute of Medical Sciences in New Delhi which imparts both undergraduate and postgraduate medical education in all its branches and related fields, along with nursing and paramedical training. to bring together in one place educational facilities of the highest order for the training of personnel in all branches of health care activity. </p>
<p> </p>
<p class="links">«« Read More »»</p>
</div>
</div>
<div class="post">
<h2 class="title">Sample Tags</h2>
<div class="entry">
<h3>An H3 Followed by a Blockquote:</h3>
<blockquote>
<p>“Donec leo, vivamus nibh in augue at urna congue rutrum. Quisque dictum integer nisl risus, sagittis convallis, rutrum id, congue, and nibh.”</p>
</blockquote>
<h3>Bulleted List:</h3>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
</ul>
<h3>Numbered List:</h3>
<ol>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Phasellus nec erat sit amet nibh pellentesque congue.</li>
<li>Cras vitae metus aliquam risus pellentesque pharetra.</li>
</ol>
<p class="links">«« Read More »»</p>
</div>
</div>
<!-- end content -->
<!-- start sidebars -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<form id="searchform" method="get" action="#">
<div>
<h2>Site Search</h2>
<input type="text" name="s" id="s" size="15" value="" />
</div>
</form>
</li>
<li>
<h2>Tags</h2>
<p class="tag">dolor ipsum lorem sit amet dolor ipsum lorem sit amet</p></li>
<li>
<h2>Calendar</h2>
<div id="calendar_wrap">
<table summary="Calendar">
<caption>
October 2009
</caption>
<thead>
<tr>
<th abbr="Monday" scope="col" title="Monday">M</th>
<th abbr="Tuesday" scope="col" title="Tuesday">T</th>
<th abbr="Wednesday" scope="col" title="Wednesday">W</th>
<th abbr="Thursday" scope="col" title="Thursday">T</th>
<th abbr="Friday" scope="col" title="Friday">F</th>
<th abbr="Saturday" scope="col" title="Saturday">S</th>
<th abbr="Sunday" scope="col" title="Sunday">S</th>
</tr>
</thead>
<tfoot>
<tr>
<td abbr="September" colspan="3" id="prev">« Sep</td>
<td class="pad"> </td>
<td colspan="3" id="next"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td id="today">4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
<td>14</td>
</tr>
<tr>
<td>15</td>
<td>16</td>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
<td>21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td class="pad" colspan="4"> </td>
</tr>
</tbody>
</table>
</div>
</li>
<li>
<h2>Categories</h2>
<ul>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
<li>Aliquam libero</li>
<li>Consectetuer adipiscing elit</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
<li>Metus aliquam pellentesque</li>
<li>Suspendisse iaculis mauris</li>
<li>Urnanet non molestie semper</li>
<li>Proin gravida orci porttitor</li>
<li>Metus aliquam pellentesque</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebars -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
</div>
<div id="footer">
<p class="copyright">© 2009 All Rights Reserved • Design by TEMP IT Dept..</p>
<p class="link">Privacy Policy • Terms of Use</p>
</div>
</html>
Please suggest how i can change this html template to exact joomla template. Thanks.
Replace conrete content with references to module positions, message container and component output. Your template will then look like
<?php
/**
* My template
*
* #copyright (C)2013 Neetesh <neetesh#example.com>
* #author XYZ
* #link http://www.google.com
*/
// No direct access
defined('_JEXEC') or die('Restricted access');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<link rel="icon" type="image/gif" href="<?php echo $this->baseurl; ?>/templates/<?php echo $this->template; ?>/favicon.gif" />
<!--[if IE 7]>
<link href="templates/<?php echo $this->template ?>/css/ie7.css" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<!-- start header -->
<div id="header">
<div id="logo">
<jdoc:include type="modules" name="logo" />
</div>
<div id="menu">
<jdoc:include type="modules" name="header" />
</div>
</div>
<div id="wrapper">
<div id="page">
<div id="sidebar1" class="sidebar">
<jdoc:include type="modules" name="left" />
</div>
<div id="content">
<jdoc:include type="message" />
<jdoc:include type="component" />
</div>
<div id="sidebar2" class="sidebar">
<jdoc:include type="modules" name="right" />
</div>
<div style="clear: both;"> </div>
</div>
</div>
<div id="footer">
<jdoc:include type="modules" name="footer" />
</div>
</html>
The example above provides the module positions logo, header, left, right, and footer. Add these to the templateDetails.xml.
Next, find modules producing the sudebar content, you want, and assign them to the position, where you want to see them.