Codeigniter: showing post thumbnail with every post - php

Question

I am trying to setup a demo blog and i want every post to have a thumbnail. Look at the blog first: my demo blog. I can create new blog post from here creating new post and successfully show them in the blog. I also have gallery page where i can upload images, look here: gallery page. but i want the new post page to have the image upload option and it should add a single image to every post that i publish from the new post page like so: example. How i can i do that? I have tried so many times but failed to show image with every post.
Model for post:
class Post extends CI_Model
{
function get_posts($num=20, $start=0) {
$this->db->select()->from('posts')->where('active',1)->order_by('date_added', 'desc')->limit(20,0);
$query = $this->db->get();
return $query->result_array();
}
function get_posts_count() {
$this->db->select('postID')->from('posts')->where('active', 1);
$query = $this->db->get();
return $query->num_rows();
}
function get_post($postID) {
$this->db->select()->from('posts')->where(array('active'=>1, 'postID'=> '$postID'))->order_by('date_added', 'desc');
$query = $this->db->get();
return $query->first_row('array');
}
function insert_post($data) {
$this->db->insert('posts', $data);
return $this->db->insert_id();
}
}
Controller for post:
class Posts extends CI_Controller
{
function __construct() {
parent::__construct();
$this->load->model('post');
$this->load->helper('form');
}
function index($start=0) {
$data['posts']=$this->post->get_posts(5, $start);
$this->load->library('pagination');
$config['base_url'] = base_url() . 'posts/index/';
$config['total_rows'] = $this->post->get_posts_count();
$config['per_page'] = 5;
$this->pagination->initialize($config);
$data['pages'] = $this->pagination->create_links();
$this->load->view('header');
$this->load->view('post_index',$data);
$this->load->view('footer');
}
function post($postID) {
$data['post']= $this->post->get_post($postID);
$this->load->view('post',$data);
}
function new_post() {
if ($_POST) {
$data=array(
'title'=> $_POST['title'],
'post' => $_POST['post'],
'active'=> 1
);
$this->post->insert_post($data);
redirect(base_url().'posts/');
} else {
$this->load->view('new_post');
}
}
}
Index page view: where all blog posts are shown:
<?php
if (!isset($posts)) {
?>
<p>there is currently no post in the database</p>
<?php
} else {
foreach ($posts as $row) {
?>
<h2 class="title"><a class="link_title" href="<?php echo base_url()?>posts/post/<?echo $row['postID']?>"><?php echo $row['title']?></a><a class="edit" href="<?php echo base_url()?>posts/editpost/<?echo $row['postID']?>">Edit</a> / <a class="delete" href="<?php echo base_url()?>posts/<?echo $row['postID']?>">Delete</a></h2>
<p><?php echo substr(strip_tags($row['post']),0,200) . ".."?></p>
<p>Read more</p>
<hr>
<?php
}
}
?>
<?php echo $pages; ?>
This is the new post page view where i want the image upload option available:
<form action="<?php echo base_url()?>posts/new_post" method="post">
<p>Title: <input name="title" type="text"></p>
<p>Description: <br><textarea name="post" cols="50" rows="30"></textarea></p>
<p><input type="submit" value="Add Post"></p>
</form>
I have also some codes to upload image to the galley page. I am sharing this if it helps any.
Gallery model:
class Gallery_model extends CI_Model
{
var $gallery_path;
var $gallery_path_url;
function __construct()
{
parent::__construct();
$this->gallery_path = './images';
$this->gallery_path_url = base_url() . 'images/';
}
function do_upload() {
$config = array(
'allowed_types' => 'jpg|png|jpeg',
'upload_path' => $this->gallery_path
);
$this->load->library('upload', $config);
$this->upload->do_upload();
$image_data = $this->upload->data();
$config = array(
'source_image' => $image_data['full_path'],
'new_image' => $this->gallery_path . '/thumbs',
'maintain_ratio' => true,
'width' => 150,
'height' => 75
);
$this->load->library('image_lib', $config);
$this->image_lib->resize();
}
function get_images() {
$files = scandir($this->gallery_path);
$files = array_diff($files, array('.', '..', 'thumbs'));
$images = array();
foreach ($files as $file) {
$images[] = array(
'url' => $this->gallery_path_url . $file,
'thumb_url' => $this->gallery_path_url . 'thumbs/' . $file
);
}
return $images;
}
}
Gallery controller:
class Gallery extends CI_Controller
{
function index() {
$this->load->model('Gallery_model');
if ($this->input->post('upload')) {
$this->Gallery_model->do_upload();
}
$data['images'] = $this->Gallery_model->get_images();
$this->load->view('header');
$this->load->view('gallery', $data);
$this->load->view('footer');
}
}
Gallery view:
<div class="gallery">
<?php if (isset($images) && count($images)):
foreach ($images as $image): ?>
<div class="thumbs">
<a href="<?php echo $image['url']; ?>">
<img src="<?php echo $image['thumb_url']; ?>" alt="">
</a>
</div>
<?php endforeach; else: ?>
<div class="blank_gallery">Please upload some pictures here</div>
<?php endif; ?>
</div>
<div class="upload">
<?php
echo form_open_multipart('gallery');
echo form_upload('userfile');
echo form_submit('upload', 'Upload');
echo form_close();
?>
How can this gallery page codes be used with the new post page page so that every post has a thumbnail .
I am learning php. Don't know know how to figure this out. Please help me.

Answer 1

Maybe i didn't understand your problem, but i can figure that you will need this plugin:
[http://jquery.malsup.com/form][1]
[Example at : http://jquery.malsup.com/form/progress.html][2]
This would help you to upload the pic first then edit/save the article, because your "gallery page" will only save and upload images and you need to link these 2 pages with this ajax image plugin.