FEATURE Alternates articles pictures

resources/css/pages/single-articles.css

@@ -21,4 +21,14 @@
     @apply text-base;
     line-height: 1.2;
   }
+  .wp-block-image {
+    @apply p-3 border border-primary border-solid;
+
+    &.rotate-left {
+      rotate: -0.6deg;
+    }
+    &.rotate-right {
+      rotate: 0.6deg;
+    }
+  }
 }

resources/js/singles/alternate-pictures.ts

@@ -0,0 +1,11 @@
+export default function alternatePictures() {
+  const images = document.querySelectorAll('.page--single-articles .wp-block-image');
+
+  images.forEach((img, index) => {
+    if (index % 2 === 0) {
+      img.classList.add('rotate-right');
+    } else {
+      img.classList.add('rotate-left');
+    }
+  });
+}

resources/js/singles/singles.ts

@@ -8,6 +8,7 @@ import handleArticleReader from './reader.ts';
 import { handleArticleToolbar } from './article-toolbar.ts';
 import { handleRevueToolbar } from './revue-toolbar.ts';
 import handleSearchRevue from './search-revue.ts';
+import alternatePictures from './alternate-pictures.ts';
 export default function singles(): void {
   const isSingleRevue: HTMLElement | null = document.querySelector('.page--single-revue');
   const isSingleArticle: HTMLElement | null = document.querySelector('.page--single-articles');
@@ -22,4 +23,8 @@ export default function singles(): void {
   handleShareButton();
   handleArticleReader();
   handleSearchRevue();
+
+  if (isSingleArticle) {
+    alternatePictures();
+  }
 }