Hey All, I just asked in the php section and the members suggested I ask here because php isnt the best way to handle what I am needing.
You can see the other thread here
Basically I am wanting my description that is being pulled from the database to only have a selected number of lines being shown on the frontend. What would be the best way to accomplish this?
Thanks
Not sure about number of LINES, but you can do it with number of characters. I know you can do it with JS, there should be a PHP method (I know ColdFusion does.) Doesn’t PHP have a LEFT() function? Or substring() / substr() function?
OR… maybe you can do it by number of lines… IF the line breaks are hard-coded into the string, you can split the string into an array on the line breaks and just display x number of lines, I suppose.
PHP does have substr but it only does character count. I don’t know about left() or what that is. I also asked about \n but got no response 
Wolfshade, also consider what would happen if user does a text-resize. PHP is not suitable for this in that case.
Like I said in the other post, one surefire way to do it is with a recursive method. Using recursion you don’t need to know how many characters there are, the size of the image, or even what other elements besides text there are. Here’s 10 min demo I made: http://jsfiddle.net/labofoz/eymysfcf/ (it’s even responsive, just drag that middle bar around)
You basically need to wrap your thumbnail in a class (in the demo’s case, .trunc-text), and compare the thumbnail image with the height of the container. If the container is larger than the image (too much text), we just keep removing X-characters until they’re the same.
I added a couple of images of different sizes so you can see it working. Here’s the main loop:
/**
* Truncates the text to match the height of the image
* @param [ELM] $this The element to work on
* @param [INT] precision How many characters to remove at a time. Lower amounts are more accurate but take more time
*/
function truncateText($this, precision){
var $content = $('.content', $this)
var $thumb = $('.thumb', $this)
var safety = 999 //Safety net incase the loop runs forever
var content = $content.text()
// Remember the original text incase we need to revert it
if(!$this.data('orig-text'))
$this.data('orig-text', content)
else
$content.text($this.data('orig-text'))
while($content.height() > $thumb.height() && --safety > 0){
$content.text(content.substr(0, content.length - precision))
}
}
If you wanted to be fancy you could just expand the function to add ellipses, read more link, or an expander that shows the rest of the text.
Ok this is all gibberish to me. I am going to have to look it up and pretty much have it dumbed down to me so I can understand what it’s doing.
Hmm, sorry then. I didn’t mean to confuse you.
Did you try the demo? Is that even what you’re after? If so, you can almost just copy/paste it into your project and it would work out of the box. You would just need to change your HTML class names, which I can help you with.
Basically, PHP only does server stuff and JavaScript only does browser stuff. So what you’re after is literally impossible with just pure PHP.
I’m sorry if this is a dumb question but does this need to go into the header? And what do I need to change my class to?
I put it there but it didnt work.
His code would go where you need it displayed. The javascript can be right before </body>
My apologies for all the questions. I am trying to understand this… Here is what I have right now.
My php
<div class="pos-media media-left trunc-text">
<a href="new-product.php?Item=<?php echo $eid; ?>" title="" ><img src="UImages/<?php echo $imagename; ?>" width="294" height="220" /></a>
</div>
right before closing body tag
<script type="text/javascript">
jQuery(function($){
$('.trunc-text').each(function(){
truncateText($(this), 32)
})
/**
* Responsive!
* - Resets the content each time, use underscore to throttle this
*/
$(window).resize(function(){
$('.trunc-text').each(function(){
var $this = $(this)
var $content = $('.content', $this)
$content.text($this.data('orig-text'))
truncateText($(this), 32)
})
})
})
/**
* Truncates the text to match the height of the image
* @param [ELM] $this The element to work on
* @param [INT] precision How many characters to remove at a time. Lower amounts are more accurate but take more time
*/
function truncateText($this, precision){
var $content = $('.content', $this)
var $thumb = $('.thumb', $this)
var safety = 999 //Safety net incase the loop runs forever
var content = $content.text()
// Remember the original text incase we need to revert it
if(!$this.data('orig-text'))
$this.data('orig-text', content)
while($content.height() > $thumb.height() && --safety > 0){
$content.text($content.text().substr(0, $content.text().length - precision))
}
console.log(safety);
}
</script>
and I added this to my css
.trunc-text:after{
content: "";
clear: both;
display: block;
margin-bottom: 20px;
}
Does your `1 have class=“thumb” and does your conetnt div (that should come RIGHT after your code you just posted) have class=“content”?
This is what I have for the item div (where the item image, name, and description are)
<div class="box-1">
<div class="row first-row"><div class="width100 first-item">
<div class="teaser-item">
<div class="pos-media media-left trunc-text">
<a href="new-product.php?Item=<?php echo $eid; ?>" title="" ><img src="UImages/<?php echo $imagename; ?>" width="294" height="220" /></a>
</div>
<div class="pos-description">
<div class="element element-itemname first">
<a href="new-product.php?Item=<?php echo $eid; ?>"><?php echo $name; ?></a>
</div>
<div class="element element-textarea last">
<div><p><?php echo $desc; ?></p></div>
</div>
</div>
<p class="pos-links">
<span class="element element-itemlink first last">
<a href="new-product.php?Item=<?php echo $eid; ?>">View Equipment</a></span>
</p>
</div>
</div>
</div>
</div>
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.