Creating a custom field for list view thumbnail

[sciotomile]

Right now the thumbnail is generated from the event’s featured image… I’ve created event categories and a custom page template that displays a list all events in a specific category. We have several event series (Rhythm on the River, FountainSide, etc.) that we produce. My boss doesn’t like how the thumbnails crop on this page:

http://www.sciotomile.com/events-calendar/rhythm-on-the-river/

She would like to separate the thumbnail from the featured image… How could I achieve that? Can I use the “Additional Fields” tab under settings and create a text field where I could just copy and paste the URL of a custom thumbnail graphic? If so, how would I achieve that?

Here is the code for the Rhythm on the River page template:

<?php
/**
 * Template Name: Rhythm on the River
 * Description: Rhythm on the River Series Page
 *
 * @package WordPress
 * @subpackage sciotomile2011
 * @since Scioto Mile 2011
 */

get_header(); ?>

		<div id="sidemenu" class="primary-sidemenu-calendar">
				<?php if ( !function_exists('dynamic_sidebar')
                	|| !dynamic_sidebar('rhythm-on-the-river-logo') ) : ?>
		<?php endif; ?>
				<?php if ( !function_exists('dynamic_sidebar')
                	|| !dynamic_sidebar('rhythm-on-the-river-sidebar') ) : ?>
                <?php endif; ?>
        <div class="clear"></div>
		</div> <!-- #sidemenu -->
		
		<div id="primary" class="secondary-sidemenu-calendar">
			<div id="content" role="main">
				<div id="breadcrumbs">
					
    					<a href="http://www.sciotomile.com/"><div id="breadcrumb_HomeBttn" title="Home"></div></a><img src="http://www.sciotomile.com/wp-content/themes/sciotomile2011/images/breadcrumb_seperator.png" /><?php menu_breadcrumbs('primary-menu'); ?>
  					
				</div> <!-- #breadcrumbs -->
				<div class="clear"></div>
	
				<?php the_post(); ?>

				<?php get_template_part( 'content', 'page' ); ?>
                

				
                <?php 
 
					$args = array(
					  'post_status'=>'publish',
					  'post_type'=>array(TribeEvents::POSTTYPE),
					  'posts_per_page'=>10,
					  //order by startdate from newest to oldest
					  'meta_key'=>'_EventStartDate',
					  'orderby'=>'_EventStartDate',
					  'order'=>'ASC',
					  //required in 3.x
					  'eventDisplay'=>'custom',
					  //query events by category
					  'tax_query' => array(
						  array(
							  'taxonomy' => 'tribe_events_cat',
							  'field' => 'slug',
							  'terms' => 'rhythm-on-the-river',
							  'operator' => 'IN'
						  ),
					  )
					);
					$get_posts = null;
					$get_posts = new WP_Query();
					 
					$get_posts->query($args);
					if($get_posts->have_posts()) : while($get_posts->have_posts()) : $get_posts->the_post(); ?>
					

                    <div class="event-series-list-container">
			
						<!--- Title---!>
						<div class="ROTR-series-list-title">
                        	<a>"><?php the_title(); ?></a>
                        </div>
						<!--- Title---!>

						<!--- Thumbnail ---!>
						<?php if ( has_post_thumbnail() ) {
                            echo '<div class="event-thumbnail-image">' . tribe_event_featured_image( null, 'thumbnail' ) . '</div>'; 
                        }
                        else {
                            echo '<div class="event-thumbnail-image"><img src="http://www.sciotomile.com/wp-content/themes/sciotomile2011/tribe-events/Default_Events_Thumbnail.jpg" /></div>'; 
							}?>
                        <!--- Thumbnail ---!>
                          
						<div class="event-series-text">
                            <div class="event-main-info">
                                <?php if ( tribe_get_cost() ) : ?>
                                                <span class="event-series-cost"><?php echo tribe_get_cost( null, true ); ?></span> | 
                                <?php endif; ?>
                                            
                                <?php echo tribe_events_event_schedule_details() ?>
                                
                                <!-- Venue Info -->
                                
                                <div class="venue-information"><?php echo tribe_get_venue_link(); ?>, <?php echo tribe_get_address(); ?>, <?php echo tribe_get_city(); ?>, <?php echo tribe_get_region(); ?> <?php echo tribe_get_zip(); ?></div>
    
                                <!-- Venue Info -->
                            </div>   
                            <div class="event-series-list-desc">
				<p><?php echo wp_trim_words( get_the_content(), 45 ); ?></p>
			    </div>
                            <a>" class="tribe-events-read-more" rel="bookmark"><?php _e( 'Find out more', 'tribe-events-calendar' ) ?> »</a>					 
                        </div>    
                        <div class="clear"></div>					
                    </div>
					<div class="clear"></div>
			<?php
                          endwhile;
                          endif;
                          wp_reset_query();
                        ?>
             
			</div><!-- #content -->
		</div><!-- #primary -->
		<div class="clear"></div>

<?php get_footer(); ?>

Thanks!

• This topic was modified 9 years, 11 months ago by sciotomile. Reason: Left out the word "boss" -- typo

[Andras]

Hi sciotomile,

Although we don’t do deep support with customizations, let me try to give you a starting boost.

You could absolutely use the custom fields for this. You can use the following line to get the value of a custom field named custom_image:
$custimg = get_post_meta( get_the_ID(), 'custom_image', true);
And where you are printing out the thumbnail you change:
echo '

';
 

You might need to add a class to the img so you can format the image behavior easier with css.

Let me know if this helps you!

Cheers,
Andras

[Support Droid]

This topic has not been active for quite some time and will now be closed.

If you still need assistance please simply open a new topic (linking to this one if necessary)
and one of the team will be only too happy to help.

[Author]

Posts