Datafeedr Support Forums

Datafeedr Support Forums (http://www.datafeedr.com/forums/index.php)
-   Questions (http://www.datafeedr.com/forums/forumdisplay.php?f=67)
-   -   How to Limit Product Title Lengths On Category Pages? (http://www.datafeedr.com/forums/showthread.php?t=4385)

RyanVega April 24th, 2011 02:53 PM

How to Limit Product Title Lengths On Category Pages?
 
Hi,

I have had a search through the forum and cant quite find the answer to this one. I would like to know how I can limit the length of product titles on my category pages, I guess limiting to a certain number of characters would be the best way.

I am using the 4 column version of template 1 and as some of my product titles are quite a bit longer than others, this screws up the layout. This is because the products with long titles are in slightly bigger boxes and title takes up 3 lines when most take up 2 lines for example.

Im thinking there must be an easier way to correct this than rewriting every single product title so they all fit on the same number of lines.

If it helps my store ID is 31130.

Thanks a lot for any assistance you guys can give.

Cheers

Eric April 24th, 2011 03:08 PM

Hi

In your views you could replace this:

[product.name]

with this:

<?php echo substr($product->name, 0, 15); ?>

That would show the first 15 characters of the product title.

More information about substr() here.

Eric

RyanVega April 24th, 2011 03:21 PM

Wow that works perfectly.

Awesome superfast support - bloody brilliant . . . thanks!

RyanVega April 24th, 2011 06:30 PM

Hi again Eric,

After playing around with this setting on a few different pages, it doesn't quite solve the problem every time. Even when limiting the number of characters in the title, different titles can still be spread over 2 or 3 lines, especially if there are a couple of long words.

This basically means that the box sizes can still be different which then just messes up the layout for the whole page - it only takes one product to mess up everything.

Is there a way of determining what the actual size of the boxes are so that I can keep them all the same, rather than just restricting the title length?

Thanks again, Ryan

Eric April 24th, 2011 07:02 PM

Hi Ryan

By default, all Datafeedr template views take product name and description into consideration on category pages where varying lengths of names and descriptions could potentially mess up the layout.

This is all done via CSS and specifically the overflow, line-height and height attributes. Here's an example:

HTML + CSS:

HTML Code:

<style type="text/css" title="text/css">
#box
{
        width: 200px;
        height: 300px;
        background-color: #6FC;
}

#box h3
{
        overflow: hidden;
        font-size: 14px;
        line-height: 1.2em;
        height: 2.4em; /* This MUST be a multiple of "line-height" */
}
</style>

<div id="box">
        <h3>
                This is a really long title which,
                if not controlled by CSS, would
                continue to wrap around for 3, 4
                or possibly even 5 lines!
        </h3>
</div>

Output:



If we want to show 4 lines of the text, we modify the height attribute multiplying the "line-height" values by 4 (1.2 * 4 = 4.8). So we have height: 4.8em. Here's the output of that single code change.



Like I said, by default, all Datafeedr templates do this. You must have modified your product list modules or CSS code if this is not working. You will need to apply the same technique as above to your new code.

Eric

RyanVega April 25th, 2011 08:10 AM

Ok thanks for that Eric.

I will have a play around with that and see how it goes. The only thing I have altered is the text size for the product titles, this was changed from H2 to H4 but that seems to be what is messing things up because when I leave the text size at the standard H2 everything is fine. I haven't done anything with the CSS yet but I will try and work out how to modify it for my views and let you know if there are any problems.

Thanks again, Ryan

RyanVega April 27th, 2011 04:14 AM

Hi Eric,

I have tried to amend my CSS using the code you provided but for some reasons it does not make any difference to my views. I have changed different values but nothing has any affect.

Is there any way you could actually look into my store or give me any further guidance about what I actually need to be adding to the customer CSS box?

Thanks again, Ryan

RyanVega April 27th, 2011 07:36 AM

OK I *think* I have sorted it.

Cheers

Eric April 27th, 2011 08:08 AM

It looks good to me!


All times are GMT -5. The time now is 11:03 PM.

Powered by vBulletin® Version 3.6.8
Copyright ©2000 - 2021, Jelsoft Enterprises Ltd.