How to make a banner fit into a sidebox at varying widths.

[dw08gm]

Not a question but a solution.

I have a fluid responsive site, where the widths of my side columns are set as fluid percentages and thus flex at varying screen widths. I received a banner from a sponsor/advertiser that was of fixed dimensions and I needed a way to fit the image wholly within the sidebox at varying screen widths, so that all adjoining sideboxes would line up fully justified rather than raggedly stepped. The sidebox used was the banner box.

In tpl_banner_box.php
changed

  if ($banner = zen_banner_exists('dynamic', $banner_box_group)) {
   $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent">';
    $content .= zen_display_banner('static', $banner);
   $content .= '</div>';

to this

  if ($banner = zen_banner_exists('dynamic', $banner_box_group)) {
   $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent centeredContent"><div class="mySideboxBanner">';
     $content .= zen_display_banner('static', $banner);
   $content .= '</div></div>';

And in stylesheet.css added the following somewhere amongst the #banners:

.mySideboxBanner img { /* tpl_banner_box.php */
	width:100%;
	height:auto;
}

And it works.


I did something similar with BannerFour in tpl_main_page, where I wanted a wide banner to fit into the center column (also set as fluid percentages) at smaller widths, by changing

  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
<div id="bannerFour" class="banners"><?php echo zen_display_banner('static', $banner); ?></div>

to

  if (SHOW_BANNERS_GROUP_SET4 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET4)) {
    if ($banner->RecordCount() > 0) {
?>
	<div class="banners">
	  <div id="bannerFour"><?php echo zen_display_banner('static', $banner); ?></div>
	</div>

And adding the following somewhere amongst the #banners in stylesheet.css:

.banners {
	clear:both; /* to avoid a button */
	width:100%; /* sets width to equal centre column width */
	height:auto;
	margin:0em auto; 
	text-align:center; /* recovered from #banners */
	font-size:0.84em; /* recovered from #banners */
}

#bannerFour img { /* tpl_main_page */
	max-width:100%; /* will not increase the size of a banner, only decrease it to fit*/
	height:auto; /* needed to maintain image proportions */
}

and deleting various #banners from elsewhere in stylesheet.css.

And this works too.

Hope this helps.

[tonysebay]

Great No questions just putting the location of the file for my future reference

YourSite/includes/templates/my_custom_template_foldername/sideboxes