AngularJS Bootstrap Galleryの風景画像とポートレート画像

Question

私はAngularJS、ブートストラップとWordpressでサイトを構築しました。

ギャラリーでは、2つのポートレート画像を横に並べて表示し、横の画像を1つの行に表示できます。私はこの投稿を見つけたhttp://codepen.io/horne3754sg/pen/vNBdgB誰かが画像の配列でペアを見つけるとグリッドを構築するが、彼はブートストラップを使用していない。

この例ではそうではありませんが、ギャラリーを特定のブレークポイントでスタックモードにします。私が直面しているもう一つの問題は、上記の例では、画像であらかじめ定義された配列を使用していて、画像を取得するために非同期要求を使用するため、画像配列でペアを見つけることができません。今のところ、これは私のコードです：

AngularJS：

return $http.get('wp-json/wp/v2/projects/?status=publish&slug=' + url).success(function(res) { 
     WPService.project = res; 

     // We retrieve all sizes for each image in the project 
     let project_attached_images_length = WPService.project[0].attached_images.length; 

     for(let i=0; i< project_attached_images_length; i++) { 
      $http.get('wp-json/wp/v2/media/' + WPService.project[0].attached_images[i].ID).success(function(res) { 
       WPService.project_images[i] = res; 

       let image = new Image(); 
       image.src = WPService.project_images[i].source_url; 
       WPService.project_images[i].width = image.width; 
       WPService.project_images[i].height = image.height; 

       if(WPService.project_images[i].width <= WPService.project_images[i].height) 
        WPService.project_images[i].orientation = 'portrait'; 
       else 
        WPService.project_images[i].orientation = 'landscape'; 

       //console.log(i + ' ' + WPService.project_images[i].source_url + ' ' + WPService.project_images[i].dimension); 
       //console.log(WPService.project_images[i]); 
      }); 
     } 
    }); 
} 

HTMLコード：

  <div ng-repeat="project in data.project"> 
       <div class="row" ng-repeat="image in project.attached_images track by $index" ng-hide="$index == 0"> 
       <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div> 
       <div ng-class="{ 'col-md-10': !isToggled, 'col-md-12': isToggled }"> 
        <div class="project-image afkl-lazy-wrapper afkl-img-ratio-1-1" afkl-lazy-image="{{ data.project_images[$index].media_details.sizes.medium.source_url }} 640w, {{ data.project_images[$index].media_details.sizes.large.source_url }} 768w, {{ image.guid }}"></div> 
        <p class="project-photos-excerpt">{{ image.post_excerpt }} - {{ data.project_images[$index].orientation }}</p> 
       </div><!-- .col-md-10 --> 
       <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div> 
       </div><!-- .row --> 
      </div><!-- ng-repeat wrapper --> 

はたぶん誰かが発見した別の解決策、Masonaryは、例えばそこですか？ （私はちょうどこれに出くわしました）

私はどのように私のグリッドの横に肖像画を取得するのですか？配列には固定次数もありません。

Answer 1

私は以下の解決策に終わった。画像ごとに別々のブートストラップ行/列を印刷するのではなく、LIのインラインブロックの中にIMGを置くULテーブルを持つコンテナを1つ作成しました。この方法は、あなたはngのリピートをすることができ、行心配をせずに：

CSS：

  <div class="row" ng-repeat="project in data.project"> 
       <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div> 
       <div ng-class="{ 'col-md-10': !isToggled, 'col-md-12': isToggled }"> 
       <ul id="project-photos"> 
        <li ng-repeat="image in project.attached_images track by $index" class="{{ data.project_images[$index].class }}" ng-if="$index != 0"> 
        <div class="project-image" afkl-lazy-image="{{ data.project_images[$index].media_details.sizes.medium.source_url }} 640w, {{ data.project_images[$index].media_details.sizes.large.source_url }} 768w, {{ image.guid }}"></div> 
        <p class="project-photos-excerpt" ng-if="image.post_excerpt">{{ image.post_excerpt }}</p> 
        </li> 
       </ul> 
       </div><!-- .col-md-10 --> 
       <div ng-class="{ 'col-md-1': !isToggled, 'col-md-0': isToggled }"></div> 
      </div><!-- .row --> 

角度

#project-photos { 
    list-style: none; 
    display:table; 
    padding:0; 
    width:100%; 
} 
#project-photos li { 
    display:inline-block; 
    vertical-align: top; 
} 
#project-photos li.portrait { 
    width:50%; 
    padding:0 1% 1% 1%; 
} 
#project-photos li.landscape { 
    width:100%; 
    padding:0 1% 1% 1%; 
} 
.project-image img { 
    display:block; 
    max-width:100%; 
    width:100%; 
    height:auto 
} 

HTML：

return $http.get('wp-json/wp/v2/projects/?slug=' + url).success(function(res) { 
     WPService.project = res; 

     // We retrieve all sizes for each image in the project 
     let project_attached_images_length = WPService.project[0].attached_images.length; 

     for(let i=0; i< project_attached_images_length; i++) { 
      $http.get('wp-json/wp/v2/media/' + WPService.project[0].attached_images[i].ID).success(function(res) { 
       WPService.project_images[i] = res; 

       if(WPService.project_images[i].media_details.width < WPService.project_images[i].media_details.height) 
        WPService.project_images[i].class = 'portrait'; 
       else 
        WPService.project_images[i].class = 'landscape';