Dimensions image Ajax champ personnalisé dans vendor

  • Posts: 404
  • Thank you received: 27
  • Hikamarket Multivendor Hikashop Business
2 years 3 weeks ago #340515

-- HikaShop version -- : 4.5.0

Bonjour,

J'ai ajouté un champ personnalisé Image(AJAX) sur la table vendor et souhaiterai pouvoir modifier les dimensions de cette image sur la page détails du vendeur, actuellement c'est un thumbnail de 100x100.

Ce code fonctionne mais le temps de chargement est très long (testé avec plusieurs images) avez-vous une solution pour améliorer le temps de chargement ?

Est-il possible également de forcer une taille d'image en la coupant ?

<?php
    if (!empty($this->vendor->vendor_image_test)) {
      $fieldClass = hikashop_get('class.field');
      $field = $fieldClass->getField('vendor_image_test', 'plg.hikamarket.vendor');

      echo str_replace(array('thumbnail_x=100', 'thumbnail_y=100', 'thumbnail_x-100', 'thumbnail_y-100'), array('thumbnail_x=150', 'thumbnail_y=150', 'thumbnail_x-1800', 'thumbnail_y-800'), $fieldClass->show($field, $this->vendor->vendor_image_test));
    } else {
      echo  '<img src="images/vendor-exemple.jpg" alt="">';
    }

    ?>

En vous remerciant par avance

cordialement

Please Log in or Create an account to join the conversation.

  • Posts: 81511
  • Thank you received: 13066
  • MODERATOR
2 years 3 weeks ago #340519

Bonjour,

Si je comprends bien, vous demandez au système de générer des miniatures de 1800*800 px pour les images uploadées dans le champ.
C'est gros, donc cela ne m'étonne pas que cela puisse être long.
Je recommande plutôt de réduire la taille vers 600*400 par exemple.

Il n'y a pas d'option pour forcer la taille de l'image originale qui s'affichera tout le temps avec la taille d'origine.
Une solution, c'est d'enlever le lien autour de la miniature (qui elle a une taille forcée).

Vous pouvez utiliser ce code:

<?php
    if (!empty($this->vendor->vendor_image_test)) {
      $fieldClass = hikashop_get('class.field');
      $field = $fieldClass->getField('vendor_image_test', 'plg.hikamarket.vendor');
      $thumbnail_x = 600;
      $thumbnail_y = 400;
      $download_link = 'order&task=download&field_table='.$field->field_table.'&field_namekey='.urlencode(base64_encode($field->field_namekey)).'&name='.urlencode(base64_encode($this->vendor->vendor_image_test));
      $thumbnail_link = hikashop_completeLink($download_link.'&thumbnail_x='.$thumbnail_x.'&thumbnail_y='.$thumbnail_y);
      echo '<img class="hikashop_custom_file_link" src="'.$thumbnail_link.'" alt="'.htmlspecialchars($this->vendor->vendor_image_test, ENT_COMPAT, 'UTF-8').'" />';
    } else {
      echo  '<img src="images/vendor-exemple.jpg" alt="">';
    }

    ?>

Please Log in or Create an account to join the conversation.

  • Posts: 404
  • Thank you received: 27
  • Hikamarket Multivendor Hikashop Business
2 years 3 weeks ago #340533

Bonjour Nicolas,

Merci pour votre réponse.

Je viens de tester le code et le résultat est le même,

Ce que je souhaite c'est récupérer l'image(AJAX) d'un champ personnalisé, pas forcement de générer des miniatures, j'ai épluché le forum à la recherche d'une solution d'où le code envoyé.

Oui c'est gros mais les images sont optimisées, même à 80ko le temps de chargement est élevé.

Cette image sera en pleine largeur mais si il y a possibilité de la formater en différent format pour l'intégrer dans une img/srcset ca serait génial ;)

À l'heure actuelle les images affichées font 100x100 hors je souhaite avoir la main sur les dimensions, le 1800px de largeur était juste pour tester on se rapprochera plus des 1500.

En vous remerciant par avance

Cordialement

Please Log in or Create an account to join the conversation.

  • Posts: 81511
  • Thank you received: 13066
  • MODERATOR
2 years 3 weeks ago #340537

Je n'ai pas d'autre idée. C'est la seule façon que je connaisse pour récupérer une image d'un custom field ajax file/image.
Donc je ne vois pas ce que je peux proposer d'autre.

