How to Add Image Uploading to Your CMS

This is a forum topic for discussing the article "How to Add Image Uploading to Your CMS":

http://www.elated.com/articles/add-image-uploading-to-your-cms/

Learn how to modify a PHP and MySQL content management system so that you can upload an image for each article. Full CMS code download included.

@Thanks Matt.

You are the Number ONE. !!!!!!

Hi Volks Enjoy It.

Let me say, a Comment Sytem Would be Great too.

Thanks Matt.

I used your first CMS tutorial as an base for a CMS and I have added:

a comment section
disabling or enabling comments per article,
an upload facility for some sort of an introduction image
added a sidebar to show some recommended links, an ad and a random article that's published
changed the date column in SQL to datetime to add more exact listing of new articles

Thank you for your tutorial as it has helped me develop my PHP OOP style programming skills a lot.

Awesome tutorial Matt!

if you're going to write any more tutorials for this CMS I'd have to say a archive pagination tutorial or a comment system would be very useful and appreciated.

@hannz: Any chance you could do a small tutorial on how to implement comments, if you ever have the time?

@matt: Just wondering, any specific reason you chose to do this tutorial using the original CMS instead of the one with Categories?

@MarcusS: The main reasons were (1) to keep the code size down in the article, and (2) because some people might want to add image uploads without having categories.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,

very nice and clean tutorial about image uploading to CMS.

how do i made it so that this cms can upload multiple image?

I'm doing my own photography website which needs to display lots of photo..

@cydo: It depends what you mean exactly. Multiple images from the same form? Multiple images attached to a single article? Additional images that aren't associated with an article?

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

I'm also wondering how to attach multiple images to the same article. I've made some changes in the editArticle.php (in the form), so I can add dynamiclly multiple inputs (as many as I want), but I have some trouble to change the storeUploadedImage in Article.php . Maybe you could give me a hint?

Hi Matt can you explain how to upload multiple images? And also if possible how to use that to create a gallery page? Thanks!!

@LightningPL @eddie: If you want an arbitrary number of images per article then you'll need to create a separate articleImages table with articleId, filename, and so on, so you can associate each uploaded image with the correct article. You'll then probably want to add an imageIds array to the Article class to store the images associated with the article. Then mod storeUploadedImage() so that it stores all the uploaded images, creates their records in the articleImages table (and ids in the imageIds array), and saves the Article record. Then you'll need to modify the "view article" code to handle display of multiple images per article.

In short, it's quite a lot of work!

If there's enough demand, and many people find it useful to associate more than 1 image per article, I may write a tutorial on it at some point. If you just want to include lots of images within an article's content then you're probably better off using FTP and adding the image URLs within the content as img tags.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Hi Matt,

First of all (what I've forgot to mention earlier) great tutorials, they a a great source of knowleadge and inspiration.

Also maybe your idea of uploading images through ftp and attaching URLs to the articles is more resonable. What do you think about (I mean if it's rational):

creating a folder with the title of the article, where all the images for this article would be stored (if the titleis changed, so will bethe folder name too). Then reading all the files from the folder and printing them on the website?

Hi Matt I posted questions in a few different forums' topics
and I want to thank you for taking the time to answer all of them
I really appreciate, they are all very helpful, and I'm a big fan of your website and the tutorials.
Thanks again.

@matt: yes, i need t to associate more than 1 image per article. can you make the tutorial? thank you in advanced

@Matt: I would really like to thank you for all this amazing work. You're helping us a lot, many thanks!!!!
I am integrating this amazing cms on a website but:
What if i would like to add another table for some news, or some job descriptions? Should i follow the same style? Note that I will not need to have any photo for this other table.

I mean to add two different tables in database and manage them accordingly:
News: id, title, source(oprional)
Jobs: id, job title, Essential Duties, Essential Skills, Desirable Skills, ApplyTo(email)

I would really appreciate your advice in general terms before starting with the implementation.

Again, Thank a lot for this wonderfull work.

@LightningPL: Yes, that could work, if you mean reading them automatically - though of course you wouldn't have any control over exactly where each image appears in the article page. Depends what you want to do really. You could also use the article ID instead of the title for the folder name, which might be easier to work with.

@ekaja: Yes, I would probably create separate DB tables and PHP classes for those content types, if they're sufficiently different from regular articles. You can base them on the original articles table / Article class. For content that is similar to articles, I would instead store them in the articles table and use categories ( http://www.elated.com/articles/add-article-categories-to-your-cms/ ) to distinguish them.

Thanks for the kind words everyone - I really appreciate it.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

matt, first I'd like to thank you for the great tutorials you have given to the community. I have a question relating to the image upload script. I was wondering how to limit the form to except only jpg images and if it will except only the extension jpg or to convert jpeg to jpg. Help on this would be much appreciated as I've attempted a few things with no success. It would be nice to be able to notify the admin on submit that the extension used was not an excepted file type and do a header to bring them back to the form to correct it instead of taking them to the list of articles saying your changes have been saved.

How to add a category list too?

Hi, could you PLEASE make a tutorial on how to upload multiple images to an article?

Thank you so much for your great work.

Hi Matt, very great and useful tut. I am wanting to integrate a way to load pages of the CMS data without reloading the page content. Basically I am wondering if it is possible to integrate Ajax calls to avoid reloading of index page on your CMS easily. Thanks in advance!

[Edited by jvt4 on 15-Nov-12 18:58]

@meTony: Depends how strict you want it to be. You could just compare the filename extension (the Article::storeUploadedImage() method shows how to get this) to the string ".jpg" or ".jpeg". Obviously this could be faked. Or you can use http://php.net/manual/en/function.getimagesize.php to inspect the image data itself.

@lafamosa: See http://www.elated.com/articles/add-article-categories-to-your-cms/

@jonathanzuniga: I'll see if I have time. Also see my hints earlier in this thread.

@jvt4: You mean on the front end? Certainly possible. jQuery's Ajax methods - especially load() - should do what you need. More info:

http://www.elated.com/articles/ajax-with-jquery-a-beginners-guide/

Cheers,
Matt

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Yes I am trying to integrate front-end ajax. My steps so far are:

1.) Created a new page called "content.php" with a div "#content" called content which is supposed to initially load "homePage.php" inside of it using jQuery Ajax .load;

2.) Edited homePage.php's article-specific links to "viewArticle.php"

    $('#getArticle').click( function() {
      var data = { articleId=$article };
      $('#content').load( "viewArticle.php", data );
    } );

