0

I am using Foundation framework in a theme wordpress. I want to display a length excerpt according a device. Example 25 words for mobile, 45 for tablet and so for.

I tried this code (Multiple excerpt lengths in wordpress) for multiple excerpts and works well. But now I need to know how I use it con query "@media only screen and (max-width: 40.063em" or "class="show-for-small-only" in that.

Regards

Community
  • 1
  • 1
eduan
  • 3
  • 4

3 Answers3

2

You can take several approaches to achieve what you want. The first one, considering you want to use Foundation you can simply use its own classes, like so:

<p class="show-for-small-only"><?php echo excerpt(25); ?></p>
<p class="show-for-medium-only"><?php echo excerpt(45); ?></p>
<p class="show-for-large-up"><?php echo excerpt(65); ?></p>

You can also take a full css approach with Media Queries:

<p class="excerpt"><?php the_content(); ?></p>

The styles:

p.excerpt {
text-overflow: ellipsis; 
width: 150px; /* Or whatever you want since i'm taking a mobile-first aproach */
white-space: nowrap;
overflow:hidden; 
}

@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  p.excerpt { width: 250px;/* whatever you wish */ }
} /* Tablet-only */

@media only screen and (min-width: 64.063em) {
  p.excerpt { width: 350px;/* whatever you wish */ } 
} /* min-width 1025px - large screens up */

Or you can even go full responsive using PHP for mobile detection:

<?php
        $tablet_browser = 0;
        $mobile_browser = 0;

        if (preg_match('/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
            $tablet_browser++;
        }

        if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile)/i', strtolower($_SERVER['HTTP_USER_AGENT']))) {
            $mobile_browser++;
        }

        if ((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml') > 0) or ((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE'])))) {
            $mobile_browser++;
        }

        $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'], 0, 4));
        $mobile_agents = array(
            'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
            'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
            'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
            'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
            'newt','noki','palm','pana','pant','phil','play','port','prox',
            'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
            'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
            'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
            'wapr','webc','winw','winw','xda ','xda-');

        if (in_array($mobile_ua,$mobile_agents)) {
            $mobile_browser++;
        }

        if (strpos(strtolower($_SERVER['HTTP_USER_AGENT']),'opera mini') > 0) {
            $mobile_browser++;

            $stock_ua = strtolower(isset($_SERVER['HTTP_X_OPERAMINI_PHONE_UA'])?$_SERVER['HTTP_X_OPERAMINI_PHONE_UA']:(isset($_SERVER['HTTP_DEVICE_STOCK_UA'])?$_SERVER['HTTP_DEVICE_STOCK_UA']:''));
            if (preg_match('/(tablet|ipad|playbook)|(android(?!.*mobile))/i', $stock_ua)) {
              $tablet_browser++;
            }
        }

        if ($mobile_browser > 0): ?>
           <p class="show-for-small-only"><?php echo excerpt(25); ?></p>

        <?php 
        else if ($tablet_browser > 0): ?>
           <p class="show-for-medium-only"><?php echo excerpt(45); ?></p>

        <?php
        else: ?>
           <p class="show-for-large-up"><?php echo excerpt(65); ?></p>


        <?php endif; ?>
Antonio Freire
  • 29
  • 4
0

Depending on the theme, you can use multiple elements and just apply certain classes for each one. For example, bootstrap offers elements that will be shown/hidden based on the media type.

http://getbootstrap.com/css/#responsive-utilities

So you can just create one element with 25 words for mobile and apply the class visible-xs on it, 45 words in another element with the class visible-md, etc.

Joseph
  • 5,070
  • 1
  • 25
  • 26
0

I thought about it too. Foundation have mediaqueries (http://foundation.zurb.com/docs/media-queries.html), but I think that a function or something like that it could be more intuitive.

Thanks for your advice.

eduan
  • 3
  • 4