Streaming live at 10am (PST)

Ordering photos by color value

Hey!

I’m in the process of constructing my first ever personal photography portfolio. I have a somewhat complex idea of what I want it to look like and I’m wondering if there’s a possibility to make this happen in the web realm.

image
This image is a mockup representation of how I want the final layout to look. Think of three columns that have a gradient of all RGB colours going in between them. The idea for the RGB colors is that they’re sort of a zoomed out version of the photo catalog that is ordered based on the color value of every photo. When hovering/moving the cursor above a certain part of the gradient - a preview of the respective photograph that is assigned to that location is shown next to your cursor. i.e. I want to be able to upload content in CMS and that it gets automatically assigned a position in that gradient field.

I’d also like to be able to apply filters on top of that that will allow users to arrange photos based on projects, but still keep the gradient pattern.

Can any of you point me to a possible resolution for this or some resources/tutorials etc. that I can go through in order to build my expertise in this field and possibly come to a resolution myself? I have just completed a webflow course on awwwards.com and I’d consider my skillset advanced at best, but I have no idea how to do this.

I also understand that this idea might come with severe performance issues if all of the images are meant to have loaded before actually hovering over them. I’d also like to open a discussion in that realm too.

Thank you!

Hi @allesplusjetzt It is good idea and I do not have for you any solution but I have made small set of questions that jump into my head after reading your post you should thing about before move forward.


Precision

  • how I will deal with different screen resolutions for mouse pointer as screen pixel is relative unit that relate on screen resolution (8k - 4k - 2400px)
  • how I will add image to RGB location (what range - area)
  • how I will deal with duplicate color values when multiple images will have identical average color or areas assigned to an image will be overalpping.

Interactions

  • how I will deal with :hover, mouseover and/or mouseenter on mobile devices to show images on color hover.
  • how I will deal with interactions on mobile devices.

Efficiency - Page Speed - Compute Time

  • how I will deal with BigO (algorithms) to make O(1) or O(n) (most challenging) for 16mil items in array(s) of colors.
  • what will be an image resolution loaded on hover

The basic RGB use 16,777,216 colors (256x256x256) do you have this amount images in your portfolio? For example Dribbble use only a several selection of colors to filter images.

These are just basic things that I can come up right now. And one more thing, IMO WF is not suitable for this type of project. As you will use huge amount of images You should thing what database you will use as each database is more suitable for different tasks. For coding you can consider something as NEXT.JS. What I mean you need to first set your goals and find right tools to make it happened. :wink:

Good luck

Hey bud,

Thanka for the response and sorry for the late reply,I’ve been traveling.

The general idea for sking about this here is that I
as I am new to the platform I am not entirely aware of the limitations if there are any. I’ve just understood what CMS is so there’s a long way to go in terms of tutorials haha.

The next reason was what skills/knowledge I need to develop to make this idea happen. I will surely make the research in your suggested topics and settle for another presentation idea before I do that.

And to make it clear, I never had an idea about how to integrate this in mobile in the first place.

Thanks!