web-dev-qa-db-fra.com

Générer des vignettes uniquement pour les images en vedette

J'aimerais savoir s'il existe un moyen simple (code personnalisé ou plug-in) de créer des tailles de vignettes uniquement pour images que je compte utiliser comme images en vedette (index.php, archive .php, etc.), mais pas pour les images utilisées dans les publications (single.php). Mon objectif principal est de réduire l'utilisation de l'espace serveur en ne créant pas de vignettes que mon thème n'utilisera jamais.

Mes vignettes n'auraient en réalité que deux tailles, 720px de large et 328px de large, et les images 720px de large (page d'accueil uniquement) auraient également une largeur de 328px (pour archive.php et sidebar.php)

Actuellement, la seule méthode programmatique que je connaisse consiste à générer des vignettes pour chaque téléchargement d’image , ce qui n’est pas souhaitable, car la plupart de mes téléchargements seront des images post et que je devrai supprimer beaucoup d’images manuellement du serveur.

Je préférerais le code personnalisé aux plugins, mais un plugin serait acceptable. Je sais qu'il existe des plugins de redimensionnement d'image, mais ils n'ont pas été mis à jour depuis longtemps (TimThumb, Dynamic Image Resizer ).

J'ai également trouvé une question similaire ici sur Wordpress SE, mais la réponse acceptée ne résout pas vraiment mon problème.

EDIT: Je dois supprimer ou empêcher les vignettes pour les images dans le message, pas pour les images en vedette, c.-à-d.:

(1) Image sélectionnée : des vignettes supplémentaires générées automatiquement par WP sont correctes.

(2) Images utilisées à l'intérieur des publications : Téléchargez l'image d'origine sans générer de taille supplémentaire. Je vais recadrer, redimensionner et optimiser l'image avant de la télécharger et une taille conviendra à mes besoins.

imagespost-thumbnailsimage-resize
8
Drunken Master

Cette fonction générera une image en enregistrant temporairement une taille d'image, en générant l'image (si nécessaire) et en supprimant la taille afin que les nouvelles images ne soient pas créées dans cette taille.

function lazy_image_size($image_id, $width, $height, $crop) {
    // Temporarily create an image size
    $size_id = 'lazy_' . $width . 'x' .$height . '_' . ((string) $crop);
    add_image_size($size_id, $width, $height, $crop);

    // Get the attachment data
    $meta = wp_get_attachment_metadata($image_id);

    // If the size does not exist
    if(!isset($meta['sizes'][$size_id])) {
        require_once(ABSPATH . 'wp-admin/includes/image.php');

        $file = get_attached_file($image_id);
        $new_meta = wp_generate_attachment_metadata($image_id, $file);

        // Merge the sizes so we don't lose already generated sizes
        $new_meta['sizes'] = array_merge($meta['sizes'], $new_meta['sizes']);

        // Update the meta data
        wp_update_attachment_metadata($image_id, $new_meta);
    }

    // Fetch the sized image
    $sized = wp_get_attachment_image_src($image_id, $size_id);

    // Remove the image size so new images won't be created in this size automatically
    remove_image_size($size_id);
    return $sized;
}

C'est "paresseux" car les images ne sont pas générées tant qu'elles ne sont pas utiles.

Dans votre cas d'utilisation, appelez lazy_image_size avec l'ID de vignette de publication pour obtenir une image de la taille souhaitée. Une image serait générée lors du premier appel. Les appels suivants iraient chercher l'image existante.

Gist: https://Gist.github.com/mtinsley/be503d90724be73cdda4

2
Mathew Tinsley

pour empêcher WordPress de créer des formats supplémentaires pour certaines images uniquement, vous devez disposer d'un moyen d'indiquer qu'une image que vous êtes sur le point de télécharger sera utilisée uniquement à une fin particulière. cela doit se produire AVANT de l'avoir téléchargée.

étant donné qu'il n'existe pas d'interface (prête à l'emploi) pour indiquer de telles options lors d'une action de téléchargement, vous ne pouvez pas empêcher la génération d'images supplémentaire - à moins qu'un plugin ait ajouté cette fonctionnalité.

mais pourquoi dans le monde ne voudriez-vous pas des tailles d'image supplémentaires? vous ne savez jamais quand vous pouvez rencontrer une situation dans laquelle vous souhaitez utiliser une taille différente d'une image. Êtes-vous préoccupé par l'espace de stockage?

ne pouvez-vous pas utiliser vos propres spécifications de taille comme celle-ci? the_post_thumbnail( array(100, 100) );

la plupart des réponses et commentaires que j'ai lus ici expliquent comment personnaliser l'environnement WordPress en fonction de la taille des images, mais aucune mention n'est faite de le faire conditionnellement. de plus, aucun d'entre eux ne dit qu'il faut pouvoir indiquer l'utilisation d'une image avant de la télécharger.

si vous essayez de compenser une image trop petite ou trop grande dans un message, vous pouvez utiliser quelques éléments.

  1. CSS: vous pouvez ajouter des entrées à votre feuille de style telles que .post-entry img { max-width:200px; max-height:300px; }, ce qui est plus universel et efficace que de s’appuyer sur la taille de l’image elle-même - C’EST BEAUCOUP de temps.

  2. Modèle: vous pouvez modifier le fichier de modèle dans lequel les publications HTML sont générées et spécifier une taille d'image comme celle-ci:

