images in the portal?

[hoffy]

Hi again!

So far so good with the portal. Looks to be what I want, except for one thing....

Am I missing something, but I cannot display images on the portal page. I.E., from the news page, if I have anything betweeen the img tags, it wont display on the portal.

Is there a work around?

Thanks

[Kevin]

BBCodes are parsed in the normal (not compact) view of news and announcements boxes.
And [img] tags too. Maybe you have the news configured to cut the message after X-characters - and this cut is before or within the image tag (the bbcodes are counted too).
Try playing around with other (bigger) values for the maximum character settings.

[hoffy]

OK, I have tried that. Under both Global & news boxes, I have done the following:

Compact block = NO
max length = 0. I have also tried max length = 900

The image is also the first part of the post. Completely skips the image & goes straight to the thread.

Just another piece of info, not sure whether this will effect it, I have set the style to a maximum width.

cheers

[hoffy]

Another bit of info.
URL tags work fine.
B i & u tag works fine
List tag doesn't work
I don't have flash turned on, so can't check that one

[Kevin]

Do you have a testaccount? Link to the website?

[hoffy]

unfortunately, no. Its offline

[hoffy]

OK, I have found that if I use the basic prosilver style (un modded, except for board3 portal). It works fine

If I use my modded prosilver styles (one with a fixed width, the other without), there is a problem. I suppose, this is where the fun begins. I have no idea where to start, so these are the mods that have been done:

styles/<style>/themes/common.css
Mod to change to fixed width
Find:

Code: Select all

img {
border-width: 0;

Change to:

Code: Select all

img {
	border-width: 0;
	max-width: 100%;

Find:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;

Change to:

Code: Select all

#wrap {
	padding: 0 20px;
	min-width: 650px;
	width: 1101px;
	margin: 0 auto;

Mod to remove header & replace just with logo
Find:

Code: Select all

#logo {
	float: left;
	width: auto;
	padding: 10px 13px 0 10px;
}

Change to:

Code: Select all

#logo {
	float: center;
	width: auto;
	padding: 0px 0px 0 0px;
}	

Find:

Code: Select all

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

Change to:

Code: Select all

.headerbar {
	
}

styles/<style>/themes/colours.css
Mod to remove header & replace just with logo
Find:

Code: Select all

.headerbar {
	background-color: #263DD7;
	background-image: url("{T_THEME_PATH}/images/bg_header.gif");
	color: #FFFFFF;
}

Replace with:

Code: Select all

.headerbar {
	color: #FFFFFF;
}

Mod to include search function lower

Code: Select all

Find:
.icon-faq						{ background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); }

Add below

Code: Select all

.icon-search                 	{ background-image: url("{T_THEME_PATH}/images/icon_textbox_search.gif"); }

styles/<style>/templates/overal_header.htm
Mod to remove search bar, as well as modify header background & logo
Find:

Code: Select all

<div id="site-description">
				<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
				<h1>{SITENAME}</h1>
				<p>{SITE_DESCRIPTION}</p>
				<p style="display: none;"><a href="#start_here">{L_SKIP}</a></p>
			</div>

		<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
			<div id="search-box">
				<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" /> 
					<input class="button2" value="{L_SEARCH}" type="submit" /><br />
					<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
				</form>
			</div>
		<!-- ENDIF -->

Replace with:

Code: Select all

<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>

Mod to remove font size
Find & remove:

Code: Select all

<li class="rightside"><a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a></li>

Mod to include search function lower:
Find:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

Replace with:

Code: Select all

<li class="icon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>

<!-- IF S_DISPLAY_SEARCH --><li class="icon-search"><a href="{U_SEARCH}" title="{L_SEARCH}">{L_SEARCH}</a></li><!-- ENDIF -->

I unfortunately, dont know where to start above. My styles are also colorizit styles

BTW, my live board (without the portal)is http://www.catchfencephotos.net

[hoffy]

Now I am lost. I started applying mods one at a time to my basic prosilver style & the first mod to change to a fixed width made the images disappear (see above for code changes)

The problem is, I also have a full width style, which includes all the other changes (as well as moving profile to the left). Unfortunately this doesnt display images on the portal either.

SO, I am thinking that there is more then one issue....or any changes to the style is effecting it. I would really like to get this fixed as I like the layout & this portal is much easier to deal with then some of the others.

I will play around some more tonight (I'm in Australia....its early morning!)

[hoffy]

OK, I have found out what is doing this. It is the change to the fixed board width that is causing the images to disappear. This was changed due to images being cropped when the page is being viewed on smaller resolution screens.

Does anyone know any way around this?

OK, I have found that if I use the basic prosilver style (un modded, except for board3 portal). It works fine

If I use my modded prosilver styles (one with a fixed width, the other without), there is a problem. I suppose, this is where the fun begins. I have no idea where to start, so these are the mods that have been done:

styles/<style>/themes/common.css
Mod to change to fixed width
Find:

Code: Select all

img {
border-width: 0;

Change to:

Code: Select all

img {
	border-width: 0;
	max-width: 100%;

[hoffy]

Hi team!

Sorry to bump this, but does anyone know of a work around. I'm really keen to use this portal, but I want to maintain the Fixed width for photos.

Thanks

[wolferey]

I usually mod the /includes/bbcode.php file, search for the <img src=" line, and add width="YOURWIDTH" so images have a fixed with, and then with an admin bbcode mod you can make so only admins have another img tag where you can set height and width yourself

[hoffy]

OK, thanks.

Is it possible to to set the width in this spot to 100% as opposed to specifying a number in Px? If I was to specify a fixed width, wouldn't it stretch images smaller then what is specified?

[wolferey]

I believe width="100%" should work. Not too sure thought, test it out and report back =)

[hoffy]

No problems. I will do when I get home from work!

[hoffy]

No, that didn't work. It resized the image to 100% of the space available. Not a good look! Same deal with the 800px, resized all images to 800px & it also didn't fix the issue where if the screen res is too small, the images are being cropped.

Back to the drawing board I suppose!