API tools faq
paste
Advertisement
lukibeni

photobook layouts

lukibeni
Nov 10th, 2020
969
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 18.15 KB | None | 0 0
raw download clone embed print report
  1. <div class="page">
  2.     <ng-container [ngSwitch]="item?.layout">
  3.       <div *ngSwitchCase="'1_1'" class="layout-holder">
  4.         <div class="preview">
  5.           <div class="layout-item" [style.width]="'100%'" [style.height]="'100%'">
  6.             <ng-container
  7.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  8.           </div>
  9.           <ng-container *ngIf="index != undefined">
  10.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  11.           </ng-container>
  12.         </div>
  13.       </div>
  14.       <div *ngSwitchCase="'2_1'" class="layout-holder">
  15.         <div class="preview">
  16.           <div class="layout-item" [style.width]="'50%'" [style.height]="'100%'">
  17.             <ng-container
  18.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  19.           </div>
  20.           <div class="layout-item" [style.width]="'50%'" [style.height]="'100%'">
  21.             <ng-container
  22.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  23.           </div>
  24.           <ng-container *ngIf="index != undefined">
  25.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  26.           </ng-container>
  27.         </div>
  28.       </div>
  29.       <div *ngSwitchCase="'2_2'" class="layout-holder">
  30.         <div class="preview">
  31.           <div class="layout-item" [style.height]="'50%'" [style.width]="'100%'">
  32.             <ng-container
  33.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  34.           </div>
  35.           <div class="layout-item" [style.height]="'50%'" [style.width]="'100%'">
  36.             <ng-container
  37.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  38.           </div>
  39.           <ng-container *ngIf="index != undefined">
  40.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  41.           </ng-container>
  42.         </div>
  43.       </div>
  44.       <div *ngSwitchCase="'3_1'" class="layout-holder">
  45.         <div class="preview">
  46.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  47.             <ng-container
  48.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  49.           </div>
  50.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  51.             <ng-container
  52.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  53.           </div>
  54.           <div class="layout-item" [style.height]="'50%'" [style.width]="'100%'">
  55.             <ng-container
  56.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  57.           </div>
  58.           <ng-container *ngIf="index != undefined">
  59.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  60.           </ng-container>
  61.         </div>
  62.       </div>
  63.       <div *ngSwitchCase="'3_2'" class="layout-holder">
  64.         <div class="preview">
  65.           <div class="layout-item" [style.height]="'60%'" [style.width]="'50%'">
  66.             <ng-container
  67.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  68.           </div>
  69.           <div class="layout-item" [style.height]="'60%'" [style.width]="'50%'">
  70.             <ng-container
  71.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  72.           </div>
  73.           <div class="layout-item" [style.height]="'40%'" [style.width]="'100%'">
  74.             <ng-container
  75.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  76.           </div>
  77.           <ng-container *ngIf="index != undefined">
  78.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  79.           </ng-container>
  80.         </div>
  81.       </div>
  82.       <div *ngSwitchCase="'3_3'" class="layout-holder">
  83.         <div class="preview">
  84.           <div class="layout-item" [style.height]="'50%'" [style.width]="'40%'">
  85.             <ng-container
  86.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  87.           </div>
  88.           <div class="layout-item" [style.height]="'50%'" [style.width]="'60%'">
  89.             <ng-container
  90.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  91.           </div>
  92.           <div class="layout-item" [style.height]="'50%'" [style.width]="'100%'">
  93.             <ng-container
  94.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  95.           </div>
  96.           <ng-container *ngIf="index != undefined">
  97.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  98.           </ng-container>
  99.         </div>
  100.       </div>
  101.       <div *ngSwitchCase="'4_1'" class="layout-holder">
  102.         <div class="preview">
  103.           <div class="layout-item" [style.height]="'50%'" [style.width]="'40%'">
  104.             <ng-container
  105.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  106.           </div>
  107.           <div class="layout-item" [style.height]="'50%'" [style.width]="'60%'">
  108.             <ng-container
  109.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  110.           </div>
  111.           <div class="layout-item" [style.height]="'50%'" [style.width]="'60%'">
  112.             <ng-container
  113.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  114.           </div>
  115.           <div class="layout-item" [style.height]="'50%'" [style.width]="'40%'">
  116.             <ng-container
  117.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  118.           </div>
  119.           <ng-container *ngIf="index != undefined">
  120.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  121.           </ng-container>
  122.         </div>
  123.       </div>
  124.       <div *ngSwitchCase="'4_2'" class="layout-holder">
  125.         <div class="preview">
  126.           <div class="layout-item" [style.height]="'55%'" [style.width]="'60%'">
  127.             <ng-container
  128.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  129.           </div>
  130.           <div class="layout-item" [style.height]="'55%'" [style.width]="'40%'">
  131.             <ng-container
  132.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  133.           </div>
  134.           <div class="layout-item" [style.height]="'45%'" [style.width]="'45%'">
  135.             <ng-container
  136.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  137.           </div>
  138.           <div class="layout-item" [style.height]="'45%'" [style.width]="'55%'">
  139.             <ng-container
  140.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  141.           </div>
  142.           <ng-container *ngIf="index != undefined">
  143.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  144.           </ng-container>
  145.         </div>
  146.       </div>
  147.       <div *ngSwitchCase="'4_3'" class="layout-holder">
  148.         <div class="preview">
  149.           <div class="layout-item" [style.height]="'50%'" [style.width]="'60%'">
  150.             <ng-container
  151.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  152.           </div>
  153.           <div class="layout-item" [style.height]="'50%'" [style.width]="'40%'">
  154.             <ng-container
  155.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  156.           </div>
  157.           <div class="layout-item" [style.height]="'50%'" [style.width]="'40%'">
  158.             <ng-container
  159.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  160.           </div>
  161.           <div class="layout-item" [style.height]="'50%'" [style.width]="'60%'">
  162.             <ng-container
  163.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  164.           </div>
  165.           <ng-container *ngIf="index != undefined">
  166.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  167.           </ng-container>
  168.         </div>
  169.       </div>
  170.       <div *ngSwitchCase="'4_4'" class="layout-holder">
  171.         <div class="preview">
  172.           <div class="layout-item" [style.height]="'50%'" [style.width]="'100%'">
  173.             <ng-container
  174.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  175.           </div>
  176.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  177.             <ng-container
  178.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  179.           </div>
  180.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  181.             <ng-container
  182.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  183.           </div>
  184.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  185.             <ng-container
  186.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  187.           </div>
  188.           <ng-container *ngIf="index != undefined">
  189.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  190.           </ng-container>
  191.         </div>
  192.       </div>
  193.       <div *ngSwitchCase="'5_1'" class="layout-holder">
  194.         <div class="preview">
  195.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  196.             <ng-container
  197.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  198.           </div>
  199.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  200.             <ng-container
  201.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  202.           </div>
  203.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  204.             <ng-container
  205.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  206.           </div>
  207.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  208.             <ng-container
  209.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  210.           </div>
  211.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  212.             <ng-container
  213.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[4], index: index}"></ng-container>
  214.           </div>
  215.           <ng-container *ngIf="index != undefined">
  216.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  217.           </ng-container>
  218.         </div>
  219.       </div>
  220.       <div *ngSwitchCase="'5_2'" class="layout-holder">
  221.         <div class="preview flex-column">
  222.           <div class="layout-item" [style.height]="'60%'" [style.width]="'50%'">
  223.             <ng-container
  224.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  225.           </div>
  226.           <div class="layout-item" [style.height]="'40%'" [style.width]="'50%'">
  227.             <ng-container
  228.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  229.           </div>
  230.           <div class="layout-item" [style.height]="'33.333%'" [style.width]="'50%'">
  231.             <ng-container
  232.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  233.           </div>
  234.           <div class="layout-item" [style.height]="'33.333%'" [style.width]="'50%'">
  235.             <ng-container
  236.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  237.           </div>
  238.           <div class="layout-item" [style.height]="'33.333%'" [style.width]="'50%'">
  239.             <ng-container
  240.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[4], index: index}"></ng-container>
  241.           </div>
  242.           <ng-container *ngIf="index != undefined">
  243.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  244.           </ng-container>
  245.         </div>
  246.       </div>
  247.       <div *ngSwitchCase="'5_3'" class="layout-holder">
  248.         <div class="preview">
  249.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  250.             <ng-container
  251.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  252.           </div>
  253.           <div class="layout-item" [style.height]="'50%'" [style.width]="'50%'">
  254.             <ng-container
  255.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  256.           </div>
  257.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  258.             <ng-container
  259.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  260.           </div>
  261.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  262.             <ng-container
  263.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  264.           </div>
  265.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  266.             <ng-container
  267.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[4], index: index}"></ng-container>
  268.           </div>
  269.           <ng-container *ngIf="index != undefined">
  270.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  271.           </ng-container>
  272.         </div>
  273.       </div>
  274.       <div *ngSwitchCase="'6_1'" class="layout-holder">
  275.         <div class="preview">
  276.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  277.             <ng-container
  278.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  279.           </div>
  280.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  281.             <ng-container
  282.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  283.           </div>
  284.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  285.             <ng-container
  286.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  287.           </div>
  288.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  289.             <ng-container
  290.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  291.           </div>
  292.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  293.             <ng-container
  294.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[4], index: index}"></ng-container>
  295.           </div>
  296.           <div class="layout-item" [style.height]="'50%'" [style.width]="'33.333%'">
  297.             <ng-container
  298.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[5], index: index}"></ng-container>
  299.           </div>
  300.           <ng-container *ngIf="index != undefined">
  301.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  302.           </ng-container>
  303.         </div>
  304.       </div>
  305.       <div *ngSwitchCase="'6_2'" class="layout-holder">
  306.         <div class="preview flex-column">
  307.           <div class="layout-item" [style.height]="'100%'" [style.width]="'25%'">
  308.             <ng-container
  309.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[0], index: index}"></ng-container>
  310.           </div>
  311.           <div class="layout-item" [style.height]="'100%'" [style.width]="'25%'">
  312.             <ng-container
  313.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[1], index: index}"></ng-container>
  314.           </div>
  315.           <div class="layout-item" [style.height]="'25%'" [style.width]="'50%'">
  316.             <ng-container
  317.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[2], index: index}"></ng-container>
  318.           </div>
  319.           <div class="layout-item" [style.height]="'25%'" [style.width]="'50%'">
  320.             <ng-container
  321.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[3], index: index}"></ng-container>
  322.           </div>
  323.           <div class="layout-item" [style.height]="'25%'" [style.width]="'50%'">
  324.             <ng-container
  325.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[4], index: index}"></ng-container>
  326.           </div>
  327.           <div class="layout-item" [style.height]="'25%'" [style.width]="'50%'">
  328.             <ng-container
  329.              *ngTemplateOutlet="imageTemplate; context: {image: item.photoList[5], index: index}"></ng-container>
  330.           </div>
  331.           <ng-container *ngIf="index != undefined">
  332.             <ng-container *ngTemplateOutlet="imageControl; context: {index: index}"></ng-container>
  333.           </ng-container>
  334.         </div>
  335.       </div>
  336.     </ng-container>
  337.     {{ index == 0 ? 'Fly leaf' : index }}
  338.   </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!