...

Pushword · Feb 6, 2022 · 6dc5f55 · 6dc5f55
1 parent ff74529
commit 6dc5f55
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 20 deletions.
diff --git a/packages/core/src/Entity/MediaTrait/MediaLoaderTrait.php b/packages/core/src/Entity/MediaTrait/MediaLoaderTrait.php
@@ -12,6 +12,8 @@ trait MediaLoaderTrait
      */
     public static function loadFromSrc(string $src): MediaInterface
     {
+        // TODO : move it to a separate service to get it from an SQL and get all properties
+
         $src = str_contains($src, '/') ? \Safe\substr($src, \strlen('/media/default/')) : $src;
 
         /** @var MediaInterface $self */

diff --git a/packages/core/src/Service/ImageManager.php b/packages/core/src/Service/ImageManager.php
@@ -2,6 +2,7 @@
 
 namespace Pushword\Core\Service;
 
+use Exception;
 use Intervention\Image\Image;
 use Intervention\Image\ImageManager as InteventionImageManager;
 use Pushword\Core\Entity\MediaInterface;
@@ -192,6 +193,23 @@ public function getBrowserPath($media, string $filterName = 'default', ?string $
         return $this->getFilterPath($media, $filterName, $extension, true);
     }
 
+    /**
+     * @param MediaInterface|string $media
+     *
+     * @return int[] index 0 contains width, index 1 height
+     */
+    public function getDimensions($media): array
+    {
+        $path = $this->getFilterPath($media, 'xs');
+
+        $size = getimagesize($path);
+        if (false === $size) {
+            throw new Exception('`'.$path.'` not found');
+        }
+
+        return [$size[0], $size[1]];
+    }
+
     /**
      * @param MediaInterface|string $media string must be the accessible path (absolute) to the image file
      */

diff --git a/packages/core/src/Twig/AppExtension.php b/packages/core/src/Twig/AppExtension.php
@@ -124,6 +124,7 @@ public function getFunctions(): array
             new TwigFunction('pw', [$this->entityFilterManagerPool, 'getProperty'], self::options()),
             new TwigFunction('filesize', [FilesizeFormatter::class, 'formatBytes'], self::options()),
             new TwigFunction('page_position', [$this, 'getPagePosition'], self::options()),
+            new TwigFunction('image_dimensions', [$this->imageManager, 'getDimensions'], self::options()),
         ];
     }
 

diff --git a/packages/core/src/templates/component/image_inline.html.twig b/packages/core/src/templates/component/image_inline.html.twig
@@ -20,7 +20,8 @@
         {% endif %}
 
         {% set image =  media_from_string(image_src, image_alt ?? '') %}
-        {% set image_html =  _self.renderImage(image, image_class ?? null, image_attr ?? null, image_alt ?? null, lazy|default(true)) %}
+        {% set image_html =  _self.renderImage(image, image_class ?? null,
+            image_attr ?? null, image_alt ?? null, lazy ?? true) %}
 
         {% if image_link is not defined or image_link != false %}
 
@@ -37,6 +38,14 @@
 
 
 {% macro renderImage(image, image_class = null, image_attr = null, image_alt = null, lazy = true) %}
+{% if image.width is null %}
+    {% set dimensions = image_dimensions(image) %}
+    {% set width = dimensions[0] %}
+    {% set height = dimensions[1] %}
+{% else %}
+    {% set width = image.width %}
+    {% set height = image.height %}
+{% endif %}
 <picture>
     <source type="image/webp"
         srcset="{{ image|image('xs', 'webp') ~' 576w'
@@ -51,8 +60,8 @@
             ~','~ image|image('xl') ~' 1600w',
         src: image|image('default'),
         class: image_class is defined and image_class ? image_class : 'w-full h-auto',
-        width: 100000,
-        height: 100000,
+        width: width,
+        height: height,
         alt: image_alt|default(image.alt)
     }, image_attr ?? {}, lazy ? {loading: 'lazy'} : {}) }} />
 </picture>

diff --git a/packages/js-helper/src/tailwind.helpers.js b/packages/js-helper/src/tailwind.helpers.js
@@ -3,45 +3,50 @@ module.exports = {
         return {
             DEFAULT: {
                 css: {
-                    ":where(a):not(:where([class~=not-prose] *)), :where(span[data-rot]):not(:where([class~=not-prose] *))":
+                    a: {
+                        textDecoration: 'none',
+                    },
+                    ':where(a):not(:where([class~=not-prose] *)), :where(span[data-rot]):not(:where([class~=not-prose] *))':
                         {
-                            color: "var(--primary)",
-                            "&:hover": {
-                                opacity: ".75",
+                            color: 'var(--primary)',
+                            fontWeight: 500,
+                            borderBottom: '1px solid;',
+                            '&:hover': {
+                                opacity: '.75',
                             },
                         },
                 },
             },
         };
     },
     twFirstLetterPlugin: function ({ addVariant, e }) {
-        addVariant("first-letter", ({ modifySelectors, separator }) => {
+        addVariant('first-letter', ({ modifySelectors, separator }) => {
             modifySelectors(({ className }) => {
                 return `.${e(`first-letter${separator}${className}`)}:first-letter`;
             });
         });
     },
     twFirstChildPlugin: function ({ addVariant, e }) {
-        addVariant("first-child", ({ modifySelectors, separator }) => {
+        addVariant('first-child', ({ modifySelectors, separator }) => {
             modifySelectors(({ className }) => {
                 return `.${e(`first-child${separator}${className}`)}:first-child`;
             });
         });
     },
     twBleedPlugin: function ({ addUtilities }) {
         addUtilities({
-            ".bleed": {
-                width: "100vw",
-                "margin-inline-start": "50%",
-                "margin-inline-end": "unset",
-                transform: "translateX(-50%)",
-                "max-width": "none",
+            '.bleed': {
+                width: '100vw',
+                'margin-inline-start': '50%',
+                'margin-inline-end': 'unset',
+                transform: 'translateX(-50%)',
+                'max-width': 'none',
             },
-            ".bleed-disable": {
-                width: "inherit",
-                "margin-inline-start": "inherit",
-                "margin-inline-end": "inherit",
-                transform: "default",
+            '.bleed-disable': {
+                width: 'inherit',
+                'margin-inline-start': 'inherit',
+                'margin-inline-end': 'inherit',
+                transform: 'default',
             },
         });
     },