ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Subscription Options  

Maximum photo width in Responsive Design

Forums: General Discussion
Created on: 02/13/16 05:47 PM Views: 1517 Replies: 9
Saturday, February 13, 2016 at 5:47 PM

I know we have a maximum pixel width of 685 when we upload photos to our admin-created pages, using the image editor. Is there any change to this if we switch to the Responsive Design?

Reply
Edited 02/15/16 1:32 AM
Monday, February 15, 2016 at 1:10 PM - Response #1

I was told that images uploaded via the editor should now be responsive and scale as needed in the RD. However, if for some reason they do not, I can show you how to make some minor revisions to the image code to make them scale.


Reply
Monday, February 15, 2016 at 1:40 PM - Response #2

Being 'Responsive' and maximum image size are different topics.

That said, Responsive (as in scaling an image on a page) can easily be 'broken' so it doesn't scale. E.g. videos or widgets and so forth. It's something that should be explained in a more technical video. Idea

Image vault upload still makes them 646 but can be any size using File Vault (which I'm assuming is what Scott meant). It's way beyond 685. I think I did 1000 just for drill and it worked fine.

The Image vault limit makes sense since letting them be larger would not work if one switches designs back to older style.

Reply
Wednesday, February 17, 2016 at 12:40 AM - Response #3

Sorry about not being clear on my initial post. I was referring to an answer in the Frequently Asked Questions, Questions About Building Your Site --- Question 8: "When uploading images or embedding third party objects on my web site, what is the maximum width I can make these objects?"

The answer given is "SUB PAGES: Do not upload images or embed objects on your sub pages wider than 685 pixels. Your sub pages have precisely 685 pixels of space available for content, so if you upload an image or embed an object exactly 685 pixels wide it will fill the entire page body area except for a small default margin area to the left and the right."

Our site is Professional Design #2, which is not an RD design. Using the image editor, I've resized many photos to 685 pixels, to match the maximum text width. I guess the 685 maximum applies to the Responsive Design (RD) pages as well, since RD uses the same image editor. On some of the Responsive Design pages I've seen, it seems the text size goes beyond 685 pixels, but that must simply be a function of the Responsive Design scaling itself to a larger appearance on my screen.

Reply
Wednesday, February 17, 2016 at 4:09 AM - Response #4

As you note Scott, Responsive pages are wider than old designs. There's a variation depending on which options are chosen. can be -way wider- if the left menu is removed (FC has a page like that).

Text automatically makes this obvious as it spreads across the screen.

Home page as HERE scales if image is made wider than shown there now. Which is in an announcement that's still in a table '419 wide' Wink Images there can be way beyond 685.

As I said, there needs to be another video explaining the technical side of this to both take advantage and not break 'responsive' behavior.

Reply
Edited 02/17/16 4:11 AM
Wednesday, February 17, 2016 at 2:12 PM - Response #5

Jack, in looking at the home page in your last response (#4), William G. Enloe High School, I then went to the Missing Classmates page. The photo at the bottom is incredibly wide on my 19 inch screen. Almost beginning to go out of focus. My concern in switching to the Responsive Design is that on large screens, photos which are not high resolution will scale out so much they become out of focus. On tablets and smartphones, there's no problem.

Also, text that scales out across the entire screen is tedious to read. Just my thoughts. I'm holding off for now on switching to RD.

Reply
Wednesday, February 17, 2016 at 3:27 PM - Response #6

The home page in #4 also has the same image - on the bottom - a responsive option. It's more an image quality issue here vs that it is too large. It is actually 2,000px × 1,489px (scaled to 1,119px × 833px).

A high quality image would looks much better. Could be the image was enlarged from a smaller image or an earlier generation digital photo or maybe even scanned. If you click on the +(zoom) on some of our home page images, you'll see that it can look very nice (around 1600px wide originals).

Images do not zoom out to fill the space though. It's more that large ones are reduced in size to fit the space. Home page in #4 shows how that works.

Image quality is the same as on the prior designs - how good was the original Cool

The wide text though is disconcerting as you state. I agree it can be tedious to read and not attractive. That's why newspapers have columns Idea

For the common wide screens that are now 1920 wide, an option to split things into two or three columns fixes that, but then one can't switch designs back and forth.

Basically all depends on what device one is using to look at the design and also one's own sense of style Twisted Evil

There are actually other CSS issues that also can surprise you with how they will change your layout -IF- one has done any sort of more advanced HTML styling. Not easy to fix.

The main beneficial result -can also be done for the old designs is putting the left menu as an icon on the top. And leave the rest alone.

Everyone can decide on their own thoughArrow

Reply
Saturday, February 18, 2017 at 3:05 PM - Response #7

Scott said
Quote:

I was told that images uploaded via the editor should now be responsive and scale as needed in the RD. However, if for some reason they do not, I can show you how to make some minor revisions to the image code to make them scale.

Is this somewhere on another post? I haven't been able to find it.

Reply
Saturday, February 18, 2017 at 3:16 PM - Response #8

As noted in other post about getting a larger image to show - just match the code shown on your home page now.

This is your home page image code

The key is the style code. For a better image upload to FILE vault vs IMAGE as in the above. That keeps the system from resizing large images.

The "style" scales automatically to the width of the device = 100% It can also be smaller of course, for example 60%

Reply
Monday, February 20, 2017 at 12:23 PM - Response #9

Thanks, Jack! Works great. Had to figure out how to replace the pointer to the picture so I copied the file vault (document - photo) link into the source code for src=" . . ." and it worked perfect.
Thanks,
Jim

Reply
New Topic  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.