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.
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?
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.
Related
I need to link individually uploaded images (via an image field) to different external URLs (e.g. Link one image in one post to a website outside of my own). I've found modules that allow me to link image fields to nodes within my drupal site, but nothing that allows me to link uploaded images individually to different urls. That said, I figured I could create a text field, input a URL there, and set my Image Field in views to be linked to the contents of that field. E.g. Destination: [field_link_image_to]
However that doesn't seem to be do-able either. Any suggestions as to how I can go about doing this?
Use Link field module (https://www.drupal.org/project/link). After enabling add this field to the same content which contains the image you want to link to specific URLs.
Create a view then include both image field and link field url (you will get the exact URL which you will enter into the link field) then add custom text and create your html accordingly.
Let me know if it works or you want something else.
Thanks.
I'm having some trouble with CKEditor.
I have created a blog for my website and a back end section to write new posts and approve comments etc. It's all working fine and I use CKEditor to write and edit posts.
When writing a text only post its fine, it gets stored in the database and subsequently appears on the website as it should. But If I write a post with an image in it it doesnt get stored in the database. All text and images disappear.
The title of the post goes into the database as this is just using a normal text box. But everything in the CKEditor disappears if I put an image in there.
Here are some screen shots:
I press the image button and enter in the explicit URL of the image stored on my server. (http://www.mydomain.com/images/image.jpg)
When I press ok the image is visible in CKEditor with the text above it.
When I submit the post and then return to it to view or edit it, the CKEditor is empty and only the Title is there. Checking the database I can see the title is entered but the body isnt.
If I dont enter an image everything works fine title and body go into the database and the blog post appears on the site.
Does anyone have any idea whats wrong here?
I actually discovered the answer myself
The image tags created in the CKEditor would be something like
<img src="images/picture.jpg">
and my SQL query would be something like
$query = "INSERT INTO Table (blog_body, blog_title) VALUES ('".$blogBody."','".$blogTitle."')";
or something along those lines.
To solve it I just swapped the quotation marks around. Placing the query in single quotes and swapping the quotes about the variables around.
This fixed my problem.
Just thought if someone else is having this trouble this may help
I have mini forum site im coding and when users make their profile they get to add a little info about themselves. I want them to be able to make list elements and add images into this description, as well as make /n (drop a line). How can I do this from a simple input text area? is there any jQuery text area plugins someone can recommend.
As it stands I have the users start any list elements (bullet points) with * and then just septate out the lines and stick them in list elements, for images I make them upload the image, they get a ref number and put that in the box between two sets of ++.
This is not very user friendly, anyone have any suggestions or plug-ins i could use to better this?
Sounds like you need a HTML editor such as TinyMCE. This will change a textarea into a HTML editor, which will give your users the ability to format the content with lists and images etc etc.
have a look at the following plugins available for your need. CL Editor, [CK Editor] (http://ckeditor.com/), TinyMCE.
I have a photo website which gathers images from a folder with PHP, displays their thumbnails on a page and, when clicked, opens a fancybox (fancybox.net) to display the full image. I am pretty satisfied with the result but as users start posting, they start asking for new features, and problems come out since I'm not a programmer. What I would like to do is a photo commenting/rating system (like the one on facebook to get the idea, but obviously not as complex): I've been trying to add a Disqus code to each picture, but it won't get displayed in my fancyboxes...So the question is, can you give me any (easy-to-implement) ideas on how to achieve this? I don't mind using already existing softwares like disqus for comments and polldaddy for ratings, since I guess it would require me to setup a mysql database to do it on my own...
To brief it again:
I have a "thumbs" folder which are gathered on a page.
I have an "originals" folder with the full size images that are called back by the fancybox.
I would like to have comments+rating in the fancybox.
Thanks in advance for any advice you can give me.
For your fancybox implementation I'm assuming that it's just pulling the image into the lightbox, not other content (i.e. a html page). What you'd need to do is set up a page which would grab an image, and output it along with your comments + rating code, then set up your script to use that page as the fancybox URL instead of a direct link to the image.
Without more information to go on I can't really help more than that.
ps for comments the Facebook Comments plugin might be easier for a non programmer to implement than Disqus.
I would like to implement a RTE (Rich Text Editor) with the ability to upload images anywhere inside the text. My aim is to create an "add / edit news article" page, where the client can write a story with images.
I am good at PHP and Javascript programming, so I am looking for help about methods of implementing this. Do I create a custom button in this RTE to insert a previously uploaded image or some other way? How do I display those images for the user to choose? Etc.
Bonus points for:
Multiple files upload: the ability for the client to just select e.g. 10 images that are relevant to this story.
Uses some method other than Flash as a default for upload.
Uses jQuery as I use it a lot.
RTE is very lightweight. I don't care if the client has to know a few things (like markdown or something similar), I just don't like bloated RTEs.
Uses new technologies, like HTML5 and / or CSS3.
Let me clarify a few things. I know a few Javascript RTEs and have also used them in several CMSs. So I don't need links to these, I can Google "javascript RTE" myself :). However, something like #hakre said is useful as he pointed out how extensible CKEditor is, which I was not fully aware.
To give an example of the answer I'm looking for: "you can do this with CKEditor, upload images asynchronously with jquery-html5-upload, save all uploaded image filename in a Javascript array, create a new button inside CKEditor with a custom click handler, which displays an overlay with Fancybox and you show all the images (you have filenames stored in an array), user clicks an image and you insert html into the editor".
Something like that but better :) (or should I say accurate).
Anything in here that meets with your reqs? http://ckeditor.com/developer-features
You taken a look at TinyMCEor CKEditor?
The "fake answer" you gave yourself is quite accurate. You would need a RTE editor that supports custom functionality.
The logistics would go along these lines:
User presses a button
An empty div is appended to the input with a unique id
An image uploader popup will open, with pointers to the new div
A combination of jQuery / AJAX / PHP will allow the user to upload a file within the page
The filename is returned after the upload process and inserted in the originally appended div
If you are looking for the specific code for each of these steps, I would recommend finding some tutorials as this isn't something that we can write some fast example code for.