Come aggiungere automaticamente gli angoli arrotondati alle miniature?


10

Voglio creare miniature degli angoli arrotondati automaticamente per un particolare progetto a cui sto lavorando, usando qualcosa del genere: http://webdeveloperplus.com/php/create-thumbnail-images-with-rounded-corners/

Ciò che idealmente mi piacerebbe fare è trovare un modo per agganciare qualcosa del genere al processo di creazione delle miniature stesso e memorizzarlo nella cache sul lato server. /wp-includes/media.phpnon sembra avere alcun gancio applicabile, quindi potrei dover rotolare il mio.

Qualche idea su da dove cominciare?

EDIT: non in CSS. Ci sono stati alcuni buoni suggerimenti a riguardo, ma sto usando il raggio del bordo su tutto il sito e le immagini devono essere arrotondate sul lato server. Grazie


Mi dispiace per la taglia +25. Stamattina ero in ritardo al lavoro.
— Dan Gayle,

Risposte:


5

Sembra che puoi agganciarti al wp_create_thumbnailfiltro :

function wp_create_thumbnail( $file, $max_side, $deprecated = '' ) {
if ( !empty( $deprecated ) )
     _deprecated_argument( __FUNCTION__, '1.2' );
     $thumbpath = image_resize( $file, $max_side, $max_side );
     return apply_filters( 'wp_create_thumbnail', $thumbpath );
}

Quindi fai solo la tua manipolazione e restituisci il risultato a wp_create_thumbnail.


Aha! È in una posizione diversa. Dolcezza. Fammi dare un'occhiata, ma sembra che tu abbia trovato quello di cui ho bisogno.
— Dan Gayle,

3
Mi piacerebbe vedere un po 'di codice funzionante con questo filtro, ci ho giocato e non sono arrivato da nessuna parte, ho rinunciato abbastanza rapidamente.
— Milo,

1
@milo la mia risposta ha un po 'di codice che puoi provare
— Paul Sheldrake,

3

Anche se potresti elaborare gli angoli arrotondati con Php e GD immagine (dovrai comunque scegliere un colore di sfondo), è un sacco di lavoro / codice / elaborazione per ciò che può essere facilmente realizzato con JavaScript o CSS3.

Per le immagini arrotondate in CSS3 devi avvolgere l'immagine in un div e rendere l'immagine di sfondo di quel div, non proprio pratica.

Quindi penso che dovresti semplicemente usare jquery, semplicemente accodare lo script quando necessario e aggiungere la classe jquery alla tua miniatura tramite un hook o direttamente.

Il trucco javascript / jquery fondamentalmente applica 4 gif d'angolo all'immagine per farla apparire arrotondata. Ci sono vari jquery che giacciono sugli interwebs come http://maestric.com/doc/css/rounded_corners_images .

Basta non dire a nessuno che non sono davvero rotondi.


3
" Per le immagini arrotondate in CSS3 devi avvolgere l'immagine in un div e rendere l'immagine un'immagine di sfondo di quel div " - assolutamente non vero. border-radiuspuò essere applicato direttamente su un tag IMG, senza alcun problema.
— Chip Bennett,

Quel trucco di jQuery è bello. Preferirei ancora farlo sul lato server per ridurre al minimo la quantità di elaborazione js sul lato client
— Dan Gayle

3

Ecco la mia opinione sull'utilizzo di uno dei filtri di immagine wordpress, ho provato a utilizzare quello suggerito da Chip Bennett ma non ho avuto successo.

Quello che ho fatto è creare una dimensione personalizzata e quindi controllare ogni immagine quando viene creata se è quella dimensione specifica e se è quindi applicare i filtri phpthumb. Idealmente, vorrei essere in grado di controllare solo il nome della dimensione dell'immagine personalizzata, ma non ho ancora capito come farlo.

add_theme_support( 'post-thumbnails' );
add_image_size( 'rounded-saturated', 250, 100, true ); 
require_once('path_to\phpthumb.class.php');
add_filter('image_make_intermediate_size', 'paul_rounded_filter');

