Question

我正在尝试从半开始（使用Understraps）构建WordPress主题，并且我正在使用允许使用PHP进行放置的Instagram插件。基本上，我想检测屏幕宽度，然后相应地显示帖子数。

我觉得jQuery将对此有所帮助，但是我并没有真正了解如何在.php文档中一起使用它和PHP

此：

    $instagram->serve_user_media( 'foo', x )

从 foo 的Instagram获取 x 张照片并显示它们。我将其扩展为16个，然后从中随机选择4个。

例如：

if screenWidth < 990 {
   $user_photos = $instagram->serve_user_media( 'foo', 9 );
}

我了解我的代码中可能存在很多错误，但是请不要将其分解得太多，因为我仍在学习，并且可能会选择一个更简单的挑战。

PHP：

<section class="spotlight-ig">
<?php 
    $instagram = new mishaInstagram();

    $user_photos = $instagram->serve_user_media( 'foo', 16 );

        //$delimiters has to be array
    //$string has to be array

    function multiexplode ($delimiters,$string) {

        $ready = str_replace($delimiters, $delimiters[0], $string);
        $launch = explode($delimiters[0], $ready);
        return  $launch;
    }


    $html = '<ul>';
        //loop to pull IG photos in and split title from array.
        $lcv = rand(1,3); // loop count variable
        $n = 3;
        foreach ( $user_photos as $photo ) {

            if ($lcv++ % $n == 0) {
                $text = $photo['edge_media_to_caption']['edges'][0]['node'] ['text'];
                $exploded = multiexplode(array(":","-"),$text);
                if (count($exploded) == 3)
                {
                    $keys = array_keys($exploded);
                    $i_title = $keys[1];
                    $ig_title = $exploded[$i_title];
                    $i_author = $keys[2];
                    $ig_author = $exploded[$i_author];
                }
                $html .= '<li class="ig-post"><a href="https://instagram.com/p/' . $photo['shortcode'] . '"><h2 class="title">' . $ig_title .'</h2>'; // instagram link
                $html .= '<img src="' . $photo['thumbnail_src'] . '" />'; // hi-res photo: $photo['display_url']
                $html .= '<h3 class="author">' . $ig_author .'</h3></a></li>';
                // $photo['taken_at_timestamp'] – publish date
                // $photo['dimensions']['height'] and $photo['dimensions']['width'] – original height and width
                // $photo['edge_media_to_caption']['edges'][0]['node']['text'] – caption :D
                // $photo['edge_liked_by']['count'] – number of likes
                // $photo['edge_media_to_comment']['count'] – number of comments
                // print_r( $photo ) – for more parameters
            }
        }
    $html .= '</ul>';
    echo $html;
?>

</section>

SCSS：

//Spotlight setup
.spotlight-ig{
  width:85%;
  margin: 0 auto;
  padding:35px 0;
  position: relative;
  &:before{
    content: "";
    position: absolute;
    width: calc(100% + 7%);
    height: 100%;
    top: 10px;
    background: #3747B2;
    z-index: -1;
    right:-10%;
  }
  ul{
    margin:0;
    padding:0;
    list-style: none;
    display: grid;
  grid-gap: 2em 5em;
  -ms-grid-columns: (minmax(150px, 1fr))[auto-fit];
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .ig-post{
    a{
      color: white!important;
    }
    @media only screen and (max-width: 640px) {
      width:80%;
      margin:0 auto;
    }
    .author{
      text-align:right;
      font-size:1.5em;
    }
    h2{
      filter: brightness(1.5);
      font-size:1.6em;
      vertical-align: baseline;
      width: 84%;
      margin: 0 0 0 16%;
      text-transform: capitalize;

    }
    img{
      margin:10px 0px 15px 0px;
    }
    &:nth-child(1) img{
          box-shadow: -7px 7px #888;
        }
    &:nth-child(2) img{
          box-shadow: -7px 7px #333;
        }
    &:nth-child(3) img{
          box-shadow: -7px 7px #f33;
        }
    &:nth-child(4) img{
          box-shadow: -7px 7px #000;
        }

  }
}

我正在使用的IG插件是Instagram Widget Shortcode。

PHP检测屏幕宽度然后更改变量？

0 个答案: