Bonjour,

OBJECTIF : Mon souhait est de permettre à une image d'être agrandi lors de son survol par le pointeur de la souris (ou au clic peu importe).

CONTEXTE : il s'agit d'une page wordpress faisant appel à une mise en page existante dont j'ignore le fonctionnement et son emplacement. Les images placées sur cette page (sans le moindre code) se voient redimensionnées et mis en page. Mon souhait est de ne surtout pas ajouter de code dans cette page pour permettre l'action au survol du pointeur de la souris.

HYPOTHESE : puisse cette action s'effectuer par du CSS additionnel ? un plugin ?

MES COMPETENCES : proche du néant je suis néanmoins apte à copier coller des lignes de codes dont j'ai préalablement compris l'utilité... Maigre en somme Smiley sweatdrop
Modifié par YohannPraud (27 Feb 2020 - 15:27)
YohannPraud a écrit :
Mon souhait est de ne surtout pas ajouter de code dans cette page pour permettre l'action au survol du pointeur de la souris.


Merci Mathieuu

Je trouve cette fonctionnalité parfaite pour l'usage que je souhaite en faire mais l'idée est de faire en sorte que toute image posée sur une page interagissent avec ce code sans avoir à le rappeler. Et pour cela j'ai posté cette requête ici. Peut-on définir un code valant pour toutes les images ?

En regardant le code source de la page en question on dirait que la page fait appel à "portfolio-loop.php" dans le dossier qui s'appelle "CherryFramework".

Alors ce php est adorablement bien fichu mais j'y comprends pas grand chose et surtout puis-je le modifier et comment ?

Voici son contenu :
<?php // Theme Options vars
	$folio_filter         = of_get_option('folio_filter');
	$category_value       = get_post_meta($post->ID, 'tz_category_include', true);
	$folio_filter_orderby = ( of_get_option('folio_filter_orderby') ) ? of_get_option('folio_filter_orderby') : 'name';
	$folio_filter_order   = ( of_get_option('folio_filter_order') ) ? of_get_option('folio_filter_order') : 'name';

	// WPML filter
	$suppress_filters = get_option('suppress_filters');
?>
<div class="page_content">
	<?php the_content(); ?>
	<div class="clear"></div>
</div>
<?php
if ( post_password_required() ) {
	return;
}
if ( !$category_value ) {
	switch ($folio_filter) {
		case 'cat': ?>
			<div class="filter-wrapper clearfix">
				<div class="pull-right">
					<strong><?php echo theme_locals("categories"); ?>: </strong>
					<ul id="filters" class="filter nav nav-pills">
						<?php
							// query
							$args = array(
								'post_type'        => 'portfolio',
								'posts_per_page'   => -1,
								'post_status'      => 'publish',
								'orderby'          => 'name',
								'order'            => 'ASC',
								'suppress_filters' => $suppress_filters
								);
							$portfolio_posts = get_posts($args);

							foreach( $portfolio_posts as $k => $portfolio ) {
								//Check if WPML is activated
								if ( defined( 'ICL_SITEPRESS_VERSION' ) ) {
									global $sitepress;

									$post_lang = $sitepress->get_language_for_element($portfolio->ID, 'post_portfolio');
									$curr_lang = $sitepress->get_current_language();
									// Unset not translated posts
									if ( $post_lang != $curr_lang ) {
										unset( $portfolio_posts[$k] );
									}
									// Post ID is different in a second language Solution
									if ( function_exists( 'icl_object_id' ) ) {
										$portfolio = get_post( icl_object_id( $portfolio->ID, 'portfolio', true ) );
									}
								}
							}
							$count_posts = count($portfolio_posts);
						?>
						<li class="active"><a href="#" data-count="<?php echo $count_posts; ?>" data-filter><?php echo theme_locals("show_all"); ?></a></li>
						<?php
							$filter_array = array();
							$portfolio_categories = get_categories( array(
								'taxonomy' => 'portfolio_category',
								'orderby'  => $folio_filter_orderby,
								'order'    => $folio_filter_order,
								)
							);
							foreach($portfolio_categories as $portfolio_category) {
								$filter_array[$portfolio_category->name] = $portfolio_category->count;
							}

							if ($paged == 0) $paged = 1;
							$custom_count = ($paged - 1) * $items_count;

							// query
							$args = array(
								'post_type'        => 'portfolio',
								'showposts'        => $items_count,
								'offset'           => $custom_count,
								'suppress_filters' => $suppress_filters,
								);
							$the_query = new WP_Query($args);

							while( $the_query->have_posts() ) :
								$the_query->the_post();
								$post_id = $the_query->post->ID;
								$terms = get_the_terms( $post_id, 'portfolio_category');
								if ( $terms && ! is_wp_error( $terms ) ) {
									foreach ( $terms as $term ) {
										$filter_array[$term->name] = $term;
									}
								}
							endwhile;

							foreach ($filter_array as $key => $value) {
								if ( isset($value->count) ) {
									echo '<li><a href="#" data-count="'. $value->count .'" data-filter=".term_id_'.$value->term_id.'">' . $value->name . '</a></li>';
								}
							}
							wp_reset_postdata();
						?>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
			<?php
			break;
		case 'tag': ?>
			<div class="filter-wrapper clearfix">
				<div class="pull-right">
					<strong><?php echo theme_locals("tags"); ?>: </strong>
					<ul id="tags" class="filter nav nav-pills">
						<?php
							// query
							$args = array(
								'post_type'        => 'portfolio',
								'posts_per_page'   => -1,
								'post_status'      => 'publish',
								'orderby'          => 'name',
								'order'            => 'ASC',
								'suppress_filters' => $suppress_filters
								);
							$portfolio_posts = get_posts($args);

							foreach( $portfolio_posts as $k => $portfolio ) {
								// Unset not translated posts
								if ( function_exists( 'wpml_get_language_information' ) ) {
									global $sitepress;

									$check               = wpml_get_language_information( $portfolio->ID );
									$language_code = substr( $check['locale'], 0, 2 );
									if ( $language_code != $sitepress->get_current_language() ) unset( $portfolio_posts[$k] );

									// Post ID is different in a second language Solution
									if ( function_exists( 'icl_object_id' ) ) $portfolio = get_post( icl_object_id( $portfolio->ID, 'portfolio', true ) );
								}
							}
							$count_posts = count($portfolio_posts);
						?>
						<li class="active"><a href="#" data-count="<?php echo $count_posts; ?>" data-filter><?php echo theme_locals("show_all"); ?></a></li>
						<?php
							$filter_array = array();
							$portfolio_tags = get_terms( 'portfolio_tag', array(
								'orderby'  => $folio_filter_orderby,
								'order'    => $folio_filter_order,
								)
							);
							foreach($portfolio_tags as $portfolio_tag) {
								$filter_array[$portfolio_tag->slug] = $portfolio_tag->count;
							}

							if ($paged == 0) $paged = 1;
							$custom_count = ($paged - 1) * $items_count;

							// query
							$args = array(
								'post_type'        => 'portfolio',
								'showposts'        => $items_count,
								'offset'           => $custom_count,
								'suppress_filters' => $suppress_filters
								);
							$the_query = new WP_Query($args);

							while( $the_query->have_posts() ) :
								$the_query->the_post();
								$post_id = $the_query->post->ID;
								$terms = get_the_terms( $post_id, 'portfolio_tag');
								if ( $terms && ! is_wp_error( $terms ) ) {
									foreach ( $terms as $term ) {
										$filter_array[$term->slug] = $term;
									}
								}
							endwhile;

							foreach ($filter_array as $key => $value) {
								if ( isset($value->count) ) {
									echo '<li><a href="#" data-count="'. $value->count .'" data-filter=".term_id_'.$value->term_id.'">' . $value->name . '</a></li>';
								}
							}
							wp_reset_postdata();
						?>
					</ul>
					<div class="clear"></div>
				</div>
			</div>
			<?php
			break;
		default:
			break;
	}
}?>

