working on portfolio template

This commit is contained in:
Antoine M 2025-01-30 10:38:19 +01:00
parent 5b39b0f8b1
commit 111295602f
3 changed files with 541 additions and 106 deletions

View File

@ -0,0 +1,217 @@
<?php
/*
Template Name: Portfolio
*/
get_header();
?>
<div class="container">
<div class="row">
<div class="col-lg-12 accroche">
<h1><?php echo get_field('nom_de_la_page'); ?></h1>
</div>
<div class="offset-lg-8 col-lg-1">
<div class="circleTop"></div>
</div>
<div class="col-12">
<div class="button-group">
<button class="tout is-checked" data-target="*">tout</button>
<button class="web" data-target=".web">web</button>
<button class="print" data-target=".print">print</button>
<button class="video" data-target=".video">vidéo</button>
<button class="motiondesign" data-target=".motiondesign">motion design</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row grid">
<?php
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => -1,
);
$portfolio_post = new WP_Query($args);
?>
<?php if ($portfolio_post->have_posts()) : while ($portfolio_post->have_posts()) : the_post(); ?>
<?php echo get_the_title(); ?>
<?php endwhile; ?>
<?php endif; ?>
<!-- MA CUSTOM -->
<?php
$cat_colors = array(
'web' => '#1CC7C7',
'print' => '#C14FE3',
'motiondesign' => '#21D5F5',
'video' => '#21D5F5',
);
$portfolio_post = get_post(18150);
$projectUrl = get_permalink($portfolio_post);
$thumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
$mobileThumbnailUrl = get_the_post_thumbnail_url($portfolio_post, 'full');
$projectDescription = get_field('project_description', $portfolio_post);
$pousseBoule = 'offset-lg-8';
$projectType = 'web';
$projectTitle = get_the_title($portfolio_post);
$clientName = get_field('client_name', $portfolio_post);
$currentProjectColor = $cat_colors[$projectType];
$mouse = $categorie === 'video' ? 'Mouseactive' : null;
$i = 3;
$ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
?>
<div class="col-12 element-item grid-sizer project-type--<?php echo $projectType; ?> <?php echo $projectType; ?>" data-category="transition">
<div class="row">
<div class="<?php echo $ballOffset; ?> col-lg-1">
<div style="background-color: <?php echo $couleur; ?>" class="circleTop"></div>
</div>
<div class="col-12 <?php
if ($categorie === 'video'):
echo ("openSlickModal-" . $compteurVideo);
endif;
if (empty($lienvideo)) {
echo ' clickno';
}
?>">
<img class="large <?php echo $mouse; ?>" src="<?php echo $thumbnailUrl ?>" alt="alt">
<img class="mobile" src="<?php echo $mobileThumbnailUrl ?>" alt="alt">
</div>
<div style="color: <?php echo $currentProjectColor; ?>" class="col-lg-4 <?php echo $i % 2 == 0 ? '' : 'offset-lg-4' ?> ">
<div style="background-color: <?php echo $currentProjectColor ?>" class="barre"></div>
<h3><?php echo $projectTitle ?></h3>
<p class="client"><?php echo $clientName ?></p>
</div>
<div class="col-lg-4 contenu">
<?php echo $projectDescription ?>
<a class="case-button" href="<?php echo $projectUrl ?>">Lire le Case</a>
</div>
</div>
</div>
<?php
// check if the repeater field has rows of data
$couleur = array(
'web' => '#1CC7C7',
'print' => '#C14FE3',
'motiondesign' => '#21D5F5',
'video' => '#21D5F5',
);
$i = 1;
$compteurBoule = 1;
$compteurVideo = 1;
if (have_rows('portfolio_beta')):
// loop through the rows of data
while (have_rows('portfolio_beta')) : the_row();
$image = get_sub_field('image_du_projet');
$imageMobile = get_sub_field('image_du_projet_mobile');
$categorie = get_sub_field('categorie_du_projet');
$mouse = 'Mousenonactif';
//print_r($categorie);
$valeur = $categorie['value'];
// COMPTEUR BOULE
if ($compteurBoule == 1):
elseif ($compteurBoule == 2):
$pousseBoule = 'offset-lg-4';
elseif ($compteurBoule == 3):
$pousseBoule = 'offset-lg-8';
$compteurBoule = 1;
endif;
// FIN COMPTEUR BOULE
// COMPTEUR VIDEO ET MOUSE VIDEO
if ($categorie['value'] === 'video'):
$mouse = 'Mouseactive';
endif;
// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
// LIEN VIDEO VIDE
$lienvideo = get_sub_field('url_de_la_video');
// FIN LIEN VIDEO VIDE
?>
<div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
<div class="row">
<div class="<?php echo $pousseBoule; ?> col-lg-1">
<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="circleTop"></div>
</div>
<div class="col-12 <?php
if ($categorie['value'] === 'video'):
echo ("openSlickModal-" . $compteurVideo);
endif;
if (empty($lienvideo)) {
echo ' clickno';
}
?>">
<img class="large <?php echo $mouse; ?>" src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt'] ?>">
<img class="mobile" src="<?php echo $imageMobile['url']; ?>" alt="<?php echo $imageMobile['alt'] ?>">
</div>
<?php
if ($i % 2 == 0):
?>
<div style="color: <?php echo $couleur[$valeur]; ?>" class="col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
<?php
else:
?>
<div style="color: <?php echo $couleur[$valeur]; ?>" class="offset-lg-4 col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur]; ?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet'); ?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client'); ?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet'); ?></div>
<?php
endif;
?>
</div>
</div>
<?php
if ($categorie['value'] === 'video'):
?>
<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
<div class="slickWindow">
<!-- Your popup content -->
<iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video'); ?>" frameborder="0" allowfullscreen>
</iframe>
<!-- / Your popup content -->
</div>
</div>
<?php
$compteurVideo++;
endif;
$i++;
$compteurBoule++;
endwhile;
else :
// no rows found
endif;
?>
</div>
<div class="row">
<div class="col-12">
<div class="circleEnd"></div>
</div>
</div>
</div>
<?php get_footer(); ?>

