From Instagram Archive to PHP Website

From Instagram Archive to PHP Website

Byrichard

Three years ago I stopped using Instagram because I was tired of seeing influencers and adverts rather than by the people I chose to follow. The cherry on the cake, that pushed me to dump Instagram is when they changed the location of the Post button from the left corner to the top right and changed the default from photo to story.


For ten years or more I used instagram and shared photos, and I enjoyed capturing at least an image or two every single day. It’s because Instagram was bought by Facebook that I fell out of love with the site and decided not to use it anymore. The community had been lost, so what good was there in sticking around? 


Instagram to WordPress


In 2020 I played around for two days and I developed a work flow to take my posts json file, and convert it to CSV before importing it to wordpress via a plugin. It worked well, but I never used it. 


The Laravel Concept


For a short time I was thinking of trying to get Laravel to drive the Instagram clone but soon changed my mind, due to the amount of learning it would required. I settled on a simpler, yet practical solution. The PHP Array. I had used PHP arrays for one or two sections of my page, as well as individual pages. It’s simple and intuitive to use, with few complications to debug. 


JSON to PHP array


Recently I saw discussions about how pixelfed made it possible to import the instagram json file to pixelfed and that’s what encouraged me to play with the Instagram json file. This time I tried a different tact. 


The first step was to download the most recent json file and save it locally. Once this was done I converted the json file 


I asked chatGPT for help. I asked it how to convert from json to php array. The answer summarised is “$json = json_encode($array);”


I then asked how I would generate a file:


$json = json_encode($array);

$file = ‘data.json’;

file_put_contents($file, $json);


After this It was a matter of trial and error to read the php array data. My idea was to create a loop that would cycle through each post individually and display the image, as well as the related data. Usually I would achieve this by trial and error, as I have done, in the past, with other projects. 


chatGPT Helps to Access Array Data


By myself I was able to retrieve the URI and display it. I struggled with the timestamp and exif data so I asked chatGPT to help me. It gave me examples of how to get the URI, the iso info, and the title. The arrays contain more info but I extrapolated that from the example chatGPT had provided me with. 


At this point the page was ready to experiment with displaying the content. At first it was just text. I then added the required html to display the image properly and to size it correctly. When that was working properly it was time to add pagination. 


In the past I would have spent time Googling for examples of pagination and selecting one that worked well but this time I asked chatGPT for help. 


It helped me with pagination, except that the pagination was from page one to one thousand six hundred or more. That’s excellent, if you want that, but I didn’t. I wanted the pagination to be paginated, so I asked chat GPT to help with this too. It did. I then noticed that I needed back and forth, so I asked chatGPT for help yet again. 


EXIF volatility


When the site was loading individual images and the relevant information I flicked through the images and noticed that some did not have exif data so I asked chatGPT to write an if else loop that would display exif info if it was available, and ignore it if it wasn’t. This worked well. 


Time Taken


chatGPT is a fantastic tool, when you know what you want, and you understand how to get it to work, but you’re not 100 percent on the code aspect. I had the basic functionality of the json to PHP site functional within an hour to an hour and a half. I then spent hours tidying things up, adding a little functionality here and there. With chatGPT if you know what you want to do but you’re not certain of how to do it, then it shines. 


During this process I asked a question, it gave an answer, when I saw the answer I tweaked my question, until the result was what I wanted. 


Adding CSS


When I was happy with how the site was behaving I changed from displaying three images, to five and then I added styling. For styling you can copy and paste from old projects, or various sources, or you can ask chatGPT to give you a black background with white text and white borders and it will provide you with the code. Within seconds your theme is ready. 


And Finally


I am comfortable with PHP. I have been redesigning my website to run off of PHP rather than html or a CMS and it works well. chatGPT didn’t provide me with the concept or direction. I did that. I thought of the steps and workflow, and got chatGPT to provide me with reminders of how to do things. It’s because I knew what I wanted to do, that I achieved my goal within a short amount of time. This is really a post about how I used prompt engineering to get chatGPT to help me achieve the goal I wanted to reach, within minutes, rather than hours, or days. 