3.) Edited homePage.php's bottom link to "viewArchive.php"

    $('#getArchive').click( function() {
      var data = { ???NULL??? };
      $('#content').load( "archive.php", data );
    } );

Is this the right direction? It seems like it could work but seems like there's an easier way.

[Edited by jvt4 on 23-Nov-12 13:03]

@jvt4: Yes that seems like the right idea to me.

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

Matt, great job on the tutorials. I must say I have learned an enormous amount of php over the last few months due to using your CMS as a foundation.

However, I am having a bit of an issue when I move everything from my localhost to my mediatemple server. I have fixed a ton of the errors that I had but these two persist.

1) The dates bump one day back every time I add a new post. Also, when I update the post it bumps one day further back. I have changed the timezone to America/Chicago from the php website and have looked at a few of the UNIX time fixes and havent really found anything that worked yet.

2) I am getting an invalid argument error and header error when I try to delete a post. Here is the error that I get from the browser (this is for a church so Article was replaced by Sermon):

[i][b]Warning: Invalid argument supplied for foreach() in tylercookmedia.com/html/clients/agape/admin/classes/Sermon.php on line 162

Warning: Invalid argument supplied for foreach() in tylercookmedia.com/html/clients/agape/admin/classes/Sermon.php on line 167

Warning: Cannot modify header information - headers already sent by (output started at tylercookmedia.com/html/clients/agape/admin/classes/Sermon.php:162) in tylercookmedia.com/html/clients/agape/admin/add-sermon.php on line 145[/b]
[/i]

Here is the code from all of those lines and I am pretty much stuck as to what the problem is sense it works locally but not on the live server.

line 162

// Delete all fullsize images for this Sermon
    foreach (glob(SERMON_IMAGE_PATH . "/" . IMG_TYPE_FULLSIZE . "/" . $this->id . ".*") as $filename) {
      if ( !unlink( $filename ) ) trigger_error( "Sermon::deleteImages(): Couldn't delete image file.", E_USER_ERROR );
    }
   

Line 167

 
    // Delete all thumbnail images for this Sermon
    foreach (glob( SERMON_IMAGE_PATH . "/" . IMG_TYPE_THUMB . "/" . $this->id . ".*") as $filename) {
      if ( !unlink( $filename ) ) trigger_error( "Sermon::deleteImages(): Couldn't delete thumbnail file.", E_USER_ERROR );
    }

Header Error on line 145 (im assuming that once the for each error is resolved this one will work itself out)

function deleteSermon() {

  if ( !$sermon = Sermon::getById( (int)$_GET['sermonId'] ) ) {
    header( "Location: add-sermon.php?error=sermoneNotFound" );
    return;
  }

  $sermon->deleteImages();
  $sermon->delete();
  header( "Location: add-sermon.php?status=sermonDeleted" );
}

Any ideas on what could be causing this would be much appreciated.

@tylercook:

1) Make sure your PHP timezone is the same as the MySQL timezone on the server.

2) The "Cannot modify header information" error is merely a side-effect of the first error being reported.

You'll want to add some debugging to see what glob(SERMON_IMAGE_PATH . "/" . IMG_TYPE_FULLSIZE . "/" . $this->id . ".*") is actually returning. It should be an array. If it's not then you'll get that "Invalid argument supplied" error. My guess is it's returning FALSE which means there's a problem accessing the filesystem (eg permissions problem or file not found).

--
Matt Doyle, Elated
3rd Edition of my jQuery Mobile book out now! Learn to build mobile web apps. Free sample chapter: http://store.elated.com/

I used your CMS tutorial and then added the Category tutorial and everything worked great. When I went to add the images tutorial, I received error on the adding new articles page:

Warning: PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens in /Applications/MAMP/htdocs/cms/classes/Article.php on line 292

Warning: PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens in /Applications/MAMP/htdocs/cms/classes/Article.php on line 292

Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/cms/classes/Article.php:292) in /Applications/MAMP/htdocs/cms/admin.php on line 133

I wasn't sure why this error was popping up. Any solution? They seem to work independently; however, when I use the code from the image uploaded and category, it pops up with errors.

Matt,
Is there any basic solution to help solve the problem I'm having with the above post.

The Category and Image upload don't seem to work together. I kept receiving errors.

Original Post:
I used your CMS tutorial and then added the Category tutorial and everything worked great. When I went to add the images tutorial, I received error on the adding new articles page:

Warning: PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens in /Applications/MAMP/htdocs/cms/classes/Article.php on line 292

Warning: PDOStatement::execute(): SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens in /Applications/MAMP/htdocs/cms/classes/Article.php on line 292

Warning: Cannot modify header information - headers already sent by (output started at /Applications/MAMP/htdocs/cms/classes/Article.php:292) in /Applications/MAMP/htdocs/cms/admin.php on line 133

I wasn't sure why this error was popping up. Any solution? They seem to work independently; however, when I use the code from the image uploaded and category, it pops up with errors.