gellery

src/app/_modules/publications/list/item/gellery/gellery.component.html

@@ -0,0 +1,9 @@
+
+<div class="poster" *ngIf="currentImage">
+    <img  [src]="currentImage.links?.full" />
+  </div>
+  <div class="posters" *ngIf="images.length>0">
+    <div class="item" *ngFor="let image of images">
+      <img [src]="image.links?.thumb" (click)="currentImage=image"/>
+    </div>
+  </div>

src/app/_modules/publications/list/item/gellery/gellery.component.ts

@@ -0,0 +1,14 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'gellery',
+  templateUrl: './gellery.component.html',
+  styleUrls: ['./gellery.component.scss']
+})
+export class GelleryComponent {
+ @Input() images:any[];
+ currentImage:any;
+  ngOnInit() {
+    if (this.images) this.currentImage = this.images[0];
+  }
+}

src/app/_modules/publications/list/item/publications-list-item.component.html

@@ -14,14 +14,8 @@
     <h3>{{publication.name}}</h3>
   </a>
 </div>
-<div class="poster" *ngIf="currentPoster">
-  <img  [src]="currentPoster.links?.full" />
-</div>
-<div class="posters" *ngIf="posters.length>0">
-  <div class="item" *ngFor="let poster of posters">
-    <img [src]="poster.links?.thumb" (click)="currentPoster=poster"/>
-  </div>
-</div>
+<gellery [images]="posters" *ngIf="posters"></gellery>
+
 <div class="excerpt">{{publication.excerpt}}</div>
 <a class="publication-read-more" [routerLink]="publication.link">
   Читать далее 

src/app/_modules/publications/list/item/publications-list-item.component.ts

@@ -24,7 +24,6 @@ export class PublicationsListItemComponent {
   }
 
   ngOnInit() {
-    console.log(this. publication)
     if (this.publication.posters) this.currentPoster = this.posters[0];
   }
 

src/app/_modules/publications/publications.module.ts

@@ -9,6 +9,7 @@ import {PublicationPageComponent} from "@app/_modules/publications/publication/p
 import {PageSectionsModule} from "@app/_modules/pages/sections/page-sections.module";
 import {RouterModule} from "@angular/router";
 import { WidjetModule } from '../widjet/widjet.module';
+import { GelleryComponent } from './list/item/gellery/gellery.component';
 
 @NgModule({
   imports: [
@@ -22,7 +23,8 @@ import { WidjetModule } from '../widjet/widjet.module';
     PublicationsListComponent,
     PublicationsListItemComponent,
     PublicationsListItemMenuComponent,
-    PublicationPageComponent
+    PublicationPageComponent,
+    GelleryComponent
   ],
   exports: [
     PublicationsListComponent,

src/assets/css/_pages-section.scss

@@ -317,37 +317,41 @@ publications-list{
     .date{
       color: var(--second);
     }
-    .poster{
-      width: 665px;
-      height: 468px;
-      max-width: calc( 100vw - 80px);
-      max-height: calc( (100vw - 80px ) * 0.7 );
-      margin-bottom: 8px;
-      border: 1px solid var(--second-dis);
-      background-color: var(--second-dis);
-    }
-    .posters{
-      display: flex;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      gap: 8px;
-
-      .item{
-        width: 72px;
-        height: 52px;
-        border: 1px solid var(--prime);
-        cursor: pointer;
-        :hover{
-          border-color:  var(--prime-act);
-        }
-      }
-    }
-    img{
-      object-fit: cover;
-      width: 100%;
-      height: 100%;
-    }
+    
 
   }
   
+}
+
+gellery{
+  .poster{
+    width: 665px;
+    height: 468px;
+    max-width: calc( 100vw - 80px);
+    max-height: calc( (100vw - 80px ) * 0.7 );
+    margin-bottom: 8px;
+    border: 1px solid var(--second-dis);
+    background-color: var(--second-dis);
+  }
+  .posters{
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    gap: 8px;
+
+    .item{
+      width: 72px;
+      height: 52px;
+      border: 1px solid var(--prime);
+      cursor: pointer;
+      :hover{
+        border-color:  var(--prime-act);
+      }
+    }
+  }
+  img{
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+  }
 }