Title: Bootstrap Media Object
Last modified: January 30, 2020

---

# Bootstrap Media Object

 *  Resolved [mroberts46](https://wordpress.org/support/users/mroberts46/)
 * (@mroberts46)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/)
 * Hello,
 * I’m still fairly new to WordPress but I have a client who insists on keeping 
   their website hosted here. I’ve added the radio station plugin to their site (
   currently under development and is hosted on my local machine at the moment).
   After adding all of the radio shows and DJs, I looked at the how it was laid 
   out on the site and was less then satisfied. The way that my client has envision
   the “Now Playing” and “Up Next” widgets looking should be more like the Bootstrap
   4 Media Object. I attempted to modify the code in the class-dj-upcoming.php file
   to reflect such a layout but instead of it changing the way it was laid out, 
   it displayed nothing at all.
 * Here’s my code:
 *     ```
       <div class="media">
       				<?php
       				if ( isset( $djs['all'] ) && ( count( $djs['all'] ) > 0 ) ) {
       					foreach ( $djs['all'] as $showtime => $dj ) {
       						if ( is_array( $dj ) && isset( $dj['type'] ) && 'override' === $dj['type'] ) {
       							?>
       							<?php
       							if ( $djavatar ) {
       								if ( has_post_thumbnail( $dj['post_id'] ) ) {
       									?>
       									<img class="align-self-center mr-3" src="<?php echo get_the_post_thumbnail( $dj['post_id'], 'thumbnail' ); ?>"><?php
       								}
       							} ?>
       							<div class="media-body">
       								<h5 class="mt-0">
       									<?php echo esc_html( $dj['title'] ); ?>
       								</h5>
       								<?php
       								// --- show schedule ---
       								if ( $show_sched ) {
       									if ( 12 === (int) $time ) {
       										$start_hour = $dj['sched']['start_hour'];
       										if ( substr( $dj['sched']['start_hour'], 0, 1 ) === '0' ) {
       											$start_hour = substr( $dj['sched']['start_hour'], 1 );
       										}
   
       										$end_hour = $dj['sched']['end_hour'];
       										if ( substr( $dj['sched']['end_hour'], 0, 1 ) === '0' ) {
       											$end_hour = substr( $dj['sched']['end_hour'], 1 );
       										}
       										?>
       										<p class="small">
       											<?php echo esc_html( $start_hour . ':' . $dj['sched']['start_min'] . ' ' . $dj['sched']['start_meridian'] . ' - ' . $end_hour . ':' . $dj['sched']['end_min'] . ' ' . $dj['sched']['end_meridian'] ); ?>
       										</p>
       										<?php
       									} else {
       										?>
       										<p class="small">
       											<?php echo esc_html( $dj['sched']['start_hour'] . ':' . $dj['sched']['start_min'] . ' - ' . $dj['sched']['end_hour'] . ':' . $dj['sched']['end_min'] ); ?>
       										</p>
       										<?php
       									}
       									?>
       							</div>
       							<?php
       						} else {
       							?>
       							<div class="media-body">
       								<h5 class="mt-0">
       									<?php
       										if ( $link ) {
       											?>
       											<a href="<?php echo esc_url( get_permalink( $dj->ID ) ); ?>">
       												<?php echo esc_html( $dj->post_title ); ?>
       											</a>
       											<?php
       										} else {
       											echo esc_html( $dj->post_title );
       										}
       									?>
       								</h5>
       								<?php
   
       								// --- encore presentation ---
       								// 2.2.4: added encore presentation display
       								if ( array_key_exists( $showtime, $djs['encore'] ) ) {
       									?>
       									<div class="on-air-dj-encore">
       										<?php echo esc_html__( 'Encore Presentation', 'radio-station' ); ?>
       									</div>
       									<?php
       								}
   
       									// --- DJ names ---
       								if ( $display_djs ) {
   
       									$ids   = get_post_meta( $dj->ID, 'show_user_list', true );
       									$count = 0;
   
       									if ( $ids && is_array( $ids ) ) {
       										?>
       										<div class="on-air-dj-names">
       											<?php
       											echo esc_html__( 'with ', 'radio-station' );
   
       											foreach ( $ids as $id ) {
       												$count++;
       												$user_info = get_userdata( $id );
   
       												if ( $link_djs ) {
       													$dj_link = get_author_posts_url( $user_info->ID );
       													$dj_link = apply_filters( 'radio_station_dj_link', $dj_link, $user_info->ID );
       													?>
       													<a href="<?php echo esc_url( $dj_link ); ?>">
       														<?php echo esc_html( $user_info->display_name ); ?>
       													</a>
       													<?php
       												} else {
       													echo esc_html( $user_info->display_name );
       												}
   
       												$id_count = count( $ids );
       												if ( ( 1 === $count && 2 === $id_count )
       												|| ( $id_count > 2 ) && $count === $id_count - 1 ) {
       													echo ' ' . esc_html__( 'and', 'radio-station' ) . ' ';
       												} elseif ( $count < $id_count && $id_count > 2 ) {
       													echo ', ';
       												}
       											}
       											?>
       										</div>
       										<?php
       									}
       								}
       								?>
       								<?php
       								// --- show schedule ---
       								if ( $show_sched ) {
   
       									$showtimes = explode( '|', $showtime );
       									// 2.2.2: fix to weekday value to be translated
       									$weekday = radio_station_translate_weekday( date( 'l', $showtimes[0] ) );
   
       									// 2.2.7: fix to convert time to integer
       									if ( 12 === (int) $time ) {
       										?>
       										<div class="on-air-dj-sched">
       											<?php echo esc_html( $weekday ); ?>, <?php echo esc_html( date( 'g:i a', $showtimes[0] ) ); ?> - <?php echo esc_html( date( 'g:i a', $showtimes[1] ) ); ?>
       										</div>
       										<?php
       									} else {
       										?>
       										<div class="on-air-dj-sched">
       											<?php echo esc_html( $weekday ); ?>, <?php echo esc_html( date( 'H:i', $showtimes[0] ) ); ?>
       											- <?php echo esc_html( date( 'H:i', $showtimes[1] ) ); ?>
       										</div>
       										<?php
       									}
       								}
       								?>
       							</div>
       							<?php
       						} 
       					}
       				}
       			} else {
       				if ( ! empty( $default ) ) {
       					?>
       					<li class="on-air-dj default-dj">
       						<?php echo esc_html( $default ); ?>
       					</li>
       					<?php
       				}
       			} ?>
       			</div>
       ```
   
 * What should I change or do differently in order to get both widgets to display
   like a bootstrap 4 media object? An example of what my client is looking for 
   can be found on [KS 107.5](http://ks1075.radio.com/) sidebar. Please advise.

Viewing 7 replies - 1 through 7 (of 7 total)

 *  Plugin Author [Tony Zeoli](https://wordpress.org/support/users/tonyzeoli/)
 * (@tonyzeoli)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12381831)
 * Thanks for writing in.
 * We are just about to release version 2.3.0, which you can review here: [https://radiostationdemo.com](https://radiostationdemo.com).
   We’re rewritten a lot of the code, so you can investigate the new options.
 * You can download the development version and test it for yourself here: [https://github.com/netmix/radio-station/tree/develop](https://github.com/netmix/radio-station/tree/develop)
 * As a developer, you can add any bugs or feature requests on our Git page here:
   [https://github.com/netmix/radio-station](https://github.com/netmix/radio-station).
 * Or, you can contribute via Git pull request your suggestion for an update to 
   the code and we can merge it into master if it makes sense and it’s part and 
   parcel to our development track.
 * I’m looking at the example and I only see the upcoming show/DJ widget and don’t
   see the Current Song widget. A current song will only display in the widget during
   the time of the show. So, if there is a widget in place and the playlist is being
   curated manually, it will display only during the showtime for now. We are going
   to improve this in an upcoming PRO version.
 * We are also starting down the road of thinking about add-ons to sync playlisting
   from radio station automation software. What software is your client using to
   automate their station? We’re talking to LibreTime, an open-source radio station
   automation software, now about integrating with a forthcoming API. But we’re 
   going to look at AirTime as well. This being so the show host/DJ/producer will
   not have to manually update a Show playlist and it can be pulled from the automation
   software via API and published during the show.
 * In terms of any code changes, Tony Hayes is the Lead Developer on the project.
   He is in Australia, so it could take 12 to 24 hours for him to respond to any
   questions coming from a developer in the U.S. You can work with him directly 
   on this issue. I’ll flag it for him in Slack for him to respond to your query
   here, but it’s best to submit on Github where you can follow along with development
   and he can pick up your bug or feature request there.
 * Definitely review 2.3.0. We’re just about finished with QA and are planning to
   launch it next week.
 *  Plugin Author [Tony Zeoli](https://wordpress.org/support/users/tonyzeoli/)
 * (@tonyzeoli)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12391514)
 * Hi,
 * If we don’t hear back from you, we’ll consider this issue closed.
 *  Plugin Author [Tony Zeoli](https://wordpress.org/support/users/tonyzeoli/)
 * (@tonyzeoli)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12404461)
 * We haven’t heard back so we’ll consider this issue closed.
 *  Thread Starter [mroberts46](https://wordpress.org/support/users/mroberts46/)
 * (@mroberts46)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12404547)
 * I’ve been testing 2.9.0 of the Radio Station plugin. The layout of the widgets
   are better although still not how I would like. I haven’t figured out how to 
   properly change it to a media object with the new code. But since it displays
   nicer, I’ve moved on to other issues while I wait for the release of 2.3.0
 *  Plugin Author [Tony Zeoli](https://wordpress.org/support/users/tonyzeoli/)
 * (@tonyzeoli)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12404844)
 * Okay, I’ve asked Tony Hayes to respond to this post. 2.3.0 is coming by the end
   of next week. A little delayed as we’re still testing everything to make sure
   it’s a clean update.
 *  Plugin Author [Tony Zeoli](https://wordpress.org/support/users/tonyzeoli/)
 * (@tonyzeoli)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12404860)
 * Oops, I almost forgot. If you want to test the current development version, you
   can do so by downloading it here: [https://github.com/netmix/radio-station/tree/develop](https://github.com/netmix/radio-station/tree/develop).
   It’s not the official release and there’s still some work being done on the legacy
   widget styles. But trial is out and let us know if that solves your problem.
 *  Plugin Contributor [Tony Hayes](https://wordpress.org/support/users/majick/)
 * (@majick)
 * [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12405046)
 * While this kind of custom modification is quite outside the scope of free support,
   I can suggest the following way to do it… Instead of modifying the widget class
   files directly (which will be overwritten on plugin update), you can use the 
   new widget output filters that will be included in 2.3.0 for custom modification
   purposes (currently available by installing the development branch version linked
   above.)
 * Also in 2.3.0, all widget output is generated by it’s corresponding shortcode
   so as to deduplicate code and instead follow the DRY (Donot Repeat Yourself) 
   principle, so you will find the actual output code in `/includes/shortcodes.php`
   now instead.
 * The relevent filters are: `radio_station_current_show_widget_override`, `radio_station_upcoming_shows_widget_override`
   and `radio_station_current_playlist_widget_override`
    (note: this last is presently`
   radio_station_now_playing_widget_override` in the current development version,
   but this will be changed to match the change in the widget naming – filter names
   won’t be changed again after actual release though.)
 * Though I’m not specifically familiar with how the Bootstrap Media Object looks
   or the styles it’s classes apply, considerable efforts have been made to add 
   IDs and classes to each of the elements in the widget output to make styling 
   them easier. So, you could use this fact with the output filters to add Bootstrap
   classes to the existing classes. eg.
 *     ```
       add_filter('radio_station_upcoming_shows_widget_override', 'bootstrap_upcoming_shows_widget', 10, 3);
       function bootstrap_upcoming_shows_widget($html, $args, $atts) {
           $html = str_replace('upcoming-shows-title', 'upcoming-shows-title mt-0', $html);
           // repeat above line until desired changes are made
           return $html;
       }
       ```
   
 * Though a similar thing could be done via jQuery, this is probably a more efficient
   and robust way of adding the Bootstrap classes that you want, however it is up
   to you to match the widget elements to the Bootstrap structure to apply the right
   classes to achieve the effect that you want.
    -  This reply was modified 6 years, 4 months ago by [Tony Hayes](https://wordpress.org/support/users/majick/).

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Bootstrap Media Object’ is closed to new replies.

 * ![](https://ps.w.org/radio-station/assets/icon-256x256.png?rev=2905948)
 * [Radio Station by netmix® - Manage and play your Show Schedule in WordPress!](https://wordpress.org/plugins/radio-station/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/radio-station/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/radio-station/)
 * [Active Topics](https://wordpress.org/support/plugin/radio-station/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/radio-station/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/radio-station/reviews/)

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)
 * [style](https://wordpress.org/support/topic-tag/style/)
 * [widget](https://wordpress.org/support/topic-tag/widget/)

 * 7 replies
 * 3 participants
 * Last reply from: [Tony Hayes](https://wordpress.org/support/users/majick/)
 * Last activity: [6 years, 4 months ago](https://wordpress.org/support/topic/bootstrap-media-object/#post-12405046)
 * Status: resolved