Jump to content
TNG Community
drbob

Creating a Page and media sizing

Recommended Posts

drbob

Hi All,

I created my first page in TNG today (an FAQ for visitors to my site).  However, there was one thing that was frustrating and I am wondering if I could have done something differently.  How do I chose the right size for the images without guessing a bunch of times and reloading the page after each adjustment.  What is a good size for images that works? (width = , height = ).  Here's what I did.

I altered the template for a page as directed in the creating user pages documentation.

I captured images I wanted to use with screenshots in Windows 10 (and then I edited the images (cropped, put in circles or underlining)).

I used an online WYSIWYG HTML Editor for the text and inserted the images accordingly.  I guessed on the sizing of the images and then changed them as I saw fit.

I cut and pasted the code into the right place on the page blank.

I uploaded the changes to the site, and all came out well, except the images are kind of different sizes.  How do I fix that?

Check out the page I created if you like: https://landgen.us/extrapgs/User FAQ.php

Thanks for your help!

Best,

Bob

 

 

Share this post


Link to post
Share on other sites
bhemph

Bob,
     Most image editors will tell you the dimensions of the image.  Then knowing kind of what height or width you want it to take up on the page, you can set just that one and the browser will keep the ratio so that your text doesn't get stretched or squished and circles don't look like ovals.  If you want to set both, you can do the math to get the ratio of height or width and then calculate out what the other should be.  In Chrome developer tools, right click the image and pick inspect, you can then hover over the file name and it will tell you the dimensions the image is currently being shown on the screen and what the native dimension of the image is.  Being able to see those numbers when only setting one dimension and looking at how it displays can help give you a better idea of tweaking the dimension that you are setting.  After you have it looking the way you want, you can then go ahead and get the other height/width and set it to match your ratio.  Another option would be to resize the image in your image editor to the size you want and then pull the dimensions that it says the picture is after the editing is done and use those in your html.

Brent

Share this post


Link to post
Share on other sites
Newfloridian

Hi Bob

Taking forward what Brent has said, I have developed such a technique in producing over 500 illustrated Feature Articles using historytemplate.php in template 4. Early on I realised that the fundamental basis for placing images and keeping them in proportion on a page which suited the needs of browsers was to follow the "css box model". This basically treats a webpage was being a series of rectangular boxes within boxes. They stay in proportion to one another regardless of the size of the screen you are using. The box model also maintains the shape of the original image and you control its appearance by declaring the width of the image in percentage terms of the box it is within.

For simplicity, I created my own set of (perhaps a dozen) class definitions which control width, placement (left, right, centre) and the appearance of a caption and put these into the mytngstyle.css file. (There may already be similar definitions within TNG in genstyle.css or other - but not always easy to find!).  

This is all I require for placing single images on a page. I do, on occasions, place two or more images side by side on a page. This does require a bit of fine tuning to get the appearances right. I also have some thumbnail images which link to larger versions of the same image on a different page.

At the end of the day, there is a degree of subjective assessment required to decide where within a page an image should be placed and how big it should appear. Using the css box model method does overcome the issue which Brent touched upon, namely text getting squashed or circles getting stretched into ovals.

If you would like to see how all this looks on one of my recently completed Feature Articles, here is a link:

Whittlesey Ancestors - The Anker family (Part 3)

 Alan  

Share this post


Link to post
Share on other sites
drbob

Brent,

Thank you.  This helps.  I opened an image in Paint and was able to shrink it and then find the px dimensions.  That's just what I needed.

Thank you for the time on this, I learned something really helpful.

Best,

Bob

Share this post


Link to post
Share on other sites
drbob
On 5/4/2020 at 12:44 AM, Newfloridian said:

Hi Bob

Taking forward what Brent has said, I have developed such a technique in producing over 500 illustrated Feature Articles using historytemplate.php in template 4. Early on I realised that the fundamental basis for placing images and keeping them in proportion on a page which suited the needs of browsers was to follow the "css box model". This basically treats a webpage was being a series of rectangular boxes within boxes. They stay in proportion to one another regardless of the size of the screen you are using. The box model also maintains the shape of the original image and you control its appearance by declaring the width of the image in percentage terms of the box it is within.

For simplicity, I created my own set of (perhaps a dozen) class definitions which control width, placement (left, right, centre) and the appearance of a caption and put these into the mytngstyle.css file. (There may already be similar definitions within TNG in genstyle.css or other - but not always easy to find!).  

This is all I require for placing single images on a page. I do, on occasions, place two or more images side by side on a page. This does require a bit of fine tuning to get the appearances right. I also have some thumbnail images which link to larger versions of the same image on a different page.

At the end of the day, there is a degree of subjective assessment required to decide where within a page an image should be placed and how big it should appear. Using the css box model method does overcome the issue which Brent touched upon, namely text getting squashed or circles getting stretched into ovals.

If you would like to see how all this looks on one of my recently completed Feature Articles, here is a link:

Whittlesey Ancestors - The Anker family (Part 3)

 Alan  

This is exactly what I would like to do.  How do I learn how to do this method?  I will look it up.  I liked your posts and would like to be able to make things that look like that as well.

So, to be clear, that page the I viewed at the link is all one page with boxes within boxes.  Like a newsletter or some sort of multipart page.  

That's great!  Thank you.  This opens my eyes to a new method to try.  

I appreciate your time on this.

Best,

Bob

 

Share this post


Link to post
Share on other sites
Newfloridian

Hi Bob

Happy to do that ... Sent you a PM

Alan

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×