i went from having a big, clunky wordpress blog, to a few lines of php, to do the same thing. I can add functionality with time. For now it shows my instagram photos efficiently.


The Result

Playing with the Hugo With An Old Site

Playing with the Hugo With An Old Site

Byrichard

For a few days I have been playing with Hugo with Markdown and HTML pages. It says that it is “the world’s fastest framework for building websites” and so far I do notice that it has a key strength that I like. 


Front Matter


That strength is that with small modifications you can take an existing static website and make it dynamic.  Hugo requires that each page has Front Matter.  


Front matter is:


• title


• date


• tags


• description


• author


• slug


• draft


• and more. It’s a quick and easy way of organising a website, one page at a time. 


Front Matter according to chatGPT is “a metadata configuration section that is commonly used in static site generators like Hugo, Jekyll, and others.” It is placed at the top of a document to provide useful information like post title, publish date, tags and more. The beauty of tags, author and other tags is that they are used to organise data without the need for a CMS back end. 


The Niche it Fills


The advantage of Hugo, over a CMS like Wordpress, is that it doesn’t lock you into itself. It allows you to create pages, and to organise those pages by tags, category or other. It allows you, via the layout metadata to specify which css layout a page should use. You can have one website section with one theme, and another section with another theme. 


If your website has a section that is about geography, and another about environmental systems. You use the relevant tags for each page. If you click on the geography tag you get a page with a list of all the pages tagged with geography. If you click on “Environmental Studies” you get the content on that topic. 


Aside from creating tags you can create a hierarchy. If you write “film/french” it will recognise that you have the tag “film” and within that tag you have the sub tag of french. If you write about french films you can add the tag “french/film” rather than “french, film” and it will create sub-tags. This is an effective means of organising tags. 


The Weaknesses


When you create pages their default is draft, which means that you need to change draft to false if you want it to generate pages with the hugo command. When a page is generated it does not switch the draft status from true to false, so you need to tell it to export drafts each time. 


When you generate the static website it creates a directory for each page, with an index.html page in each. 


The same is true of the tags page generation. If you have 20 pages you will have 20 directories with index.html pages. If you have  100 tags you will have one hundred folders with an index.html file and an index.xml page.  If you want to fix this Hugo calls them ugly URLs. 


Switching from Pelican to Hugo


Initially I thought Pelican looked like a powerful tool until I encountered the issue with categories being “one per page” by default. The plugin to allow for more was simple to implement but I like to experiment with tools and I found that Hugo is an interesting alternative. 


The Strength


I want the flexibility of a CMS driven website without being stuck within Wordpress or another CMS. This tool gives me the features of a CMS without the limitations. As i add Front Matter information to each page, so it becomes easy to index every page and update navigation one final time, rather than every single time small changes are made. 


Partial Templates


With Hugo you can create partial templates, as you can with Laravel and other framework tools, except that with this framework html and markdown are used. The learning curve is more gradual. 


The Sitemap


A nice feature of Hugo is that it generates a sitemap with information about the location of each file, when it was last changed, the change frequency and priority. In this way Google and other search engines may quickly see what has changed and when. 


And Finally


If your website is already written in HTML it makes sense to find a tool that will connect all the pages together, for navigation. The CSS, JS, and html stay the same. It’s just the framework behind the scenes, connecting everything efficiently. 

Updating Old HTML Webpages
|

Updating Old HTML Webpages

Byrichard

Most websites are simple. They have five to ten pages at most but usually a single page is enough. Most pages are about one specific thing, whether it’s a CV inspired page to find new clients or a simple page with a few products. Most are usually about a single topic. 


This makes website maintenance and design simple, because one theme fits every page. My website is different. It has articles about the Romans, Geography, Environmental Studies, old student newspaper articles, Media studies pages and more. In effect it is several websites rolled into one. 


The challenge with updating this website is in the size of the website. Since 1996 I have been adding pages, until about 2003 when I switched to wordpress- The website still has a thousand or more individual pages. Every time I update I have to update hundreds of pages. 


