Home : Forums : Authoring and Programming : How to Add Image Uploading to Your CMS

How to Add Image Uploading to Your CMS

You are currently not logged in. You can view the forums, but cannot post messages.

31-May-12 00:00

Delete

Edit

Elated

Gold

Posts: 292

From: Brighton, UK

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.

31-May-12 13:05

Delete

Edit

mubuuba

No stars yet

Posts: 8

From: Vienna

@Thanks Matt.

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

Hi Volks Enjoy It.

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

Thanks Matt.

03-Jun-12 09:24

Delete

Edit

hannz

No stars yet

Posts: 1

From: Viljandi, Estonia

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.

03-Jun-12 09:27

Delete

Edit

MarcusS

No stars yet

Posts: 7

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.

11-Jun-12 10:27

Delete

Edit

MarcusS

No stars yet

Posts: 7

@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?

15-Jun-12 03:45

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/

03-Jul-12 04:00

Delete

Edit

cydo

No stars yet

Posts: 2

From: Jakarta, Indonesia

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..

13-Jul-12 02:40

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/

13-Jul-12 11:51

Delete

Edit

LightningPL

No stars yet

Posts: 2

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?

26-Jul-12 09:12

Delete

Edit

eddie

No stars yet

Posts: 15

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

27-Jul-12 01:54

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/

27-Jul-12 05:27

Delete

Edit

LightningPL

No stars yet

Posts: 2

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?

27-Jul-12 06:56

Delete

Edit

eddie

No stars yet

Posts: 15

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.

30-Jul-12 22:38

Delete

Edit

cydo

No stars yet

Posts: 2

From: Jakarta, Indonesia

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

01-Aug-12 10:07

Delete

Edit

ekaja

No stars yet

Posts: 1

From: Tirana, Albania

@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.

03-Aug-12 02:48

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/

25-Oct-12 08:08

Delete

Edit

meTony

No stars yet

Posts: 1

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.

31-Oct-12 20:15

Delete

Edit

lafamosa

No stars yet

Posts: 1

From: Turkey

How to add a category list too?

12-Nov-12 22:02

Delete

Edit

jonathanzuniga

No stars yet

Posts: 1

From: Tijuana, Mexico

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

Thank you so much for your great work.

15-Nov-12 18:55

Delete

Edit

jvt4

No stars yet

Posts: 4

From: USA

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]

21-Nov-12 20:28

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/

23-Nov-12 12:55

Delete

Edit

jvt4

No stars yet

Posts: 4

From: USA

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]

17-Dec-12 15:51

Delete

Edit

matt

Gold

Posts: 3304

From: Southern Highlands, NSW, Australia

@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/