Storing 'the_title' and custom field values as variables.

I’m currently developing a theme which posts a random image as the header depending on what is being viewed, i.e. is_home() will pull a single random post from the category “Home.” All the posts in these “banner” categories have a custom field with the url for a background image to be displayed. I’ve written a PHP function, my first PHP function, that fetches the banner. Everything is working exactly as I’d like it to, but I am now attempting to decrease the size of some of my files by removing unnecessary markup. My ‘functions.php’ is quite a bit larger than I’d like it to be, partially because I have alot of redundant code in it. I’ll spare everyone the entire function, but here is the code for generating my home page banner.

if (is_front_page() || is_single() || is_category(array(1,3,20,21,37)) || is_404() || is_tag()) {
    query_posts(array('orderby' => 'rand', 'category_name' => 'Home', 'showposts' => 1)); if (have_posts()) : while (have_posts()) : the_post();
        echo '<div id="banner" style="background-image: url(https://www.greatdeepbrewing.com/wp-content/themes/gdbc2010/img/';
            if ( function_exists('get_custom_field_value') ){
                get_custom_field_value('image', true);
            }
        echo ');" >';
        echo '<div id="banner-content"><h3>'; the_title(); edit_post_link(' <span class="button white small" style="vertical-align: bottom;">Edit</span>', '', ''); echo '</h3>';
            if ( function_exists('get_custom_field_value') ){
                get_custom_field_value('more', true);
            }
        echo '</div><!--div#banner-content--></div><!--div#banner-->';
endwhile; else:
        echo 'Sorry, no posts matched your criteria.';
endif;
wp_reset_query();

I have several other conditional statements, for various other categories and what not. I’d like to store ‘the_title’, ‘image’ and ‘more’ as variables and plug them in where I need them. For example:

if (is_front_page() || is_single() || is_category(array(1,3,20,21,37)) || is_404() || is_tag()) {
	query_posts(array('orderby' => 'rand', 'category_name' => 'Home', 'showposts' => 1)); if (have_posts()) : while (have_posts()) : the_post();
	if ( function_exists('get_custom_field_value') ){
		$bgimage = get_custom_field_value('CSS', true);
	}
		$title = the_title(); edit_post_link(' (Edit)');
	if ( function_exists('get_custom_field_value') ){
		$more = get_custom_field_value('more', true);
	}
endwhile; else:
	echo 'Sorry, no posts matched your criteria.';
endif;
wp_reset_query();
} if (is_category('15')) {
	query_posts(array('orderby' => 'rand', 'category_name' => 'Banner-15', 'showposts' => 1)); if (have_posts()) : while (have_posts()) : the_post();
	if ( function_exists('get_custom_field_value') ){
		$bgimage = get_custom_field_value('CSS', true);
	}
		$title = the_title(); edit_post_link(' (Edit)');
	if ( function_exists('get_custom_field_value') ){
		$more = get_custom_field_value('more', true);
	}
endwhile; else:
	echo 'Sorry, no posts matched your criteria.';
endif;
wp_reset_query();
}
        echo '<div id="banner" style="background-image: url(https://www.greatdeepbrewing.com/wp-content/themes/gdbc2010/img/';
        echo $bgimage;
	echo ');" >';
	echo '<div id="banner-content"><h3>';
        echo $title;
        echo '</h3>';
        echo $more;
	echo '</div><!--div#banner-content--></div><!--div#banner-->';

But when the pages renders the source looks like this:

image.jpgThe TitleMore Text<div id="banner" style="background-image: url(https://www.greatdeepbrewing.com/wp-content/themes/gdbc2010/img/);" ><div id="banner-content"><h3></h3></div><!--div#banner-content--></div><!--div#banner-->

I’m not exactly sure why this is happening, if I manually set each variable everything renders fine.

Sorry this is so long winded and I understand that this might be a question better suited for a PHP forum, but I’ve always had good luck here so I hoping someone can help me.

Thanks,
Josh.