Recently I converted the surfing the World Wide Waves section to PHP, including one php page where I put the articles into arrays, and individual pages that load the title, content, navigation and more. The Surfing the World Wide Waves session is now a simple to edit set of PHP pages, rather than 50 individual pages. I can edit the navigation in a single place, rather than for each article. 


For the sake of consolidating my knowledge I was watching a learning path about HT and I saw that one challenge was to take an old HTML page, and improve it, to be a semantically correct web page. This is a process that I have done several hundred times over the years. 


I created style sheets, one for the Romans section, another for the Surfing The World Wide Waves Section and one or two other CSS files, where one CSS file is used by multiple pages. It helps to make the website uniform. 


Removing Tables and Inline formatting


Front Page 2000 and other website editor software added a lot of code, inline, which, today is not needed. Part of the process of going through the old pages is to strip out old code and replace it with modern code. I replace tables with divs, strong, and other tags with headers and more. I make it so that the website uses less code. 


Old pages sometimes have the font, font size, strong and other tags for each p tag. That’s a lot of code, for a page where CSS does the same thing, just once per tag, header etc. 


A Quick Tip


If and when you’re working on an old page you may find and other tags. In VS Code you can search and find and use find and replace to review every individual use individually and it automatically moves on to the next instance. 


I converted some long blocks of text from html to php within an echo tag and I had to escape a lot of ‘. I did this by selecting “‘“ and using find and replace with “\’” to go through every occurrence individually before moving it to an echo tag. I saved time and effort. 


List Items


