Author Topic: Best way to make this website/tool  (Read 6044 times)

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Best way to make this website/tool
on: November 29, 2021, 17:33:52 PM
First up, my coding skills are at the level of "not completely a beginner... But need a pre-made thing I can tweak a few bits of code in" level. I can dabble and play but don't have the foggiest when it comes from doing stuff from scratch. With website stuff I tend to try and find WordPress stuff that fits the bill.

Right, the thing I want to do. It's pretty basic...

I want to be able to have a couple of drop downs (or similar list selection tools) where you choose 2 items. Two photos then are displayed side by side.

Basically I want to make a photographic comparison tool that is dynamic in the sense of showing the items based on user input.

I've had a quick look and seen some before/after WordPress plugins but I don't think these have the capability of allowing dynamic user selection.

Sent from my SM-G998B using Tapatalk


  • Offline neXus

  • Posts: 8,746
  • Hero Member
Re: Best way to make this website/tool
Reply #1 on: November 29, 2021, 23:02:30 PM
First up, my coding skills are at the level of "not completely a beginner... But need a pre-made thing I can tweak a few bits of code in" level. I can dabble and play but don't have the foggiest when it comes from doing stuff from scratch. With website stuff I tend to try and find WordPress stuff that fits the bill.

Right, the thing I want to do. It's pretty basic...

I want to be able to have a couple of drop downs (or similar list selection tools) where you choose 2 items. Two photos then are displayed side by side.

Basically I want to make a photographic comparison tool that is dynamic in the sense of showing the items based on user input.

I've had a quick look and seen some before/after WordPress plugins but I don't think these have the capability of allowing dynamic user selection.

Sent from my SM-G998B using Tapatalk

Take it your looking at the PHP front?


What do you want to do once you have the images side by side?

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #2 on: November 29, 2021, 23:47:52 PM
Not sure what I'm looking at to be honest, it's the reason I'm asking, whether php is the way to go or something else.

As to what happens when the images are side by side, nothing really. The idea in my head is a simple visual comparison tool. I guess the content needs to be dynamic enough that once you select two items, you can swap other things in and out.

Sent from my SM-G998B using Tapatalk


  • Offline neXus

  • Posts: 8,746
  • Hero Member
Re: Best way to make this website/tool
Reply #3 on: November 30, 2021, 02:01:17 AM
Not sure what I'm looking at to be honest, it's the reason I'm asking, whether php is the way to go or something else.

As to what happens when the images are side by side, nothing really. The idea in my head is a simple visual comparison tool. I guess the content needs to be dynamic enough that once you select two items, you can swap other things in and out.

Sent from my SM-G998B using Tapatalk


You can do this in pure Javascript if your just dumping images onto the browser with no saving or anything.
E.G.
https://codepen.io/SirKelvin/pen/abOgyBX


You can do that for both or work in more things like a visual compare..
https://codepen.io/fraddski/pen/dNMLwp

    • Tekforums.net - It's new and improved!
  • Offline Clock'd 0Ne

  • Clockedtastic
  • Posts: 10,937
  • Administrator
  • Hero Member
Re: Best way to make this website/tool
Reply #4 on: November 30, 2021, 15:26:42 PM
Yeah, I'd be looking at a pure JS solution, there's no need for a complex PHP backend just for a simple image compare tool

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #5 on: November 30, 2021, 17:38:16 PM
Good to know.

There's potential to be a few thousand images stored on the server, rather than being something people upload to. But java script points me in a direction at least!

A bit more background... This is to do with my pocket knife collecting. When you're browsing for knives to add to a collection its really hard to gauge dimensions based on the photos and specifications. It's way better to be able to see a knife next to another one that you might have in your collection already.

My intent is to create a standardised way people can submit photos of their knives,wigh reference scales. I'll then process the photos to isolate the knives and get the photos at the same scale.

Then people can essentially select two to look at next to each other for comparison.

I'm not thinking of anything fancy to be honest, just the two lists and two photos. I'm surprised no one has done this yet, though I hear a few may have tried years ago.

The best resources are just a few big collections with everything all in one image at the moment.

Sent from my SM-G998B using Tapatalk


    • Tekforums.net - It's new and improved!
  • Offline Clock'd 0Ne

  • Clockedtastic
  • Posts: 10,937
  • Administrator
  • Hero Member
Re: Best way to make this website/tool
Reply #6 on: December 01, 2021, 09:21:11 AM
Sounds like a good idea. The alternative is the tried and tested banana for scale :nana: :lol:

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #7 on: December 02, 2021, 08:18:46 AM
I am spending a lot of time headscratching. I literally have no idea what I'm doing haha. My webstuff has never gone past basic HTML.

