it-swarm.com.de

So zeichnen Sie Mediendetails für die Isotope-Galerie mit Photoswipe

Ich bin gerade dabei, eine Wordpress-Galerie zu erstellen, die direkt aus der Medienbibliothek stammt und Isotope und Photoswipe enthält. Mit einer geänderten Version von this habe ich die Anhänge erfolgreich zu einer Seitenvorlage hinzugefügt und dann die Anzeige auf Kategorien beschränkt (mit Kategorien für Medienanhänge).

Meine Ausgabe verfeinert jetzt die Anzeige weiter ...

Da ich in meiner Funktion wp_get_attachment_image verwende (damit ich die Bildgröße definieren kann), kann ich wp_get_attachment_url nicht verwenden, damit href funktioniert. Darüber hinaus muss die vollständige Bildgröße im data-size des href definiert werden.

Ich versuche auch, den Bildtitel und die Bildunterschrift zu zeichnen und die Kategorien jedes Bildes als Klassen auf das enthaltende div anzuwenden.

Hier ist der Code, den ich benutze:

function get_images_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $images = array();
    foreach ( $query_images->posts as $image) {
        $images[]= wp_get_attachment_image( $image->ID, 'full' );
    }
    return $images;
}

function display_images_from_media_library() {

    $imgs = get_images_from_media_library();
    $url = wp_get_attachment_url( $image->ID );
    $image_title = $attachment->post_title;
    $caption = $attachment->post_excerpt;
    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach($imgs as $img) {
        $html .= '<div class="isotope-item"><figure>
                  <a href="' . $url . '" data-size="">' . $img . '</a>
                  <figcaption class="wp-caption-text"><h2>' . $image_title . '</h2>
                  <p>' . $caption . '</p></figcaption></figure></div>';
    }

    $html .= '</div>';

    return $html;

}

Schließlich versuche ich auch, eine Filtergruppe für die Isotope-Galerie zu erstellen, wobei ich die Bildkategorien als Beschriftungen verwende. Hier ist der Code, den ich bisher habe, der nicht funktioniert, da meine Kategorien die Bilder nicht zählen (alle Kategorien zeigen eine Anzahl von 0):

$terms = get_terms('category', array('parent' => 'artwork'));
                      $count = count($terms);
                        if ( $count > 0 ){
                          foreach ( $terms as $term ) {
                            echo "<button type='button' class='btn btn-dark'  data-hover='" . $term->name . "' data-filter='." . $term->slug . "'>" . $term->name . "</button>\n";
                          }
                        }

Jede Hilfe dabei wäre sehr dankbar, danke.

EDITIch habe folgenden Code hinzugefügt:

function get_image_urls_from_media_library() {
    $args = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image',
        'post_status' => 'inherit',
        'category_name' => 'artwork',
    );
    $query_images = new WP_Query( $args );
    $urls = array();
    foreach ( $query_images->posts as $image) {
        $urls[]= wp_get_attachment_url( $image->ID );
    }
    return $urls;
}

und fügte ein verschachteltes foreach hinzu, das ein gültiges href zeichnet. Leider wird nur der erste Anhang gezeichnet, und alle Bilder in der Galerie sind mit demselben ersten Bild verknüpft. Die Bilder werden außerdem fünfmal auf der Seite dupliziert.

5
Ash

Ich hatte ein sehr ähnliches Szenario. Ich vertraue darauf, dass diese Notizen helfen können.

1 - Bei der Abfrage einer benutzerdefinierten Taxonomie benötigt wp_query weitere Informationen. Der Codex Verweis ist hier. Die Informationen liegen in dieser Form vor.

'tax_query' => array(
        array(
            'taxonomy' => 'people',
            'field'    => 'slug',
            'terms'    => 'bob',
        ),
    ),

In Ihrem Fall glaube ich, dass die Taxonomie "Kunstwerk" ist. Ich fand, dass es gut ist, den Feldwert 'slug' zu verwenden. Ich überlasse es Ihnen zu wissen, was Ihre Amtszeit ist.

2 - In Ihrer überarbeiteten Funktion haben Sie den Parameter "posts_per_page" gelöscht. Sie haben die Wahl, aber beachten Sie, dass WP-Query maximal 10 Datensätze zurückgibt, wenn Sie es nicht deklarieren. Wenn Sie mehr Bilder erwarten, könnte dies die Antwort sein.

3 - In Ihrer Funktion " display_images_from_media_library " lautet die zweite Zeile:

"$ url = wp_get_attachment_url ($ image-> ID);".

In diesem Fall ist $ image eine undefinierte Variable. Da $ image eine Variable aus Ihrer Funktion " get_images_from_media_library " ist, gehe ich davon aus, dass Sie irgendwann eine einzige Funktion hatten, um die Bildinformationen abzurufen und sie dann anzuzeigen. Aber als Sie die einzelne Funktion in zwei Teile geteilt haben, haben Sie diese Zeile wahrscheinlich nicht bemerkt.

