HTML Logo by World Wide Web Consortium (www.w3.org). Click to learn more about our commitment to accessibility and standards.

Moving forward with Composr

ocPortal has been relaunched as Composr CMS, which is now in beta. ocPortal 9 will be superseded by Composr 10.

Head over to compo.sr for our new site, and to our migration roadmap. Existing ocPortal member accounts have been mirrored.


Resizing Image

Login / Search

 [ Join | More ]
 Add topic 
Posted
Rating:
#69594 (In Topic #14743)
Avatar

Well-settled

Gif resize

I am trying to display my banner in the side menu bar but always have it be there.

So I tried disabling the WYSIWYG editor and putting in < > img code with no luck.

I also tried regularly putting the [ ] img code.

I'm not saying I didn't have luck displaying the image. The full banner displays well.

But I'd just like to make it smaller.

[ .img height=150 width=250 ]myimage.gif[./img]

ocP doesn't seem to acknowledge it though.
Back to the top
 
Posted
Rating:
#69606
Avatar

Community saint

Have you tried wrapping in a div tag and setting it's size?

Code

[surround="side_banner"][img]myimage.gif[/img][/surround]

Code

.side_banner {
width: 250px;
height: 250px;
}
or

Code

.side_banner {
max-width: 250px;
max-height: 250px;
}

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#69640
Avatar

Well-settled

Neither code worked. I put it in the global.css on the bottom. And the other one in the zone menu editor.

Image was not resized.
Back to the top
 
Posted
Rating:
#69642
Avatar

Community saint

Have you got this banner on a page where I can take a peak at it? I use that same code to control the size of all my images so I know it works. What you may need to do is adjust the CSS slightly:

Code

.side_banner img {
width: 250px;
height: 250px;
}
or

Code

.side_banner img {
max-width: 250px;
max-height: 250px;
}


"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#69643
Avatar

Well-settled

Check the main page.

http://www.youtrippy.com

Pasted your code exactly.

Will leave it up for 5 minutes.
Back to the top
 
Posted
Rating:
#69672
Avatar

Community saint

The banner is being called with height and width directly in the HTML tag and that is forcing the size. Change those parameters or remove them altogether and you'll be good to go.


"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#69679
Avatar

Well-settled

SoccerDad, you're actually on the wrong page. I was getting rid of that page.

I did a 301 direct to the new main front page.

I want the banner:

http://www.youtrippy.com/images/youtrippy_banner.gif

In the menu bar on the side to look like it does on this page since I got rid of my intro page.


YouTrippy Videos
Back to the top
 
Posted
Rating:
#69681
Avatar

Community saint

*chuckle*, of course always helps to have the correct image. Righto, not sure then what is going on on your site as I had no issues here. Here is what I did (on my test site; right panel is 300px wide)

  1. Uploaded image to my images_custom in my theme (like to keep all my images there so I don't lose/forget them ;) )
  2. Added the following to panel_right:

Code

[surround="side_banner"][img=""]themes/FreeOurMoney2012/images_custom/youtrippy_banner.gif[/img][/surround]
3) In global.css added:

Code

.side_banner img {
    margin-left: 5px;
    max-height: 250px;
    max-width: 290px;
}
4) Result:


This also worked (no surrounding div tags):

Code

[html]<img height="100" width="290" src="themes/FreeOurMoney2012/images_custom/youtrippy_banner.gif" style="margin-left:5px;"><br><br>[/html]


"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
Posted
Rating:
#69688
Avatar

Well-settled

Used your same exact method – images/custom folder, global.css side_banner to side_banner img

And everything works beautifully.

I know CSS editing, but I'm definitely lacking in the photos / videos area but heard it makes the page so much faster and is much more professional to do it this way. Thanks for teaching me something new Soccer Dad! ;)
Back to the top
 
Posted
Rating:
#69690
Avatar

Community saint

Excellent Xarex, love it when a plan comes together! My pleasure, glad to hear we got it working the way you wanted it.  :thumbs:

"no violence, no hate, no pain, no enemies
just peace, unity, tolerance and love" - The Beloved

OCP V7 | Advocating monetary reform - FreeOurMoney

Need OCP friendly hosting? Look no further:
Web Hosting, Reseller Hosting, and Dedicated Servers w/cPanel - Elief! - Official hosting partner for ocPortal.
Back to the top
 
1 guests and 0 members have just viewed this: None
Control functions:

Quick reply   Contract

Your name:
Your message: