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.