<?php
	//  http://codex.wordpress.org/Pagination#Adding_the_.22paged.22_parameter_to_a_query
 
	if ( get_query_var('paged') ) {
		$paged = get_query_var('paged');
	} elseif ( get_query_var('page') ) {
		$paged = get_query_var('page');
	} else {
		$paged = 1;
	}

	// Get Order & Orderby Parameters
	$orderby = ( of_get_option('folio_posts_orderby') ) ? of_get_option('folio_posts_orderby') : 'date';
	$order   = ( of_get_option('folio_posts_order') ) ? of_get_option('folio_posts_order') : 'DESC';

	// The Query
	$args = array(
		'post_type'          => 'portfolio',
		'paged'              => $paged,
		'showposts'          => $items_count,
		'portfolio_category' => $category_value,
		'suppress_filters'   => $suppress_filters,
		'orderby'            => $orderby,
		'order'              => $order,
		);
	global $query_string;
	query_posts($args);
?>

<?php if ( !have_posts() ) : ?>
	<div id="post-0" class="post error404 not-found">
		<h1 class="entry-title"><?php echo theme_locals("not_found"); ?></h1>
		<div class="entry-content">
			<p><?php echo theme_locals("apologies"); ?></p>
			<?php get_search_form(); ?>
		</div><!-- .entry-content -->
	</div><!-- #post-0 -->
<?php endif; ?>

<ul id="portfolio-grid" class="filterable-portfolio thumbnails portfolio-<?php echo $cols; ?>" data-cols="<?php echo $cols; ?>">
	<?php get_template_part('filterable-portfolio-loop'); ?>
</ul>

<?php
	get_template_part('includes/post-formats/post-nav');
	wp_reset_query();
?>

Modifié par YohannPraud (27 Feb 2020 - 18:18)
Alors pour le coup le gros bout de code php, ça ne m'intéresse pas tellement Smiley sweatdrop (surtout que tu as dit que tu ne voulais pas modifier ce code non ? )

A la limite ça m’intéresse plus d'avoir le contenu html qui est généré par ton php pour faire un css qui se limite à l'image voulu.

Sinon en bout de code css qui fonctionne pour toutes les images :

img:hover {
  transform: scale(3); 
}
Salut

En sachant bien que le code de Mathieuu fonctionne pour 100 % des balises <img> de ton site.

Si jamais tu ne veux pas faire l'effet sur une ou plusieurs images en particulier (genre le logo dans le header par exemple) il va dont falloir travailler avec des classes. mais ça on verra après ta réponse Smiley smile
Modifier du code évidemment que je dois m'y coller. Mon sujet porte sur le fait de le faire une bonne fois pour toute. C'est à dire de ne surtout pas devoir ajouter de code pour chaque image.

La proposition de code hover x3 me semble pertinente, il me reste à comprendre ou coller celui-ci pour ne pas affecter toutes mes images.

Merci déjà pour ce coup de pouce. Je poursuis ma quête !
C'est du css, il suffit de le rajouter dans ton fichier css et ça roule sans modifier le code php.

Mais la ça va s'appliquer à TOUTES les images, il faudrait que tu regardes sur ta page la structure html (donc la page qui est généré par ton gros code la) pour pouvoir cibler précisément l'image qui doit réagir au :hover du css.

Bon courage