web-dev-qa-db-fra.com

Obtenir une taille d'image spécifique pour une petite largeur de fenêtre

J'essaie d'obtenir cette image sélectionnée uniquement lorsque wiewport est <768:

add_image_size( 'img-movil', 660, false );

Je n'ai pas beaucoup de compétences de codage. Je lisais comment passer d'une variable de JS à PHP avec jQuery $.ajax() mais je ne la comprends pas complètement. C'est ce que j'ai fait:

Premier pas. J'essaie de définir la variable JS et de l'envoyer au serveur:

    $(document).ready(function(){
          var viewportWidth = $(window).width();
          if (viewportWidth < 768) {
            var modoView = 'movil';
            $.ajax({
               type: "POST",
               url: 'front-page.php',
               data: {
                   modoView : modoView
               },
               success: function(data) {
                   alert("success!");
               }
            });
    }

Cela ne fonctionne pas (le succès allert ne tire pas). Je vais apprécier toute aide avec cela.

Deuxième étape (lorsque la première étape fonctionne), vérifiez si la variable PHP est présente (ce code est dans le corps du fichier front-page.php):

<?php
if (isset($_POST['modoView'])) {
  $my_image_size = 'img-movil';
}
?>

Est ce bien? Merci d'avance.

jquerypost-thumbnailsimage-sizeresponsive
2
aitor

Après quelques jours de lecture sur l'attribut srcset (Merci Benoti pour cette remarque!), Je constate que c'est la bonne façon. Cette solution est simple, suffit à résoudre cette question, bien que l'attribut srcset avec la balise <picture> soit beaucoup plus puissant. Ma solution:

Déclarez les tailles dans functions.php

add_image_size( 'c200x200', 200, 200, true );
add_image_size( 'c400x400', 400, 400, true );

Vérifier un champ personnalisé avec la taille stockée

J'ai deux types de messages, petits et grands, avec une taille de 200x200 et 400x400 px.

$tamano = get_field('tamano');
if ($tamano == '200x200') {
  $clase = 'c200x200';
} elseif ($tamano == '400x400') {
  $clase = 'c400x400';
} else {
  $clase = 'sin-clase';
}

Construire le tag img

<?php
      $img_id = get_post_thumbnail_id();
      $img_src = wp_get_attachment_image_url( $img_id, 'c200x200' );
      $img_srcset = wp_get_attachment_image_srcset( $img_id, $clase );
      $alt_text = get_post_meta($img_id , '_wp_attachment_image_alt', true);
      ?>

      <img
          srcset="<?php echo esc_attr( $img_srcset ); ?>"
          alt="<?php echo $alt_text; ?>"
          sizes="(min-width: 768px) 400px, 200px"
          src="<?php echo esc_url( $img_src ); ?>"
      >

Contexte:

https://make.wordpress.org/core/2015/11/10/responsive-images-in-wordpress-4-4/

http://alistapart.com/article/responsive-images-in-practice

0
aitor