View File

@ -0,0 +1,139 @@
<?php
/*
Template Name: Portfolio
*/
get_header();
?>
<div class="container">
<div class="row">
<div class="col-lg-12 accroche">
<h1><?php echo get_field('nom_de_la_page');?></h1>
</div>
<!-- <div class="offset-lg-8 col-lg-1"><div class="circleTop"></div></div>
<div class="col-12">
<div class="button-group">
<button class="tout is-checked" data-target="*">tout</button>
<button class="web" data-target=".web">web</button>
<button class="print" data-target=".print">print</button>
<button class="video" data-target=".video">vidéo</button>
<button class="motiondesign" data-target=".motiondesign">motion design</button>
</div>
</div> -->
</div>
</div>
<div class="container">
<div class="row grid">
<?php
// check if the repeater field has rows of data
$couleur = array(
'web' => '#1CC7C7' ,
'print' => '#C14FE3' ,
'motiondesign' => '#21D5F5',
'video' => '#21D5F5',
);
$i = 1;
$compteurBoule = 1;
$compteurVideo = 1;
if( have_rows('portfolio_beta') ):
// loop through the rows of data
while ( have_rows('portfolio_beta') ) : the_row();
$image = get_sub_field('image_du_projet');
$imageMobile = get_sub_field('image_du_projet_mobile');
$categorie = get_sub_field('categorie_du_projet');
$mouse = 'Mousenonactif';
//print_r($categorie);
$valeur = $categorie['value'];
// COMPTEUR BOULE
if($compteurBoule == 1):
elseif($compteurBoule == 2):
$pousseBoule = 'offset-lg-4';
elseif($compteurBoule == 3):
$pousseBoule = 'offset-lg-8';
$compteurBoule = 1;
endif;
// FIN COMPTEUR BOULE
// COMPTEUR VIDEO ET MOUSE VIDEO
if($categorie['value']=== 'video'):
$mouse = 'Mouseactive';
endif;
// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
// LIEN VIDEO VIDE
$lienvideo = get_sub_field('url_de_la_video');
// FIN LIEN VIDEO VIDE
?>
<div class="col-12 element-item grid-sizer <?php echo $categorie['value'];?>" data-category="transition">
<div class="row">
<div class="<?php echo $pousseBoule; ?> col-lg-1"><div style="background-color: <?php echo $couleur[$valeur];?>" class="circleTop"></div></div>
<div class="col-12 <?php
if($categorie['value']=== 'video'):
echo("openSlickModal-".$compteurVideo);
endif;
if(empty($lienvideo)){
echo ' clickno';
}
?>">
<img class="large <?php echo $mouse; ?>" src="<?php echo $image['url'];?>" alt="<?php echo $image['alt']?>">
<img class="mobile" src="<?php echo $imageMobile['url'];?>" alt="<?php echo $imageMobile['alt']?>">
</div>
<?php
if($i % 2 == 0):
?>
<div style="color: <?php echo $couleur[$valeur];?>" class="col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet');?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client');?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
<?php
else:
?>
<div style="color: <?php echo $couleur[$valeur];?>" class="offset-lg-4 col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet');?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client');?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
<?php
endif;
?>
</div>
</div>
<?php
if($categorie['value']=== 'video'):
?>
<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
<div class="slickWindow">
<!-- Your popup content -->
<iframe id="myVideo" src="<?php echo get_sub_field('url_de_la_video');?>" frameborder="0" allowfullscreen>
</iframe>
<!-- / Your popup content -->
</div>
</div>
<?php
$compteurVideo++;
endif;
$i++;
$compteurBoule++;
endwhile;
else :
// no rows found
endif;
?>
</div>
<div class="row">
<div class="col-12">
<div class="circleEnd"></div>
</div>
</div>
</div>
<?php get_footer();?>