voir cette documentation sur WordPress: https://codex.wordpress.org/Function_Reference/the_post_thumbnail

0
aequalsb

Vous pouvez voir ce link . il y a des exemples comme

add_action( 'after_setup_theme', 'baw_theme_setup' );
function baw_theme_setup() {
  add_image_size( 'category-thumb', 300 ); // 300 pixels wide (and unlimited height)
  add_image_size( 'homepage-thumb', 220, 180, true ); // (cropped)
}
0
Jakir Hossain

Salut - J'ai eu un problème similaire. Woocommerce utilise des images de catalogue pour les images de catalogue et les produits associés. Ce n'est pas idéal, car vous perdez soit la qualité d'image, soit la vitesse. J'ai donc essayé d'ajouter une quatrième catégorie d'images pour mes produits associés. Howdy McGee a résolu le problème. S'il vous plaît jeter un oeil à Howdy McGees réponse:

Modify Related Product Tailles: lisez son code !

Cela a magnifiquement fonctionné pour mes besoins. Pour votre problème, la même logique pourrait être appliquée. J'espère que cela t'aides. salutations - theo

J'ai trouvé une solution qui fonctionne. 1. étape: assignez une nouvelle taille de vignette dans votre functions.php. Vérifiez la référence: wp codex !

/*add your custom size*/
add_action( 'after_setup_theme', 'your_theme_setup' );
function your_theme_setup() {
add_image_size( 'your-thumb', 123, 123, true );//insert your values
}

Note: 'your-thumb', vous utiliserez ce nom de variable plus tard

  1. étape: Ajoutez ensuite le code suivant à l'endroit où vous souhaitez afficher vos produits en vedette:

    <h1>featured products</h1> 
<div class="woocommerce">
<ul class= "products">

<?php
$args = array( 'post_type' => 'product', 'meta_key' => '_featured','posts_per_page' => 4,'columns' => '4', 'meta_value' => 'yes' );
 $loop = new WP_Query( $args );

 while ( $loop->have_posts() ) : $loop->the_post(); global $product; ?>

                <li class="product post-<?php echo get_the_ID(); ?>">    
                    <a href="<?php echo get_permalink( $loop->post->ID ) ?>" title="<?php echo esc_attr($loop->post->post_title ? $loop->post->post_title : $loop->post->ID); ?>">

                        <?php woocommerce_show_product_sale_flash( $post, $product ); ?>
                        <?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>
                        <h3><?php the_title(); ?></h3><span class="price"><?php echo $product->get_price_html(); ?></span>

                </li>

<?php endwhile; ?>
<?php wp_reset_query(); ?> 
</ul>
</div>

Référence et infos: pas assez de réputation pour un troisième lien, désolé (www.haloseeker.com/display-woocommerce-featured-products-without-a-shortcode/) je l'ai placé dans l'index.php (ma page d'accueil) de wootheme mystile . N'oubliez pas d'utiliser 'votre pouce' en ligne:

<?php if (has_post_thumbnail( $loop->post->ID )) echo get_the_post_thumbnail($loop->post->ID, 'your-thumb'); else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="123px" height="123px" />'; ?></a>

  1. étape: régénérer les vignettes, utilisez le plugin https://wordpress.org/plugins/regenerate-thumbnails/

  2. rafraîchir le navigateur et inspecter le dom et comparer les valeurs

En fonction de votre thème, vous pouvez modifier le balisage et les noms de classe. Je teste la méthode ci-dessus et cela fonctionne bien. La seule chose que je ne pouvais pas faire jusqu’à présent, c’est d’ajouter le bouton "Ajouter au panier", car je ne sais pas comment écrire une variable dans le shortcode du bouton "Ajouter au panier". C'est le code:

<?php echo do_shortcode('[add_to_cart id="variable number?"]'); ?>

J'espère que ça aide. Il y a certainement une manière plus élégante de faire ceci. Par exemple avec une fonction dans le functions.php

cordialement theo

0
timholz

1. Allez dans Tableau de bord> Paramètres> Média
2. Décocher Rogner la vignette aux dimensions exactes (les vignettes sont normalement proportionnelles)
3. Entrez 0 pour toutes les entrées (0 pour toutes les tailles)
4.Ajoutez-les à votre functions.php

// Enable support for Post Thumbnails, and declare sizes.
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 400, array("center","center") );
function fw_add_image_insert_override($sizes){
    // unset( $sizes['thumbnail']);
    unset( $sizes['small']);
    unset( $sizes['medium']);
    unset( $sizes['large']);
    return $sizes;
}
add_filter('intermediate_image_sizes_advanced', 'fw_add_image_insert_override' );

5. Assurez-vous qu’il n’ya pas de ligne de code dans votre functions.php. Commencez par add_imge_size Remarque: : Je suppose que vous utilisez une taille de 400x400 pour votre vignette. Maintenant, lorsque vous téléchargez une photo, il ne créera que 2 versions au lieu de au moins 4 versions photo comme précédent.

0
Trang