Current design mockup in html/css

[jkva]

@vincent-young-1701, @sinabahram asked if it'd be helpful to have html+css mockups of the (currently) validate designs; yes please. We can then easily test these in various browsers and I can map them to the theme Timber+twig files. Let me know if you want to work together on this in any way.

[vincent-young-1701]

@jkva hi job, I'll be working on this over the next couple days and be able to deliver this by end of this week. @clapierre I had a question about the interaction for the modules in the collection tab https://96i7ux.axshare.com/image_detail_page.html before I get started. I'm confused what exactly these modules are for and do... these 13 collections are where "heart chambers" can be found I think I understand that much, but really not sure about the interaction. Is this behaving like a gallery where the bottom images, are the media items in the collection and when you click the current gallery image, you download that resource? Or maybe you go to that resource results page? Any clarification here with the interaction model will allow me to mock-up properly. Thanks!

[clapierre]

On this page you are at the final Resource so those images at the bottom of this page make up this resource. That has nothing to do with Collections.

The 13 Collections is where this resource has been tagged and a part of. So when you click on that Collections tab you find out that this "Heart" resource made up of a JPG, and a couple 3D models is included in 13 collections. (which might be something like Mr. Bob's Biology, middle school Anatomy, The Circulatory System, ... etc.)

[sinabahram]

To that end, why are the images shown? We can’t show arbitrary images and not other files in the resource, so shouldn’t these just all be text, not images? Basically a file list associated with the resource?

Also, we can’t show these images unless if they have alt text associated with them, which they will as part of the resource, of course, but not as part of any metadata WP is aware of to put into the markup.

[clapierre]

@sinabahram Yeah I just deleted my comment because I am starting to see some holes in it when looking at other data which needs to be considered.

[sinabahram]

@clapierre totally agree, but that doesn't address my question at all. It's understood that collections are composed of resources that are composed of files. The model is not the problem at all. I think it's a good one. The question is, the designs seem to indicate that files will be shown some how, but only a small percentage of files can even be rendered in the browser, so we should only "render" resources and collections, which is to say to show their associated thumbnail, right? Not to show thumbnails for files, because what does that even mean in the case of an STL file, a BRF file, a txt file, etc.?

[sinabahram]

I suggest not to delete, so that the convo can be followed later on, but feel free to augment with a comment like this one so folks following the conversation later can know where we all landed.

My suggestion, simple list of links, with even a potential “download all” where the zip files could be pre-generated.

Alternative suggestion:

Files have some fields e.g. a filename, a description, and maybe whether or not it requires login.

[clapierre]

@sinabahram Agreed, I am looking at the model now and realize that it probably doesn't make sense to have to force a preview image and its alt-text for parts of a 3D model for example which is made up of maybe a 20 separate files. I am also thinking that when we get resources from a 3rd party they will be pretty much separate resource files unless they are required to build an entire model as is the case with a 3D model. So we will either get 1 file (say a PNG image), or a 3D model which consists of multiple files including a reference image of the entire 3D model.

But I don't think it makes sense to have a Resource that consists of 2 separate images say a PNG and an SVG image, those would be brought into a collection right?

[vincent-young-1701]

Any progress? It seems like that collections tab should contain the collections each grouped in a list format where there will be a single link for each collection?

[sinabahram]

I agree with that.

[clapierre]

So a Resource could contain multiple image files, or 3D models, or whatever, so thats fine. Yes the Collections tab will be a list of collections that this resource belongs in. Each collection would have its own reference Image I believe so having the link be the Collection Name with associated image I would think would make sense.

[sinabahram]

I’m good with all of this, if and only if, the collections always have their textual name displayed on screen. We can never have a Collection only display its image, but I don’t think we do, so we should be totally fine.

[clapierre]

100% @sinabahram

[vincent-young-1701]

I think best for me to mock this up quickly to make sure we are all on the same page.

[vincent-young-1701]

Hi @clapierre do we have assets available to us such as logo image files for imageshare, benetech, etc.?

[clapierre]

Where would you like these to go? These will eventually go into WP resources, but if I put them in GitHub they will also get sent to WP. Or should I add them here?

[clapierre]

I guess I could add them to WordPress resources myself

[vincent-young-1701]

If you could add here that would be helpful.

[sinabahram]

Hi Charles, can you just provide a link here to the resources?

Don’t check them into git what-so-ever and do not ad to WP, please.

Thanks much

[clapierre]

Here are the 4 images, Benetech Logo, Imageshare Logo, background header image, and the OSEP "Ideas that work" logo

[vincent-young-1701]

Merci

[vincent-young-1701]

@clapierre do you happen to have the IDEAs that Work logo as a transparent PNG?

[clapierre]

Here you go.

[vincent-young-1701]

OK, great, let me see if that works.

[vincent-young-1701]

@jkva FYI, I did not add any hidden inputs to the search results page as I figured you will determine the best way to make the filters work on form resubmission

[vincent-young-1701]

@clapierre I ended up using the white background instead of mucking around. Doesn't look bad beneath the benetech logo.

[clapierre]

Looks great, we should try to keep both images the same size though. Thanks

[sinabahram]

This is now being worked on outside of mocks but in dev so closing this issue.