Might be making a little progress. I've come across this tutorial: https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/

Though it's a slider and not something that displays side by side, I could live with that. The tutorial also mentions passing images in using Slots, which makes me think I could dynamically load the images in based upon a selection.

Think it'll be quite a while before I make much progress haha.

 

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #8 on: December 05, 2021, 22:03:56 PM
Dawned on me last night that I could go old school and use frames.

Split the page in two and have two instances of the same site for comparisons.

Simple but clunky. But I hear that frames will be unsupported in the future.

I might try and look into the css alternative.

Sent from my SM-G998B using Tapatalk


  • Offline neXus

  • Posts: 8,746
  • Hero Member
Re: Best way to make this website/tool
Reply #9 on: December 07, 2021, 23:02:35 PM
Dawned on me last night that I could go old school and use frames.

Split the page in two and have two instances of the same site for comparisons.

Simple but clunky. But I hear that frames will be unsupported in the future.

I might try and look into the css alternative.

Sent from my SM-G998B using Tapatalk


FRAMES.... NOOOOOOooooooOOOOooooo

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #10 on: December 07, 2021, 23:34:10 PM
Dawned on me last night that I could go old school and use frames.

Split the page in two and have two instances of the same site for comparisons.

Simple but clunky. But I hear that frames will be unsupported in the future.

I might try and look into the css alternative.

Sent from my SM-G998B using Tapatalk


FRAMES.... NOOOOOOooooooOOOOooooo
I get the impression they're frowned upon haha.

Its funny when you think back to websites 20 years ago when they were fairly common. Should make a retro Internet experience website haha

Sent from my SM-G998B using Tapatalk


  • Offline neXus

  • Posts: 8,746
  • Hero Member
Re: Best way to make this website/tool
Reply #11 on: December 08, 2021, 02:23:37 AM
Dawned on me last night that I could go old school and use frames.

Split the page in two and have two instances of the same site for comparisons.

Simple but clunky. But I hear that frames will be unsupported in the future.

I might try and look into the css alternative.

Sent from my SM-G998B using Tapatalk


FRAMES.... NOOOOOOooooooOOOOooooo
I get the impression they're frowned upon haha.

Its funny when you think back to websites 20 years ago when they were fairly common. Should make a retro Internet experience website haha

Sent from my SM-G998B using Tapatalk


If it was not for the fact Google wont update a lot of their system for things like youtube to remove frame injection methods they would all ban them.
X-frame and frame handling has been super locked down so some of the cool things you could do you can not any more. It was for a while the single most effective way to hack websites and SQL injections and more.
These days its a lot of perfomance and rendering issues plus not being able to effectively pass data back and forward.
Most Form services and like will have just a form and simple post but if you want fancier features will will literally be a div and javascript line will render everything through that.

  • Offline zpyder

  • Posts: 6,946
  • Hero Member
Re: Best way to make this website/tool
Reply #12 on: December 11, 2021, 18:25:28 PM
I'm still thinking iframe or object tags are the way to go. They're about on par with what I think I personally can figure out, maybe.

Anything more technical and I'd have to hire a Web designer.

Speaking of which, I have no idea how much it costs to have something basic knocked up, any idea? I'm not after a swish site, more just the workings. I could gradually sort the formatting out myself.

I really want to try and get this site running, and might pay a little money to do so. Knife collectors are a funny bunch, some are willing to drop $1000 on something that will literally just go on a shelf. I reckon a simple PayPal donation link on the site would result in it turning a small profit over time from appreciative folks.

Sent from my SM-G998B using Tapatalk


    • Tekforums.net - It's new and improved!
  • Offline Clock'd 0Ne

  • Clockedtastic
  • Posts: 10,937
  • Administrator
  • Hero Member
Re: Best way to make this website/tool
Reply #13 on: December 12, 2021, 05:59:46 AM
If I had the time I would offer to help, but I would struggle to get it sorted for you in any timely fashion. You could always take a look on fiverr.com or peopleperhour, I'd imagine you could get something put together relatively cheap that way.

  • Offline neXus

  • Posts: 8,746
  • Hero Member
Re: Best way to make this website/tool
Reply #14 on: December 14, 2021, 01:13:09 AM
If I had the time I would offer to help, but I would struggle to get it sorted for you in any timely fashion. You could always take a look on fiverr.com or peopleperhour, I'd imagine you could get something put together relatively cheap that way.
Same, my work load and 3 kid with new baby life is a thing. lol.

0 Members and 1 Guest are viewing this topic.