web-dev-qa-db-fra.com

Comment positionner avec précision les images avec une flexibilité maximale?

J'ai reçu une demande pour développer le design suivant avec Wordpress: http://imm.io/DLrl (le design est pixélisé par moi pour des raisons de confidentialité) ).

Comme vous pouvez le constater, le placement des images est assez aléatoire et le webmaster doit disposer du maximum de flexibilité pour décider comment placer les images, combien et à quelle taille. Ainsi, la conception telle que vue actuellement changera à chaque fois que le webmaster le décidera. Lorsqu'une nouvelle collection de photos est ajoutée au site Web, le webmaster doit pouvoir en choisir plusieurs qui seront mises en évidence sur la page principale.

Dans cette conception, une image représente un album ou une collection de photos. Ainsi, lorsque vous cliquez sur l'une de ces images, une boîte à lumière apparaîtra dans laquelle le visiteur peut parcourir toutes les images.

Je ne sais pas comment implémenter un tel design dans WordPress. Des conseils/idées sur les possibilités? Des plugins dignes d'intérêt?

(ps: pour moi la conception est un peu déroutante et pas très claire en termes de facilité d'utilisation et de structure, mais c'est une autre affaire)

pluginsimagesgallerydesign
1
grrrbytes

J'ai écrit un plugin nommé "Dynamic Image redimensionner" à cet effet. Il comporte une balise de modèle et un shortcode (qui prend exactement le même nombre d’arguments que la balise de modèle.

// The args need to be an array
dynamic_image_resize( array(
     // The full path to the image in your uploads folder
     'src'     => 'http://example.com/wp-content/uploads/2012/03/some_image.png'
     // OR: the ID
     'src'     => 6

    ,'width'   => 60
    ,'height'  => 100
    ,'classes' => 'some classes to align and style the image'
) );

Vous pouvez même rendre cela encore plus facile en ajoutant un plugin "enfant" qui offre un bouton TinyMCE.

1
kaiser

Je ne suis pas sûr d'avoir compris votre question.

Cherchez-vous une pratique recommandée pour définir la taille des images de manière à ce que la personne qui les intègre dans un article ou quelque part dans votre page d'accueil ou votre site Web (par exemple, le contenu en vedette, les vignettes) apparaisse bien même si la conception change avec le temps ou si l'auteur de un message peut choisir différents styles et s’ajuster à l’image en conséquence?

Si c'est ce que vous recherchez, vous pouvez activer les vignettes dans votre thème en ajoutant add_theme_support( 'post-thumbnails' ); dans votre fichier functions.php, puis définissez les vignettes redimensionnées de votre choix. Par exemple:

 add_image_size( 'square', 300,  300,  true ); 
 add_image_size( 'featured', 640,  480,  false ); 
 add_image_size( 'your_label', $width, $height,  $crop );

$ crop peut être défini sur true, true ou false, selon que vous souhaitez que l'image soit recadrée ou redimensionnée lorsqu'elle est réduite par CSS.

Finalement, si votre conception utilise beaucoup de vignettes carrées ou d’images à rapport fixe (il apparaît ainsi dans votre lien), vous pouvez définir une image plus grande avec un rapport fixe puis la réduire si nécessaire (je trouve cela utile lorsque vous souhaitez afficher une vignette plus petite ou plus grande, mais sa taille ne justifie pas trop une autre taille d'image, je réduis donc celle qui est plus grande au besoin)

Pour la partie où vous demandez de générer une lightbox ou un contenu vedette pour la maison, la meilleure solution serait d'utiliser un plugin. Champs personnalisés avancés ou Galerie Nextgen pour gérer une galerie, puis javascript pour gérer la lightbox. Une fois que vous avez les images nécessaires (miniatures parmi lesquelles choisir dans différentes tailles), vous devriez être capable de réaliser ce que vous voulez.

0
unfulvio