Jump to content

Responsive foreach?


OpenBayou
 Share

Recommended Posts

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.

  • Like 3
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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");

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

  • Like 5
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

<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.

Link to comment
Share on other sites

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). 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...