Need A Little Help With Video Title In A Template

@derrickhand300
9 years ago
1,353 posts

I have created a template for a short list of latest videos
I am trying to get the video title to display across 1 or 2 lines ( I made this work once in the past but cannot remember how I did it)
Here is the code that contains the title

<div class="p5">
                       <a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{$item.video_title}</a>
                        {jrCore_lang module="jrVideo" id="31" default="album"}:<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.video_album_url}">{$item.video_album}</a>
                        {if isset({$item.video_category}) && strlen({$item.video_category}) > 0}
                            {jrCore_lang module="jrVideo" id="12" default="category"}:{$item.video_category}<br>
                        {/if}
                        {jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
                    </div>

Attached is a screenshot of what I have now- I would like the title to display as 1-2 lines instead of 1 or 2 words per line

I have tried

<span></span> and <div></div> and <p></p>

updated by @derrickhand300: 12/22/16 11:55:59AM

@douglas
9 years ago
2,790 posts

Which skin is this for and is that a mobile view or PC?

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@derrickhand300
9 years ago
1,353 posts

Hello Douglas
Its a custom skin in PC view...I have also tried adding and removing different H1,2,3,4 tags

Looking at the source code

 <div class="col-lg-5">
                    <div class="p5">
                         <a href="http://theamericandriller.com/drilling-ahead/video/286/salt-water-disposal-well-fire">Salt Water Disposal Well Fire</a>
                        album:<a href="http://theamericandriller.com/drilling-ahead/video/albums/accident">Accident</a>
                                                <span style="display:inline-block;vertical-align:middle;">

I suppose "span style" is going to be in the CSS..?..will work on this when i get back from taking boys to school

updated by @derrickhand300: 02/24/15 05:32:19AM

@douglas
9 years ago
2,790 posts

Without knowing what the skin is using it is going to be hard to help. I don't recognize some of the CSS your using, ie. col-lg-2, which is not part of any of the Jamroom default skins.

With that said, I would do as you've suggested, only I would just change the h1 or h2 tags to something else. So instead of:

<h1>Title</h1>

Maybe try something like:

<span style="font-size:12px;font-weight:bold;">Title</span>

But... it could also be the col-lg-2 that is causing the title to scrunch up like that.

Hope this helps!

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

@derrickhand300
9 years ago
1,353 posts

Thanks- I will try that first....I am using the template injection to chg the columns to this skin

John Bizley
@john-bizley
9 years ago
251 posts

Do you mean something like this ? If so this can be done with just a little css.
.col-lg-1 {
width: auto;
}
.col-lg-3 {
width: auto;}
.col-lg-3 .p5 h3{ margin-top:0px; margin-bottom:0px }
.col-lg-3 .p5 h3 a{ font-size:1.2em }

updated by @john-bizley: 02/24/15 08:55:52AM

John Bizley
@john-bizley
9 years ago
251 posts

Sorry I know see the list you want to change from your image, will have a look when I get home unless you have already fixed it up.

@derrickhand300
9 years ago
1,353 posts

Thank you John

SteveX
@ultrajam
9 years ago
2,584 posts

It is the column constraining the width of the heading on your /drilling-ahead/video/albums/accident page.

So change the col-lg-3 to col-lg-8 and get rid of the last column (so that your grid still adds up to 12). You don't need to use "last" with bootstrap 3.

Also, you can remove the container div - bootstrap 3 is quite happy with rows within rows. That will give you extra space as well - the container is adding a second set of padding there. But since you need somewhere to put your buttons from the removed last column, try changing that class="container" to class="controls-enabler" and then add the buttons div class="block_config" before your first column. You will need an extra rule there for controls-enabler (it isn't part of bootstrap), probably something like this:

.controls-enabler {
	position:relative;
	clear:both;
	overflow:visible;
}

So it would end up something like this:

<li data-id="81">
	<div class="item">
		<div class="controls-enabler">
			<div class="block_config">
				buttons are here
			</div>
			<div class="row">
				<div class="col-lg-1">
					<div class="p5">
						2
					</div>
				</div>
				<div class="col-lg-8">
					<div class="p5">
						<h3>Title Here</h3>
					</div>
				</div>
				<div class="col-lg-3">
					<div class="p5">
						<span style="display:inline-block;vertical-align:middle;">
							<ul class="star-rating">
								...
							</ul>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</li>

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 02/24/15 10:53:04AM

@derrickhand300
9 years ago
1,353 posts

Thanks Ultrajam!
I added this to bootstrap.css

.controls-enabler {
	position:relative;
	clear:both;
	overflow:visible;
}

Then here is what I have in my template

{jrCore_module_url module="jrVideo" assign="murl"}
  {if isset($_items)}
      {foreach from=$_items item="item"}     
    <li data-id="81">
  	<div class="item">
  	 <div class="controls-enabler">
  		<div class="block_config">				
  			<div class="row">
  				<div class="col-lg-1">
  			<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="medium" crop="auto" class="iloutline img_scale" alt=$item.video_title width=true height=false}</a>
  					</div>
  				</div>
  				<div class="col-lg-8">
  					<div class="p5">
    		<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{$item.video_title}</a>{jrCore_lang module="jrVideo" id="31" default="album"}:<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.video_album_url}">{$item.video_album}</a>{if isset({$item.video_category}) && strlen({$item.video_category}) > 0}{jrCore_lang module="jrVideo" id="12" default="category"}:{$item.video_category}  
  <br>
  					</div>
  				</div>
  				<div class="col-lg-3">
  					<div class="p5">
  						<span style="display:inline-block;vertical-align:middle;">
  							<ul class="star-rating">
  								 {jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
  							</ul>
  						</span>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </li>
      {/foreach}
  {/if}

I have a syntax error right now I have to find- but is this looking close?
updated by @derrickhand300: 02/24/15 12:01:13PM

@michael
9 years ago
7,714 posts

First guess is the syntax error comes from that multi-line {jrCore_module_function ..... part as there are line breaks in between. shrink that down so the line breaks are gone.

<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="medium" crop="auto" class="iloutline img_scale" alt=$item.video_title width=true height=false}

@derrickhand300
9 years ago
1,353 posts

Thanks-I edited it above and in the template- but still have an error...Ok...I think I see where I went wrong

updated by @derrickhand300: 02/24/15 12:16:22PM

@michael
9 years ago
7,714 posts

The problem is that you have an {if.....} but no {/if} I've added in the ending {/if}

{jrCore_module_url module="jrVideo" assign="murl"}
  {if isset($_items)}
      {foreach from=$_items item="item"}     
    <li data-id="81">
  	<div class="item">
  	 <div class="controls-enabler">
  		<div class="block_config">				
  			<div class="row">
  				<div class="col-lg-1">
  			<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="medium" crop="auto" class="iloutline img_scale" alt=$item.video_title width=true height=false}</a>
  					</div>
  				</div>
  				<div class="col-lg-8">
  					<div class="p5">
    		<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/{$item._item_id}/{$item.video_title|jrCore_url_string}">{$item.video_title}</a>{jrCore_lang module="jrVideo" id="31" default="album"}:<a href="{$jamroom_url}/{$item.profile_url}/{$murl}/albums/{$item.video_album_url}">{$item.video_album}</a>{if isset({$item.video_category}) && strlen({$item.video_category}) > 0}{jrCore_lang module="jrVideo" id="12" default="category"}:{$item.video_category}{/if} 
  <br>
  					</div>
  				</div>
  				<div class="col-lg-3">
  					<div class="p5">
  						<span style="display:inline-block;vertical-align:middle;">
  							<ul class="star-rating">
  								 {jrCore_module_function function="jrRating_form" type="star" module="jrVideo" index="1" item_id=$item._item_id current=$item.video_rating_1_average_count|default:0 votes=$item.video_rating_1_count|default:0}
  							</ul>
  						</span>
  					</div>
  				</div>
  			</div>
  		</div>
  	</div>
  </li>
      {/foreach}
  {/if}

@derrickhand300
9 years ago
1,353 posts

Thank you guys!

updated by @derrickhand300: 02/24/15 08:47:07PM

SteveX
@ultrajam
9 years ago
2,584 posts

<div class="block_config">
    buttons are here
</div>

Copy the whole block_config div from your original template - that div should close and you need the button code in there.

--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

solved Need A Little Help With Video Title In A Template

Tags