it-swarm.com.de

Abrufen einer bestimmten Bildgröße für eine geringe Breite des Ansichtsfensters

Ich versuche dieses Bild nur zu bekommen, wenn wiewport <768 ist:

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

Ich habe nicht viel Programmierkenntnisse. Ich habe gelesen, wie man eine Variable mit jQuery $.ajax() von JS an PHP übergibt, aber ich verstehe das nicht ganz. Das habe ich gemacht:

Erster Schritt. Ich versuche, die JS-Variable zu setzen und sie an den Server zu senden:

    $(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!");
               }
            });
    }

Es funktioniert nicht (Erfolg wird nicht ausgelöst). Ich würde mich über jede Hilfe freuen.

Im zweiten Schritt (wenn der erste Schritt funktioniert) prüfen Sie, ob die Variable PHP vorhanden ist (dieser Code befindet sich im Hauptteil von front-page.php):

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

Ist es richtig? Danke im Voraus.

2
aitor

Nach ein paar Tagen Lesen über srcset attribute (Danke Benoti für diesen Hinweis!) Kann ich definitiv erkennen, dass dies der richtige Weg ist. Diese Lösung ist einfach genug, um diese Frage zu lösen, obwohl das Attribut srcset mit dem Tag <picture> viel leistungsfähiger ist. Meine Lösung:

Größen in functions.php angeben

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

Überprüfen Sie ein benutzerdefiniertes Feld mit der gespeicherten Größe

Ich habe zwei Arten von Posts, große und kleine, mit einer Bildgröße von 200x200 und 400x400 px.

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

Erstellen Sie das img-Tag

<?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 ); ?>"
      >

Hintergrund:

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

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

0
aitor