Please Log in or Create an account to join the conversation.

  • Posts: 404
  • Thank you received: 27
  • Hikamarket Multivendor Hikashop Business
2 years 3 weeks ago #340551

Ce n'est pas une critique mais j'ai du mal à comprendre l'utilité d'un champ personnalisé image ou image(AJAX) si on ne peut pas gérer au minimum la taille de l'image ou je n'ai pas bien compris l'utilité ?

Please Log in or Create an account to join the conversation.

  • Posts: 81511
  • Thank you received: 13066
  • MODERATOR
2 years 3 weeks ago #340552

Par exemple, si vous vendez des tshirts ou des mugs personnalisables et vous voulez permettre à l'utilisateur de fournir une image avec le produit. Un champ ajax image permet de faire cela.
Ou si vous voulez avec des groupes d'images différents dans vos produits pour personnaliser la page produits avec plusieurs affichages d'image à différents endroit du layout.

En fait je pense que je n'ai toujours pas compris ce que vous essayez de faire. Vous voulez que le vendeur puisse upload une image qui sera ensuite affichée sur sa page vendeur. Mais je ne vois pas en quoi la solution que j'ai proposé est un problème ou pourquoi le chargement de l'image serait lent, à part si l'utilisateur upload des images vraiment trop grosses. Est-ce le souci ?

Please Log in or Create an account to join the conversation.

  • Posts: 404
  • Thank you received: 27
  • Hikamarket Multivendor Hikashop Business
2 years 3 weeks ago #340559

Bonjour Nicolas,

Merci pour votre réponse, c'est clair.

Le chargement est lent, testé avec une image de 26ko et le résultat est identique. 290ms en moyenne pour la charger alors que pour les autres c'est entre 4 et 30ms.

Un exemple concret en pj (ne pas prendre en compte la disposition)

Le principe serait d'avoir un minimum de contrôle sur les images, au minimum sur la taille.

L'image vendeur par défaut permet d'avoir ce contrôle mais si on intégre plusieurs images(AJAX) en pleine page avec la solution que vous avez proposé le temps de chargement sera trèès long.

N'hésitez pas à revenir vers moi si vous avez besoin de plus d'infos

Attachments:

Please Log in or Create an account to join the conversation.

  • Posts: 81511
  • Thank you received: 13066
  • MODERATOR
2 years 3 weeks ago #340560

Bonjour,

Vu comment le système fonctionne c'est très rapide 250ms.
Avec une image normale, le navigateur envoi la requête HTTP au serveur web et le serveur web retourne l'image directement.
Avec un champ personnalisé, l'image est stockée dans un dossier sécurisé sans accès direct. Du coup, il n'est pas possible d'avoir le navigateur qui récupère directement l'image sur le serveur web. A la place, il passe par Joomla et HikaShop, et HikaShop vérifie que l'utilisateur ait accès à l'image avant de lire le contenu de l'image du disque dur du serveur et de retourner cela au navigateur.

Dans votre cas, tout cela est inutile, mais pour une utilisation normale des champs de type "upload" c'est très important. Par exemple, pour un upload d'image de tshirt, vous ne voulez pas que n'importe qui puisse récupérer les images de vos clients. Ca serait un problème au niveau des données personnelles de l'utilisateur. Et donc HikaShop vérifie que soit l'utilisateur est loggé avec le compte qui a upload l'image / créer la commande, soit qu'il est loggé sur le backend du site.

Mais vous avez de la chance, la prochaine version d'HikaShop fournira des options supplémentaire sur les champs personnalisés qui permettront, entre autre, de spécifier un autre dossier d'upload pour chaque champ. Du coup, il sera possible ensuite avec votre code personnalisé de mettre l'URL directe du fichier dans le src de votre tag img si vous utilisez un autre dossier que celui qui est sécurisé par HikaShop.

Please Log in or Create an account to join the conversation.

  • Posts: 404
  • Thank you received: 27
  • Hikamarket Multivendor Hikashop Business
2 years 3 weeks ago #340570

Merci pour les précisions.

Ah c'est une super nouvelle ! Quand pensez-vous que cette nouvelle version sortira ? :)

Bonne soirée

Cordialement

Please Log in or Create an account to join the conversation.

  • Posts: 81511
  • Thank you received: 13066
  • MODERATOR
2 years 3 weeks ago #340573

En Avril.

Please Log in or Create an account to join the conversation.

Time to create page: 0.073 seconds
Powered by Kunena Forum