If you’re working on a list of items you often have to write the same code for each list item and this takes time. With VS Code you can option select the front to each individual item and type

  • just once. With the closing tag you do the same, except that it will auto-complete the tag so that’s even easier than expected. This saves time. 


    Re-working an entire website is slow and repetitive but that repetition is good for two reasons. The first is that it gives me time to think about what I am doing, and to understand why I am doing it. The second is to develop work flows that increase efficiency. 


    I read, assess, clean up and then re-format individual pages so that they’re template friendly. My Surfing the World Wide Waves section is now like a blog, where I have the bare bones code on each page, and the content in a centralised place. If I took one more step then it would be a one page website. As I gain experience I can take that last step. 


    I am now focused on putting what I have learned to practice. I am consolidating what I have learned and finding solutions to practical challenges I encounter while working on my website. 

    • Learning About Laravel and PHP
    |

    Learning About Laravel and PHP

    Byrichard

    Today I started to follow a course where someone turns a static html page into a Laravel blog. I experimented with home.blade and one or two other features and I got two pages to load, and the login to work, without more than that.


    What makes today’s learning and experimenting interesting is that the time I spent creating PHP arrays for my website content is now easy to transfer to json files for use with dynamic websites. What this means is that content that was stuck on individual pages is now organised by website section. I am now free to do more.


    The primary goal is to convert the static part of my website into a flexible content management system as well as to possibly swallow up the WordPress powered blogs. For at least a year I have disliked that Wordpress uses react, so if I can replace WordPress with Laravel then I will be happy. All websites that use React look the same to me, and I don’t want to use technology that was developed by Facebook, no matter how popular.


    Having a website is not just about writing blog posts and creating content. It is also about playing with technology and learning new skills. I want to understand how laravel works, and to have a way to demonstrate that I have learned relevant skills for future job applications. This website isn’t small. It has quite a few sections, topics, content and more. It’s worth working on and improving this website.


    And Finally


    I am curious about playing with ActivityPub. It is still in early days but if and when it is ready, it will be a more advanced of interactive RSS. I want to see what possibilities it will open up.

    Conservation and PHP

    Byrichard

    Today I have struggled with PHP. I struggled because I want to recreate the same table using loops with PHP as I did formatting with HTML. If I wasn’t up for a challenge I would let PHP loops format it according the default and I’d be done. In the end I did get the table to display as I wanted but not using for loops. I created a table page, laid it out using the data file I’ve been using for this section, and then using include to add that content where I wanted it to be on the page.


    It works, and it’s elegant. I want it to be done by a loop. This is important to me because it requires me to learn more about how to use nested loops and this is an important element of programming. It’s a skill worth having.


    Before : intermediate : After


    Above you can see before css was added, the website looked simple. When CSS was added it looked better, and once it became php it looks similar but the code needed is much less, as data is with included files. The footer and the nav bar are always the same, and for most pages the usual loops are enough to display content on all pages.


    With PHP you can just echo html and the page will display as you want it to. With variables and includes you can display the information you want to display automatically, rather than manually.


    In most cases you can use “Title”, and “content” and use HTML to format all the data as you want it to be. By doing this the conservation page would be done within minutes but the content would be less flexible. By creating arrays within arrays I make things more modular. I can remove or add sections and it will just change that part of the site without affecting other parts.


    The point with PHP, frameworks and javascript is to set everything up so that when changes are made they can be as small or as big as we want, in a modular manner. That’s why my struggling to get things to work today is important. Once I learn how to do this, I will be more confident with future challenges.

    | |

    Planning A New Section For My Website.

    Byrichard

    Today I’ve spent time looking at the website earnings and I’ve seen that with just a few minutes of work I’ve doubled the earnings from my website. I’m not going into the details at the moment but since I seem to be doing nothing productive I’m going to re-work my website to increase my earnings.

    Four hundred and sixty visitors passthrough this website with about a million six hundred hits of which most visitors, through search engines get straight to the page they want. What I need to do over the next few days is making sure that there is advertising on most of the pages. in so doing I increase the opportunity for people to click through and find more relevant content on someone else’s web page.

    I need to write more articles, rather than blog posts. Blog posts are a lazy method of web mastering because they require no real effort. Find an idea, write about it, post it. At least when you create a page you think about the content. I’ll start by writing a section about a variety of podcasts I’ve enjoyed over the past two years and hope that what I write will be appreciated by others.

    Through this process I will be targeting a specific audience, trying to create relevant content and as a result get more visitors.

    When working on the Roman section of this website I ran out of knowledge, therefore, the speed at which I added content plummeted. There is one page that I’m proud of from the time. It’s the one on Slavery. I spent several hours doing research, writing notes, and then uploading this page to the website. As a result of the quality of content universities and a number of other reputable websites linked to my own. That’s what I plan to do with the new sections I will add on podcasts I enjoy listening to and why.

    It’s going to take a few days to generate this new section but since I’m between studies and work it’s one way of attempting to get a small secondary income. We’ll see how it goes.

    |

    On Trendio My Portfolio Is Doing Well

    Byrichard

     current portfolio

    If you love reading the news and seeing what’s going on around the world then Trendio is an interesting site for you.

    I looked at the events that are going to take place and whether Trendio already has them listed. If it does then I decided to buy some stock for those words and as their quantity increases so it means I will get some income.

    Knowing that the French elections would take place I bought stock in two of the key elements to see by how much they would increase. As you see the increase isn’t that bad.

    I also saw some other events in the news so bought those.

    Overall it’s about understanding the news cycle, what stories have a long life, which ones are going to be short lived and which ones will generate the most hype. If you buy words before a key event when they’re low and wait for the event then you can make a lot of trendilions within a short amount of time.

    It’s an interesting distraction and I’d recommend people take a look at it.

    Trendio.com

    Trendio – A Word-Based Stock Exchange

    Byrichard

    I’ve just started playing with Trendio which seems like an interesting website. In the past i’ve played on websites where you’re playing the stockmarket with virtual money and you can see how you’re doing without the risk of bankrupcy usually associated with investment.

    I’ve only been using it a few hours now and I have yet to make a profit on the search terms but over a short amount of chance there is a chance that I will make virtual credit.

    I’ll come back to this topic once I have more experience of it.

    |

    Information about my site

    Byrichard

    Over the past twelve months over 28 gigs of data transfer have occured through 400,000 visitors and one and a half million hits.
    There have been 746 downloads of the Paddington station video as I write this. On youtube the same video has only had 30 views. This makes me happy because I see that you can make videos high profile from personal webpages and links added in the right place.