Images displayed at a percentage of width should be resized

zencart / documentation

Zen Cart FAQs and Developer Documentation

https://docs.zen-cart.com

MIT License

7 stars 27 forks source link

Images displayed at a percentage of width should be resized #406

Closed scottcwilson closed 4 years ago

scottcwilson commented 4 years ago

A number of pages use the width parameter of the img tag so that the image won't be too large. This will result in a poor experience on mobile. We should go through and resize all these images - around 800 px wide for full screen and 400 for a half screen - test to be sure. Then the page should be updated not to use "width" (at that point it might be easier to revert to Markdown image display syntax).

Here are the pages needing updating:

[x] user/running/fixing_addresses.md
[x] user/products/product_edit.md
[x] user/products/attributes_info.md
[x] user/products/category_management_admin.md
[x] user/products/product_management_admin.md
[x] user/template/other_templates.md
[x] user/template/page_format.md
[x] user/admin_pages/tools/newsletter.md
[x] user/admin_pages/tools/store_manager.md
[x] user/admin_pages/catalog/product_types.md
[x] user/admin_pages/reports/graphical_sales_report.md
[x] user/first_steps/secure_access.md
[x] user/first_steps/yes_you_need_ssl.md

scottcwilson commented 4 years ago

@wiztechinc if you can do this it would be great.

wiztechinc commented 4 years ago

sure, to repeat, first resize and then correct pages. Shall I do a separate commit for images and then for pages or both together for each page?

scottcwilson commented 4 years ago

Do them together (page and associated images) but in groups of 3-6 pages at a time, and please wait for one to be merged before starting the next. Please also wrap up the sidebox work first.

wiztechinc commented 4 years ago

hmm, 400 to 200 depending on size screen? How? I can reduce the actual images to

Working on both at the same time - sideboxlist is priority, yes. Does it make it harder for you to tend to the PRs? Will refrain if so.

drbyte commented 4 years ago

I'm not certain, but I think Github Desktop has a feature that lets you "pick just which files" to include in a certain commit. (And some apps even let you pick which lines of a file to include.) So, this means you can work on lots of stuff at once, but only push certain things in a given PR.

(Unfortunately it can be complicated when making new branches for new PRs from that same branch directory though. Sometimes I clone the entire directory and then copy things back in after changing branches, if I can't make it "stash" the changes for me. These are semi-advanced topics, but I mention it in case your brain is thinking "it would be nice if...")

scottcwilson commented 4 years ago

it's ok to work on multiple at the same time but sidebox list page has been broken for a week and I'm very anxious to wrap it up.

When I said "screen size" I meant the size of the portion of the screen being captured. (Is it just a sidebox? Or a whole screen?) 400-200px is a suggestion. Do what makes sense and looks good in both desktop and mobile. The original work you did on the sidebox list images was perfect. Use the same approach.

wiztechinc commented 4 years ago

my general rule of thumb is 350 wide. Don't take that as gospel but using the mobile tester, 400 seems to work as well even on an iPhone 5s screen which is supposed to be 320 wide. Safety maybe 375? That seems to be plenty large enough for me on the desktop.

scottcwilson commented 4 years ago

350 seems like a great choice. Go for it.

scottcwilson commented 4 years ago

Note that user/products/product_management_admin.md also needs updating - just remove the width=50%.

scottcwilson commented 4 years ago

Good job!