function paul_rounded_filter($file) {
    $info = getimagesize($file);

    // check for our image size and do stuff
    if($info[0] == 250 && $info[1] == 100)
    {
        // create phpThumb object
        $phpThumb = new phpThumb();
        $phpThumb->resetObject();

        // set data source -- do this first, any settings must be made AFTER this call      
        $phpThumb->setSourceData(file_get_contents($file));
        $output_filename = $file;


        // PLEASE NOTE:
        // You must set any relevant config settings here. The phpThumb
        // object mode does NOT pull any settings from phpThumb.config.php
        //$phpThumb->setParameter('config_document_root', '/home/groups/p/ph/phpthumb/htdocs/');
        //$phpThumb->setParameter('config_cache_directory', '/tmp/persistent/phpthumb/cache/');

        // set parameters (see "URL Parameters" in phpthumb.readme.txt)
        $phpThumb->setParameter('fltr', 'ric|30|30');
        $phpThumb->setParameter('fltr', 'sat|-100');

        // generate & output thumbnail
        if ($phpThumb->GenerateThumbnail()) { // this line is VERY important, do not remove it!
            if ($phpThumb->RenderToFile($output_filename)) {
                // do something on success
                echo 'Successfully rendered to "'.$output_filename.'"';
                //die;
            } else {
                // do something with debug/error messages
                echo 'Failed:<pre>'.implode("\n\n", $phpThumb->debugmessages).'</pre>';
                die;
            }
        } else {
            // do something with debug/error messages
            echo 'Failed:<pre>'.$phpThumb->fatalerror."\n\n".implode("\n\n", $phpThumb->debugmessages).'</pre>';
            die;
        }
    }

    if ( $width || $height ) {
        if ( !is_wp_error($resized_file) && $resized_file && $info = getimagesize($resized_file) ) {
            $resized_file = apply_filters('image_make_intermediate_size', $resized_file);
            return array(
                'file' => wp_basename( $resized_file ),
                'width' => $info[0],
                'height' => $info[1],
            );
        }
    }
    return false;
}

Se aggiungi quel codice al file Functions.php del tuo tema, scarica phpthumb e imposta il percorso che dovresti fare. Ho funzionato sulla mia installazione locale di xampp, quindi spero che dovrebbe funzionare anche per altre persone. I commenti phpThumb provengono dal semplice esempio dimostrativo.


Bello. Questo è più in linea con quello di cui stavo parlando!
— Dan Gayle,

Ha funzionato per te?
— Paul Sheldrake,

Non ho ancora avuto occasione di provarlo. Grazie comunque!
— Dan Gayle,

2

Non c'è motivo di non farlo con CSS che funziona e sarà supportato in tutti i principali browser ad eccezione di IE 8 e precedenti:

Se vuoi davvero supportare IE puoi usare Modernizr che aggiungerà una classe di angoli senza arrotondamento sull'elemento img target nei browser incapaci.

Aggiungi class = "angoli arrotondati" alle anteprime e nel tuo CSS:

.rounded-corners {
    -moz-border-radius: 30px 30px 30px 30px;
    -webkit-border-radius: 30px 30px 30px 30px;
    border-radius: 30px;
}

Ho fatto un rapido test su un'immagine casuale sulla prima pagina di WPCandy.com aggiungendo gli angoli alla classe di immagini usando Firebug. Ecco i risultati

Prima:

inserisci qui la descrizione dell'immagine

Dopo:

inserisci qui la descrizione dell'immagine

CSS inserito in Firebug:

inserisci qui la descrizione dell'immagine

Per i tuoi .no-angoli arrotondati usa uno dei metodi di fallback se ritieni di aver bisogno.


Buona idea per farlo usando Modernizr. Ne ho ancora bisogno sul lato server però.
— Dan Gayle

Naturalmente, uno dei siti in questione ha ancora l'80% di traffico IE <9
— Dan Gayle

1

Quali miniature desideri applicare, la dimensione dell'immagine "in miniatura" in generale o Pubblica miniature?

