如何使用管理页面将照片添加到PHP博客文章

Question

I managed to create a simple blog and an admin page using PHP. I didn't use a CMS like wordpress because I wanted a deeper understanding of PHP.

I wanted to create an admin page that allowed the user to specify where in their blog posting they could put in a picture; for example, they can add a photo before the first paragraph or after.

My admin page as it is now is just a textarea input field and a submit button that submits text-only blog posts from the textarea field to the database. My thought process was that I could add img tags into the textarea input field, but the user's photos might be stored on their hard drive so I thought of the idea to store PHP code in the textarea input field to retrieve image files from the database. For example, if I wanted to place a photo after the first paragraph of the blog post, I would type something like this into the textarea field:

This is the first paragraph. Here is a photo of my vacation:
<? echo "<img src='getPhoto.php?page=blogPost'>"; ?>

Then I click the "submit button" and the paragraph with the PHP code gets submitted into my database. The page with the blog posting retrieves the text, "This is the first paragraph. Here is a photo of my vacation:" and the PHP code. The PHP code then retrieves and shows the photo.

The problem is that submitting PHP code with the blog text might be confusing for a user who is not tech-savvy or does not have any programming knowledge. The admin page should make it possible for the blog writer to place photos anywhere in their blog post without programming knowledge. I haven't found a tutorial yet that covers image placement in a PHP blog's admin page. Any help getting started would be appreciated.

Answer 1

One way to accomplish what you want is by implementing custom shortcodes. In you case it'd look something like this:

This is the first paragraph. Here is a photo of my vacation:

[image bahamas-00123]

How it works is that you do something like this:

$text = shortcodes($text);

You'd need a separate area for uploading photos and some way of keeping track of them (ie: sql, flatfiles) so you know that bahamas-00123 actually refers to /some/path/DSC-00123.JPG .

For some code please check the accepted answer of: How do I replace custom “tags” in a string?

Answer 2

You can use a text editor like ckeditor or tinymce to format the text and upload images. This way users need not be aware about the custom tags and they can place the image wherever they like.