Skip to main content

Accessing page content from the front and back-end of a site

As I’m programming this database driven website, I’ve come into a few irritating little issues. Today I’ll talk about a few methods to access page content (images) from the back-end.

I’ve created a way to create and edit page content with a browser based WYSIWYG editor. The problem is after the first time the data is submitted to the server, all images are set with a path that now only works from the root directory of the website. So when a user tries to edit some page content with images in the WYSIWYG editor they see broken images (aka. “The dreaded Red X”).

I thought of a few ways to fix the problem. I’ll also mention which method I actually used in the end.

1. Have the PHP script handle the path conversions. This would mean two functions or so with a few replacements using regular expressions. So when the fetched data is sent to the user all of the html image tags are modified. When or if the user sends the data back they are remodified (excluding any new images the user is submitting). This is probably the safest bet.

2. Create a synaptic link if the server is on Linux/Unix. For example if the site root is www/, the site editor is in www/editor, and the content is in www/images. You would create the synaptic link in the www/editor directory linking to www/images directory. Probably the easiest solution by far, but I want my site to work on both Windows and Linux/Unix servers if possible. I’m developing the site on Windows, so I did not try this, but I’m pretty sure it would work. I also know that windows has a way to create similar links, but it seems like a pain to use so I didn’t bother.

3. Use JavaScript to handle the temporary conversion. This is the route I picked. I was just looking for something quick that worked and this was it. Well it wasn’t exactly quick because I spent a few minutes researching what function I needed to use and exactly how it works. The tutorials I saw were lacking…

Here is an example of the code that will do the initial edit, so the user can see the images in the WYSIWYG editor:

function fixImagePaths(textAreaId) {
var tempHtmlData = document.getElementById(textAreaId).value;
tempHtmlData = tempHtmlData.replace(/(<img\s.*src=")(images\/[^"]*"\s.*>)/gi, '$1/../$2');
document.getElementById(textAreaId).value = tempHtmlData;
}


The KEY problem that took me a few minutes to figure out was that the first parameter (the regular expression) in the replace function can’t have any type of quotes around it. If you’ve never heard of regular expressions, I highly suggest that you read up on them. They are extremely useful in a multitude of applications. Anyways, what that function does is take data from a wysiwyg html textarea and search through the whole thing for img tags. When it finds one that has a src directory that starts with “images/” it replaces it with “/../images”, this gets the browser to jump back a directory to find the right path to the image folder.

I have this function execute on the body onload event. I’ll also have a second similar function execute on the form onsubmit event. This solution seemed a bit easer then the php one. Well that’s it for now!

Labels:

Popular posts from this blog

ChatGPT is a new, and faster, way to do programming!

Currently ChatGPT is in a free “initial research preview” . One of its well known use cases at this point is generating software code. I’ve also just used it to write most of this article… Well, actually a future article about cleaning up SRT subtitle files of their metadata faster than I have been by hand with Notepad++ and its replace functionality. Update: I recorded a screencast of writing the SRT subtitle cleaner application loading and processing portion. I relied heavily on ChatGPT for code. It was a fun process! https://youtu.be/TkEW39OloUA ChatGPT, developed by OpenAI, is a powerful language model that can assist developers in a variety of tasks, including natural language processing and text generation. One such task that ChatGPT can help with is creating an SRT cleaner program. SRT, or SubRip Subtitle, files are commonly used to add subtitles to video files. However, these files can become cluttered with unnecessary information, such as timing lines or blank spaces. To clean...
Read more

Theme error in 2010s Android App after AppCompat Migration

I plan on releasing a lot of my old work as GPL open source, but most of it has aged to the point that it no longer functions, or if it does work it’s running in compatibility mode. Basically it’s no longer best practices. Not a good way to start off any new public GPL projects, in my opinion. The current project I’m working on is an Android app that calculates star trails meant to help photographers get or avoid that in their night time photos. For now I’m going to skip some of the import process because I didn’t document it exactly. It’s been mostly trial and error as I poke around Android Studio post import. The Android Studio import process… Removing Admob Google Play code before the project would run at all. After removing dependencies, it kind of worked, but when running it in the emulator it shows a pop-up message saying that the app was developed for an old version of Android. Going through the process of updating code to match current best practices… I had the IDE convert the ...
Read more

Blogger Notable theme pop-up header issue fix (thanks to Gemini Pro)

I've made a few half hearted attempts over the years to to fix Blogger's Notable theme's rendering of the pop-up header that shows up when you scroll down the page a decent amount and then pull back to reveal that secondary header. On Chrome mobile I noticed a gray box that forms next to the magnifying glass icon. I never looked in detail on  Chrome desktop, but it had an issue as well which I'll detail below.  If you are looking for a solution and don't want all of the extra talk about how I was able to find it, here it is:  .centered-top-container .sticky .main_header_elements { overflow : hidden !important ; } I decided to try using Gemini Pro 2.5 to see if it was capable of finding the issue and giving me a fix. Turns out that it was able, but it took a bit of collaboration back and forth to find the actual problem.  Here is a modified article I asked it to give me based on our debugging chat (it was very colorful in the article which I scaled back a lot, ...
Read more