View File

@ -3,13 +3,19 @@
Template Name: Portfolio
*/
get_header();
$currentPageId = get_the_ID();
?>
<div class="container">
<div class="row">
<div class="col-lg-12 accroche">
<h1><?php echo get_field('nom_de_la_page'); ?></h1>
</div>
<div class="offset-lg-8 col-lg-1"><div class="circleTop"></div></div>
<div class="offset-lg-8 col-lg-1">
<div class="circleTop"></div>
</div>
<div class="col-12">
<div class="button-group">
<button class="tout is-checked" data-target="*">tout</button>
@ -21,8 +27,66 @@ get_header();
</div>
</div>
</div>
<div class="container">
<div class="row grid">
<section class="projects-overview">
<?php
$args = array(
'post_type' => 'portfolio',
'posts_per_page' => -1,
);
$portfolio_post = new WP_Query($args);
?>
<?php if ($portfolio_post->have_posts()) : while ($portfolio_post->have_posts()) : $portfolio_post->the_post(); ?>
<?php
$projectThumbnailUrl = get_the_post_thumbnail_url($portfolio_post->ID, 'full');
$projectPermLink = get_the_permalink($portfolio_post->ID);
?>
<div class="project-card">
<a href="<?php echo $projectPermLink ?>">
<img src="<?php echo $projectThumbnailUrl ?>" alt="">
</a>
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
<a href="<?php the_permalink(); ?>">Voir le projet</a>
</div>
<?php endwhile; ?>
<?php endif; ?>
</section>
<section class="old-project container">
<?php
$portfolio_beta = get_field('portfolio_beta', $currentPageId);
$cat_colors = array(
'web' => '#1CC7C7',
'print' => '#C14FE3',
'motiondesign' => '#21D5F5',
'video' => '#21D5F5',
);
?>
<?php
$project_id = $portfolio_post->ID;
$projectUrl = get_permalink($project_id);
$thumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
$mobileThumbnailUrl = get_the_post_thumbnail_url($project_id, 'full');
$projectDescription = get_field('project_description', $project_id);
$pousseBoule = 'offset-lg-8';
$projectType = 'web';
$projectTitle = get_the_title($project_id);
$clientName = get_field('client_name', $project_id);
$currentProjectColor = $cat_colors[$projectType];
$mouse = $categorie === 'video' ? 'Mouseactive' : null;
$i = 3;
$ballOffset = $i === 1 ? 'offset-lg-4' : ($i === 2 ? 'offset-lg-4' : 'offset-lg-8');
?>
<?php
// check if the repeater field has rows of data
$couleur = array(
@ -34,18 +98,22 @@ get_header();
$i = 1;
$compteurBoule = 1;
$compteurVideo = 1;
?>
if( have_rows('portfolio_beta') ):
// loop through the rows of data
<?php foreach ($portfolio_beta as $portfolio_project): ?>
<?php
while ( have_rows('portfolio_beta') ) : the_row();
$image = get_sub_field('image_du_projet');
$imageMobile = get_sub_field('image_du_projet_mobile');
$categorie = get_sub_field('categorie_du_projet');
$projectName = $portfolio_project['nom_du_projet'];
$clientName = $portfolio_project['nom_du_client'];
$projectDescription = $portfolio_project['description_du_projet'];
$image = $portfolio_project['image_du_projet'];
$imageMobile = $portfolio_project['image_du_projet_mobile'];
$categorie = $portfolio_project['categorie_du_projet'];
$mouse = 'Mousenonactif';
//print_r($categorie);
$valeur = $categorie['value'];
// COMPTEUR BOULE
if ($compteurBoule == 1):
elseif ($compteurBoule == 2):
@ -62,13 +130,16 @@ get_header();
endif;
// FIN COMPTEUR VIDEO ET FIN MOUSE VIDEO
// LIEN VIDEO VIDE
$lienvideo = get_sub_field('url_de_la_video');
$lienvideo = $portfolio_project['url_de_la_video'];
// FIN LIEN VIDEO VIDE
?>
<div class="col-12 element-item grid-sizer <?php echo $categorie['value']; ?>" data-category="transition">
<div class="row">
<div class="<?php echo $pousseBoule; ?> col-lg-1"><div style="background-color: <?php echo $couleur[$valeur];?>" class="circleTop"></div></div>
<div class="<?php echo $pousseBoule; ?> col-lg-1">
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="circleTop"></div>
</div>
<div class="col-12 <?php
if ($categorie['value'] === 'video'):
echo ("openSlickModal-" . $compteurVideo);
@ -83,31 +154,28 @@ get_header();
<?php
if ($i % 2 == 0):
?>
<div style="color: <?php echo $couleur[$valeur];?>" class="col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet');?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client');?></p>
<div style="color: <?php echo $cat_colors[$valeur]; ?>" class="col-lg-4">
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
<h3><?php echo $projectName ?></h3>
<p class="client"><?php echo $clientName ?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
<div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
<?php
else:
?>
<div style="color: <?php echo $couleur[$valeur];?>" class="offset-lg-4 col-lg-4">
<div style="background-color: <?php echo $couleur[$valeur];?>" class="barre"></div>
<h3><?php echo get_sub_field('nom_du_projet');?></h3>
<p class="client"><?php echo get_sub_field('nom_du_client');?></p>
<div style="color: <?php echo $cat_colors[$valeur]; ?>" class="offset-lg-4 col-lg-4">
<div style="background-color: <?php echo $cat_colors[$valeur]; ?>" class="barre"></div>
<h3><?php echo $projectName ?></h3>
<p class="client"><?php echo $clientName ?></p>
</div>
<div class="col-lg-4 contenu"><?php echo get_sub_field('description_du_projet');?></div>
<div class="col-lg-4 contenu"><?php echo $projectDescription ?></div>
<?php
endif;
?>
</div>
</div>
<?php
if($categorie['value']=== 'video'):
?>
<?php if ($categorie['value'] === 'video'): ?>
<div id="video-portfolio-<?php echo $compteurVideo; ?>" class="slickModal">
<div class="slickWindow">
<!-- Your popup content -->
@ -122,11 +190,10 @@ get_header();
$i++;
$compteurBoule++;
endwhile;
else :
// no rows found
endif;
?>
<?php endforeach; ?>
</div>
<div class="row">
<div class="col-12">
@ -136,4 +203,16 @@ get_header();
</div>
</section>
<?php get_footer(); ?>