[Resolved] Trim Letter Length for Mobile Devices

[Author]

Posts

[Pete]

Hi there,

On this post: hidden link

I use to trim the letter length of the text content this in the View:
[trim length="320" count="letter"]

And this in function.php

add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
$content = wpv_do_shortcode($content);
$length = (int)$atts['length'];
if (strlen($content) > $length) {
$content = substr($content, 0, $length) . '…';
}
return $content;
}

All works great however is there a way to set a different letter length for all mobile devices?

I have searched for an hour or so see and can find nothing.

Thank you.

[Minesh]

Hello. Thank you for contacting the Toolset support.

You can use the standard WordPress function wp_is_mobile() to check if page is loaded on mobile.
=> https://developer.wordpress.org/reference/functions/wp_is_mobile/

You can use the above function and set the different limit for mobile device and adjust your code accordingly:
=> https://wordpress.stackexchange.com/questions/188881/proper-usage-of-wp-is-mobile

[Pete]

Hi Minesh,

Ok my experience of using and adding anything to functions.php is extremely limited. It's an area I rarely touch.

So what you've sent me means nothing I'm afraid.

I have no idea how to test or implement the code I have used, this I took from an older post in Toolset support.

Can you give me an example of changing the length for mobile so I can see if and why this works?

Thank you.

[Minesh]

You need to tell me what is the length you want to display on mobile and with a normal webpage. Maybe you can use the following example and adjust the values accordingly.

I'm sorry to hear that you do not know the PHP but with the code you shared is custom code and requires the appropriate knowledge to deal with that. I hope you will learn something with the following example.

You do not need to edit the funcitons.php files now as Toolset offers the custom code section where you can add your custom code:
=> https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/#adding-custom-php-code-using-toolset

- Please try to use the following code:

add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
$content = wpv_do_shortcode($content);

$length = (int)$atts['length'];
$length_mobile = (int)$atts['length_mobile'];

If(wp_is_mobile()){
$length = $length_mobile;
}

if (strlen($content) > $length) {
$content = substr($content, 0, $length) . '…';
}
return $content;
}

And you can call it as:

[trim length="320" length_mobile="100"]

Where, as you can see we pass the length for mobile is 100 and normal length is 320.

Once you place the above shortcode, it should display 320 characters with a normal page and 100 characters when you load the page on mobile.

[Pete]

Hi Minesh,

Functions.php code is something I've never got used to, Media queries and CSS are more logical to me and can work with them easy enough 🙂

Ok I have added exactly what you said and nothing has changed.

Added to our functions.php child theme:

add_shortcode('trim', 'trim_shortcode');
function trim_shortcode($atts, $content = '') {
$content = wpv_do_shortcode($content);

$length = (int)$atts['length'];
$length_mobile = (int)$atts['length_mobile'];

If(wp_is_mobile()){
$length = $length_mobile;
}

if (strlen($content) > $length) {
$content = substr($content, 0, $length) . '…';
}
return $content;
}

And then added to the View:

[trim length="320" length_mobile="100"]
[types field="property-details"][/types]
[/trim]

See this post, no change: hidden link

[Minesh]

Ahh - you never mentioned that you want to restrict the custom field content.

Can I have temporary access details so I can add the code to the Custom Code section and quickly check whats going wrong with your setup.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Actually, you were editing the wrong content template.

I see you are using the following view:
=> hidden link
And within the above view, you are using the following content templates:
- hidden link
- hidden link

With the above content template I've adjusted the code as given under:

 [limit_content length="320" length_mobile="100"]
[types field="property-details"][/types]
[/limit_content]

Also, I've added the following shortcode to the Custom Code section of Toolset as "Toolset Custom Code" snippet:
=> hidden link

add_shortcode('limit_content', 'func_limit_content');
function func_limit_content($atts, $content = '') {
$content = wpv_do_shortcode($content);
 
$length = (int)$atts['length'];
$length_mobile = (int)$atts['length_mobile'];

if(wp_is_mobile()){
$length = $length_mobile;
}

if (strlen($content) > $length) {
$content = substr($content, 0, $length) . '…';
}
return $content;
}

I can see with your page it works:
=> hidden link

Can you please confirm it works at your end as well.

[Pete]

Hi Minesh,

Thank you for this however on iPad this pages text length does not change:
hidden link

Looking at it now and there's no reduction for iPad.

Ahhh yes, I forgot we tried Content Templates for this, this is new to us and how it works is a little different 🙂

[Minesh]

It seems the standard WordPress function wp_is_mobile() do not have any checks for iPad.
=> https://developer.wordpress.org/reference/functions/wp_is_mobile/

I've added the following code to the "Custom Code" section:

function my_wp_is_mobile() {
    static $is_mobile;

    if ( isset($is_mobile) )
        return $is_mobile;

    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif (
        strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
            $is_mobile = true;
    } elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false && strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') == false) {
            $is_mobile = true;
    } elseif (strpos($_SERVER['HTTP_USER_AGENT'], 'iPad') !== false) {
        $is_mobile = true;
    } else {
        $is_mobile = false;
    }

    return $is_mobile;
}

And within the shortcode I've changed the condition to check with the custom function as given under:

if(my_wp_is_mobile()){
$length = $length_mobile;
}

Do you see its working now?

[Pete]

Hi again,

Hmmm this is making no difference.

Seems not to be possible and I don't wish to hack or mess about with WP code too much.

If you have no other suggestions then I just roll the site back to before you added all this code?

[Minesh]

Yes - absolutely.

[Pete]

Ok rolling site back. Many thanks for at least trying 🙂

Stay healthy and safe.

Thank you.

[Minesh]

Glad that the solution I shared helps you to resolve your issue. Please feel free to resolve this ticket.

[Pete]

My issue is resolved now. Thank you!