4 - Ihr Code zum Erstellen der Filter beginnt mit der obersten Ebene (der übergeordneten Ebene) - das ist in Ordnung, aber ich glaube, dass die Filter eigentlich die Kinder und nicht die Eltern sind. Im Wesentlichen ist ein weiteres Foreach erforderlich (Details siehe unten).

5 - Darüber hinaus haben Sie Ihren anfänglichen Fokus auf die "Anhang-URL" gelegt. Ich schlage jedoch vor, dass es produktiver sein kann, sich auf das Abrufen der Beitrags-/Anhangs-ID aus der WP_Query zu konzentrieren und dies als Mittel zum Abrufen aller anderen Felder zu verwenden, die Sie anzeigen müssen. Wenn Sie ein Array basierend auf $ posts erstellen, erhalten Sie automatisch die Beschriftung und den Titel als Nebenprodukt.

Ich fand das Folgende zu arbeiten. Offensichtlich müssen Sie die relevante Taxonomie und den entsprechenden Begriff in jeder der Funktionen ersetzen.

function gallery_get_images_from_media_library(){
    $g_myargs = array(
        'post_type' => 'attachment',
        'post_mime_type' =>'image/jpeg',
        'post_status' => 'inherit',
        'posts_per_page' => 25,
        'tax_query' => array(
            array(
                'taxonomy' => 'media_category',
                'field'    => 'slug',
                'terms'    => 'edition-covers',
            ),
        ),
    );
    $g_myquery_images = new WP_Query( $g_myargs );

    $g_posts = $g_myquery_images->posts;

    $html = '<section class="isotope-wrap">
              <div class="isotope gallery" data-pswp-uid="1">
                <div class="isotope-sizer"></div>';

    foreach ($g_posts as $g_img) {

        $url = wp_get_attachment_url($g_img->ID);

        $src = wp_get_attachment_image_src($g_img->ID,'full');

        $image_title = $g_img->post_title;

        $caption = $g_img->post_excerpt;

        $html .= '<div class="isotope-item"><figure>
                        <a href="'.$url.'">
                        <img src="'.$src[0] .'"></a>
                        <figcaption class="wp-caption-text">
                        <h2>' . $image_title . '</h2>
                        <p>' . $caption . '</p>
                        </figcaption></figure></div>';
    }

    $html .= '</div>';

return $html;
}

Um die Bilder anzuzeigen, habe ich meiner Vorlagenseite den folgenden Code hinzugefügt.

$imgs = gallery_get_images_from_media_library();
echo $imgs;

function gallery_make_filters(){

    // starting row of the filter = show all
    $gallery_filter_content = '<button class="button is-checked" data-filter="*">show all</button>'. PHP_EOL ;

    // get the cover terms for parent terms with a count>0
    $gallery_parentterms = get_terms( array(
    'taxonomy' => 'reviewcovers',
        'parent' => 0,
    'hide_empty' => false,
    ));

    // if there are parent covers with children
    if (is_array($gallery_parentterms)) {

        // break down for each parent
        foreach($gallery_parentterms as $gallery_obj) {

            // get the children covers 
            $gallery_childterms = get_terms( array(
                'taxonomy' => 'reviewcovers',
                'child_of' => $gallery_obj->term_id,
                'hide_empty' => true,
            ));

            // test for content of childterms
            if (is_array($gallery_childterms)) {

            // create a filter for each child.
            foreach($gallery_childterms as $gallery_object) {   

                    // build the filters for each non-zero child term
                    // filter is progressively incremented.
                    $gallery_filter_content .= '<button class="button" data-filter="'.".".$gallery_object->slug.'">'.$gallery_object->description.'</button>'. PHP_EOL;

                } // end of foreach-children array

            } // end of if children array

        } //end of foreach parent array

    }// end of if - parent array
    else 
    {
    echo 'no results';
    }

return $gallery_filter_content;

}

Fügen Sie den folgenden Code in die Seitenvorlage ein, um die Filter anzuzeigen.

$filters = gallery_make_filters();
echo $filters;

Und zu guter Letzt stelle ich fest, dass eine oder mehrere Zeilen meines Codes nicht wie erwartet funktionieren (wahrscheinlich, weil ich kein so guter Programmierer bin), und ich möchte nicht beschuldigt werden, Ihnen das Lehren von Eiern zu erteilen. In jedem Fall finde ich es in diesem Fall nützlich, den Inhalt eines Arrays oder einer Variablen anzuzeigen, damit ich herausfinden kann, wo der Code rückgängig gemacht wird.

Diese paar Zeilen sind meine Hauptstützen. Ich ändere nur die Markierung der Zeilen, aktualisiere den Array-/Variablennamen, speichere und aktualisiere die Site.
1 - für ein Array

//echo "<pre>";print_r($gallery_childterms);echo "</pre>"; //DEBUG - a readable form of vardump
//echo "<p>end of print_r gallery_childterms</p>"; //DEBUG-this is so I know whether and what has printed.

2 - für eine Variable

//echo "the src is ".$src."</br>"; // DEBUG - the line break is so that consecutive lines will make sense.
2
Tedinoz