{% if hyperevents %}
	<div class="row-fluid nav-header"> Related Talks: </div>
	{% for hyperevent in hyperevents %}
		{% if hyperevent.video_url  %}
			<div class="row-fluid pull-left">
				{% if hyperevent.snapshot_url %}
					<a href="{% url get_hyperevent hyperevent.id %}" rel="shadowbox;"> 
						<img class="snap img-polaroid" width="50px" src="{{ hyperevent.snapshot_url }}"/> 
						<span class="hyperevent-name"> {{ hyperevent.title|truncatechars:30 }} </span>
					</a>
				{% else  %}
					<a href="{% url get_hyperevent hyperevent.id %}" rel="shadowbox;"> 
						<img class="snap img-polaroid" width="50px" src="{{ STATIC_URL }}klewelportal/images/not-available.jpg"/> 
						<span class="hyperevent-name"> {{ hyperevent.title|truncatechars:30 }} </span>
					</a>
				{% endif %}
			</div>
		{% endif %}
	{% endfor %}
{% endif %}

{% if hyperevents %}
	<div class="row-fluid nav-header"> Related Talks: </div>
	{% for hyperevent in hyperevents %}
		{% if hyperevent.video_url  %}
			<div class="row-fluid pull-left">
				{% if hyperevent.snapshot_url %}
					<a href="{% url get_hyperevent hyperevent.id %}" rel="shadowbox;"> 
						<img class="snap img-polaroid" width="50px" src="{{ hyperevent.snapshot_url }}"/> 
						<span class="hyperevent-name"> {{ hyperevent.title|truncatechars:55 }} </span>
					</a>
				{% else  %}
					<a href="{% url get_hyperevent hyperevent.id %}" rel="shadowbox;"> 
						<img class="snap img-polaroid" width="50px" src="{{ STATIC_URL }}klewelportal/images/not-available.jpg"/> 
						<span class="hyperevent-name"> {{ hyperevent.title|truncatechars:55 }} </span>
					</a>
				{% endif %}
			</div>
		{% endif %}
	{% endfor %}
{% endif %}

Update title length due to box width expension
Update title length due to box width expension