Entrambi possono essere facilmente realizzati tramite CSS, in particolare la border-radiusproprietà; la risposta specifica dipenderà dalle tue esatte esigenze. Sarò felice di aggiornare.

PS IMHO che va al percorso dell'immagine TimThumb / memorizzato nella cache non è ottimale. Usa semplicemente le immagini generate da WordPress, con angoli quadrati (che fanno già parte della cache degli oggetti) e usa i CSS per arrotondare gli angoli.


1
border-radius non si applica alle immagini. È davvero complicato.
— fuxia

Il raggio del bordo su Mozilla mostrerà gli angoli quadrati se lo applichi a un tag img
— Dan Gayle

Deve essere applicato come immagine di sfondo per il wrapper div, il che è piuttosto poco pratico.
— Wyck,

border-radius funziona direttamente sui tag img nell'attuale mozilla.
— Milo,

Quello che ha detto Milo. border-radiusfunziona perfettamente con le immagini. Lo uso per commentare Gravatars nel mio tema.
— Chip Bennett,

1

Su una ricerca su Google è possibile arrotondare gli angoli con GD ma i risultati non sono i migliori; sono un po 'nervosi; ma questa è una chiamata soggettiva da parte mia: http://www.assemblysys.com/dataServices/php_roundedCorners.php

Se devi farlo; consiglio di usare lo script timthumb come punto di partenza:

Progetto Timthumb: http://timthumb.googlecode.com http://timthumb.googlecode.com/svn/trunk/timthumb.php

Stackoverflow ha anche un post su questo: /programming/609109/rounded-corners-on-images-using-php


0

Hai dato un'occhiata agli angoli arrotondati di ccs3pie e agli hacker CSS3 per es. Questo dovrebbe fare quello che vuoi così come forzare il buon vecchio cioè a sottomettersi per conformarsi.


Questo sarebbe l'ideale, ma non l'ho mai fatto funzionare in modo coerente. Ho strappato i capelli a questo.
— Dan Gayle,

0

OK è facile !!

Innanzitutto, come hanno detto le persone, il modo migliore, più pulito e più semplice è usare il raggio-raggio css3. Funziona con la maggior parte dei browser moderni, ad eccezione del tipico IE6-8 che non ha supporto ... anche se IE9 lo farà.

.round {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

Quindi, se sei come me e tutti i tuoi clienti usano IE, allora consiglierei CSS3 Pie come sopra http://css3pie.com/ . L'unico inconveniente è che si rovina con l'indice z delle immagini, quindi se si utilizza un dispositivo di scorrimento che sfuma potrebbe verificarsi problemi.

Se non ti va di usare CSS3 Pie, consiglierei http://jquery.malsup.com/corner/ . È sufficiente collegarlo nell'intestazione, insieme a jQuery e utilizzare quanto segue:

<script>
        $(function(){
        $('.round').corner();
    });
</script>

Raccoglie la dichiarazione CSS3 e per qualsiasi browser che non la supporta, rende gli angoli arrotondati tramite jquery.

Di recente li abbiamo usati entrambi su un sito Web di clienti qui: http://www.theathenaprogramme.co.uk/

Lavoro fatto :-) Spero che questo aiuti.

Modifica: ho appena notato che è necessario eseguire questa operazione prima che l'immagine venga salvata tramite media.php. Penso che la mia soluzione non sia applicabile in questo caso.


0

Ho usato il plug-in Get Post Image per fare questo qui: http://surfhatteras.com/

Get Post Image è un wrapper per Get The Image WordPress Plugin e la libreria phpThumb.

Usandolo puoi fare qualcosa come <?php get_post_image ('w=200&amp;zc=1&amp;fltr[]=ric|30|30'); ?> arrotondare gli angoli di un'immagine pubblicata. Oppure puoi avvolgere le tue immagini da solo: http://phpthumb.sourceforge.net/demo/demo/phpThumb.demo.demo.php#x33

Non dimenticare di memorizzare nella cache! http://mrphp.com.au/code/image-cache-using-phpthumb-and-modrewrite

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.