Responsive foreach?

[OpenBayou]

What's the best way to do a responsive foreach on the index? I want to limit number of posts based on the screen width. Any suggestions?

[adrian]

Well given that PHP can't determine the screen width, you'd have to get it via JS and then do an AJAX call based on that width. Honestly I don't think there is much point to that. Just get as many posts as you need for the widest screens and then limit their display with css or js.

[OpenBayou]

What about load a php file based on screen size? I'm trying this but it doesn't work.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script language=javascript>
    if (screen.width >= 720 )
         $('#load').load("load.php");
</script>

<div id="load"></div>

The 'load.php' is in the same folder as the code.

[adrian]

PW won't let you call php files directly from the sites directory (including the templates subfolder). You can either put the load.php into a folder above sites, or you could assign the file as a template for a page and load("the_page_url");

[OpenBayou]

Opps! Needed to have the #load before the javascript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div id="load"></div>
<script language=javascript>
    if (screen.width >= 720 )
         $('#load').load("load.php");
</script>

The above would load the file load.php, even if the screen is less than 720. The below code fixes the problem:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div id="load"></div>

<script language=javascript>
(function () {
var viewportWidth = $(window).width();
if (viewportWidth > 1400) {
$('#load').load('load.php');
} else {
$('#load').load('load2.php');
}
}());
</script>

 

[diogo]

I agree with Adrian, there's no point on doing this with PHP when you can do it easily with CSS. Besides, if someone loads the site on a small window, and then resizes the window, you'll have less content on a larger screen. Is your reason purely layout related, or are you trying to spare mobile users from loading content? That can also be fixed with JS, and some browsers won't even load images that are not displayed.

In your code you're trying to load a PHP file with javascript. for what I see, either you have those files on the root of the site without PW code, or it won't work at all. Anyway, I strongly discourage you to load content through AJAX if only for templating purposes.

Here's how you can do it with CSS:

@media only screen and (max-device-width: 720px) {
  .articles-parent article:nth-child(n+6) {
      display: none;
  }
}

This would hide the last 6 posts when the screen is narrower than 720px.

[OpenBayou]

Is it possible to do :nth-child(n+6) on a picture element? Or do I have to do CSS?

<picture>
<source srcset="url to img" media="(max-width: 599px)">
<source srcset="url to img" media="(max-width: 767px)">
<source srcset="url to img">
<!-- fallback -->
<img srcset="url to img">
</picture>

 

[OpenBayou]

Well, this isn't working so I'm starting to work on plan B. I know that php files can't be loaded but can templates be loaded based on screen size?

[Marty Walker]

I use this from time to time when I absolutely have to: http://mobiledetect.net/

[diogo]

It's possible to do :nth-child(n+6) on any kind of element, it's not the element that matters but the context it is in, particularly it's siblings. If you have a bunch of <picture> elements standing next to each other, then picture:nth-child(n+6) would certainly work.

[OpenBayou]

@diogo Can you please provide an example? This is new to me.

[diogo]

Better yet, show us your HTML and I'll tell you how to do it.

[OpenBayou]

<picture:nth-child(n+6)>
<source srcset="<?php echo $child->post_image->first()->size(100,0,['quality' => 80])->url;?>" media="(max-width: 599px)">
<source srcset="<?php echo $child->post_image->first()->size(200,0,['quality' => 80])->url;?>" media="(max-width: 767px)">
<source srcset="<?php echo $child->post_image->first()->size(400,0,['quality' => 80])->url;?>">
<!-- fallback -->
<img srcset="<?php echo $child->post_image->first()->size(400,0,['quality' => 80])->url;?>">
</picture>

Don't really have anything so this is what I've done so far.

[LostKobrakai]

If you don't do custom cropping (art direction) for your image-sizes you don't need the picture element. Using srcset/sizes is enough. Also you might want to look up the correct usage of nth-child as it's nothing you add in html, it's css. Syntax like yours does not exist in html (even if some js frameworks try otherwise).