Trying to add photo image into Global Header

[BUCKY]

Forum URL: moparsinscale.proboards.com/


Hi, folks!
I'm attempting to implement a feature on the above forum that I will be changing each month.
"MODEL OF THE MONTH" will be our way of recognizing members for their hard work on their projects.
I have managed to get the text I want, with the font, font size, and color, but when I post the image link, all I get is a little green box.

This is what I have in the Global Header section of the structure area of the Admin section:

<center><font color="blue"><p><strong><font size="6">DECEMBER, 2019 MODEL OF THE MONTH</font></center>

<center><img src=https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg/center</center>

<center><font color="maroon"><p><strong><font size="5">1962 CHRYSLER 300H CONVERTIBLE by Goofy62</font></center>


I tried the image part in the second line, as well as the bottom line, with the same results.

Thank you for any help in this matter.

BUCKY(Keith Buckner)


EDIT: By the way, the image is already posted in a couple threads in the forum.

[Retread]

Hi BUCKY ,

Some of your html is using deprecated tags, so eventually we should address other ways of doing things.

But let's deal with your image, first. Aside from the <center></center> tags, you have two things which are causing your code to break.
1 - <img> doesn't require a closing tag </img>but you're missing the end bracket >
2 - the /center before the closing </center> tag is extraneous.

Change:
<center><img src=https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg/center</center>
To:
<center><img src=https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg></center>

Give that a try and if successful, we'll move forward.

[BUCKY]

That worked!!! I truly do appreciate the help!
BUCKY(Keith Buckner)

[Retread]

Okay BUCKY

If you're ready, lets get rid of the center tags. At the same time, we'll style the image so it's never greater than 80% of whatever container it's in. And it will automatically resize smaller rather than cropping on narrower viewports.

Try this:
<img src="https://images40.fotki.com/v381/photos/7/1319407/14534409/62Chrysler300H-vi.jpg" alt="" style="max-width:80%;display: block;  margin-left: auto;  margin-right: auto;">

Feel free to change the 80% to whatever suits you.

[BUCKY]

Does that work for the text, as well?

[Retread]

Feb 19, 2020 19:55:32 GMT -8 BUCKY said:

Does that work for the text, as well?

It definitely can, BUCKY .

We can use a style attribute to the <p> tag and add a variety of properties to it. This basically accomplishes the same thing you had with numerous tags on the first line:
<p style="max-width:80%;color:blue;font-weight:bold;font-size:250%; text-align:center;display: block; margin-left: auto; margin-right: auto;">DECEMBER, 2019 MODEL OF THE MONTH</p>

It's even more convenient when you have many html elements, to use a mini-style sheet for the css and assign classes to the elements, rather than the inline styling I've been showing you.

But I wanted you to get a small sample of the sorts of things you can do.

[BUCKY]

I'll have to study all this, so I don't mess up anything! HAHAHA

[BUCKY]

I tried your method with the photo. It worked great! Thanks! Can I use this formula to add another photo side-by-side in the same place?

[Scott]

Feb 24, 2020 21:34:11 GMT -8 BUCKY said:

I tried your method with the photo. It worked great! Thanks! Can I use this formula to add another photo side-by-side in the same place?

This is already being answered in your other thread here: support.proboards.com/thread/661031/putting-more-image-header.

Please do not use multiple threads for the same issue. Thanks