Octopusdesign/Octopus-React-Wp
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

import image cloudinary

Browse Source
This commit is contained in:
sebvtl728 2025-07-18 15:54:08 +02:00
parent 77a7cda77f
commit 98530922ef
2 changed files with 112 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/components/Pages/GestionPageAccueil.jsx
View File

@ -19,6 +19,7 @@ const GestionPageAccueil = () => {
const [heroTitle, setHeroTitle] = useState("");
const [heroText, setHeroText] = useState("");
const [heroImage, setHeroImage] = useState(null);
const [heroImageCloudinaryUrl, setHeroImageCloudinaryUrl] = useState("");
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [successMessage, setSuccessMessage] = useState("");
@ -69,11 +70,15 @@ const GestionPageAccueil = () => {
// ✅ Image Hero
if (data.acf?.img_hero) {
const mediaResponse = await fetch(
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/media/${data.acf.img_hero}`
);
const mediaData = await mediaResponse.json();
setHeroImage(mediaData.source_url);
if (data.acf?.img_hero_url) {
setHeroImage(data.acf.img_hero_url);
} else {
const mediaResponse = await fetch(
`https://preprod.octopusdesign.fr/api-octopus/server/wp-json/wp/v2/media/${data.acf.img_hero}`
);
const mediaData = await mediaResponse.json();
setHeroImage(mediaData.source_url);
}
}
// ✅ GDC Construct
@ -110,6 +115,7 @@ const GestionPageAccueil = () => {
const newData = {
hero_title: heroTitle,
hero_text: heroText,
img_hero_url: heroImageCloudinaryUrl || undefined,
mission: missions,
gdc_construct: {
construct_title: constructTitle,
@ -246,6 +252,33 @@ const GestionPageAccueil = () => {
<input type="file" hidden onChange={handleImageUpload} />
</Button>
<TextField
label="Ou URL Cloudinary"
fullWidth
variant="outlined"
value={heroImageCloudinaryUrl}
onChange={(e) => setHeroImageCloudinaryUrl(e.target.value)}
sx={{ mb: 2, backgroundColor: "#fff", borderRadius: "5px" }}
placeholder="https://res.cloudinary.com/..."
/>
<Button
variant="outlined"
color="primary"
fullWidth
sx={{ mb: 2 }}
onClick={async () => {
if (heroImageCloudinaryUrl.trim()) {
setHeroImage(heroImageCloudinaryUrl.trim());
await updateHomePageACF(13, {
img_hero_url: heroImageCloudinaryUrl.trim(),
});
setSuccessMessage("✅ Image Cloudinary appliquée !");
}
}}
>
🌐 Utiliser l'image Cloudinary
</Button>
<TextField
label="Titre Héros"
fullWidth
@ -367,9 +400,7 @@ const GestionPageAccueil = () => {
}}
/>
<Typography sx={{ mb: 1, fontWeight: "bold" }}>
Notes
</Typography>
<Typography sx={{ mb: 1, fontWeight: "bold" }}>Notes</Typography>
<ReactQuill
theme="snow"
value={constructNote}
@ -397,7 +428,7 @@ const GestionPageAccueil = () => {
onChange={(e) => setexpertiseTitle(e.target.value)}
sx={{ mb: 2 }}
/>
</Paper>
</Paper>
<Paper elevation={3} sx={{ marginTop: "30px", padding: "20px" }}>
<TextField

96
frontend/src/components/Pages/Home.jsx
View File

@ -5,10 +5,17 @@ import api from "../../api";
import ModernSpinner from "../SpinnerModerne";
import Expertises from "../Expertises";
import ConstructSection from "../ConstructSection";
import { Box, Grid, Typography, Button, Card, CardContent } from "@mui/material";
import {
Box,
Grid,
Typography,
Button,
Card,
CardContent,
} from "@mui/material";
import Logo from "../../assets/centre-formation-logo.avif";
import Testi from "../Testi";
import '../../assets/style.css';
import "../../assets/style.css";
const Home = () => {
const [pageData, setPageData] = useState(null);
@ -23,14 +30,22 @@ const Home = () => {
setError(null);
// 🔥 Ajout d'un timestamp pour éviter la mise en cache
const response = await api.get(`wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description&_=${new Date().getTime()}`);
const response = await api.get(
`wp/v2/pages/13?_fields=acf,rank_math_title,rank_math_description&_=${new Date().getTime()}`
);
const pageContent = response.data;
setPageData(pageContent);
// Récupération de l'image Hero
const heroImageId = pageContent.acf?.img_hero;
if (heroImageId) {
const mediaResponse = await api.get(`wp/v2/media/${heroImageId}?_=${new Date().getTime()}`);
// Récupération de l'image Hero (Cloudinary ou WordPress)
if (
pageContent.acf?.img_hero_url &&
pageContent.acf.img_hero_url.startsWith("http")
) {
setHeroImage(pageContent.acf.img_hero_url);
} else if (pageContent.acf?.img_hero) {
const mediaResponse = await api.get(
`wp/v2/media/${pageContent.acf.img_hero}?_=${new Date().getTime()}`
);
setHeroImage(mediaResponse.data.source_url);
} else {
setHeroImage(null);
@ -44,7 +59,7 @@ const Home = () => {
};
fetchPageData();
}, []);
}, []);
if (isLoading) {
return (
@ -64,8 +79,6 @@ const Home = () => {
);
}
const { acf, rank_math_title, rank_math_description } = pageData || {};
return (
@ -74,9 +87,15 @@ const Home = () => {
<SEO
postId={13} // ID WordPress valide
defaultTitle={rank_math_title || "centre de formation "}
defaultDescription={rank_math_description || "formation et reconversion professionnelle dans les métiers du numérique"}
defaultDescription={
rank_math_description ||
"formation et reconversion professionnelle dans les métiers du numérique"
}
defaultCanonicalUrl={acf?.canonical_url || window.location.href}
defaultOgImage={heroImage || "https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"}
defaultOgImage={
heroImage ||
"https://preprod.octopusdesign.fr/api-octopus/server/wp-content/uploads/2025/01/Construction-logements-au-Mans-01.avif"
}
/>
{/* Section Héros */}
@ -91,7 +110,9 @@ const Home = () => {
{/* Section Construisons */}
<ConstructSection
constructTitle={acf?.gdc_construct?.construct_title || "Construisons vos projets"}
constructTitle={
acf?.gdc_construct?.construct_title || "Construisons vos projets"
}
constructSubtitle={acf?.gdc_construct?.construct_subtitle || "ensemble"}
constructText={acf?.gdc_construct?.construct_text || "Texte par défaut"}
constructSector={acf?.gdc_construct?.construct_sector || "Secteurs"}
@ -102,7 +123,9 @@ const Home = () => {
{/* Section Expertises */}
<Expertises
expertiseTitle={acf?.titre_expertise.titre_expertise || "Pourquoi Nous Choisir ?"}
expertiseTitle={
acf?.titre_expertise.titre_expertise || "Pourquoi Nous Choisir ?"
}
expertise1Title={acf?.gdc_expert?.titre_expertise_1 || "Expertise 1"}
expertise1Text={acf?.gdc_expert?.text_expertise_1 || "Text Expertise 1"}
expertise2Title={acf?.gdc_expert?.titre_expertise_2 || "Expertise 2"}
@ -111,16 +134,27 @@ const Home = () => {
expertise3Text={acf?.gdc_expert?.text_expertise_3 || "Text Expertise 3"}
/>
{/* Section Témoignages */}
<Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
Ce que disent nos clients
</Typography>
<Typography
variant="h2"
sx={{
fontWeight: "bold",
mb: 2,
textAlign: "center",
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
}}
>
Ce que disent nos clients
</Typography>
<Testi />
{/* Section Action */}
<Box sx={{ py: 6, px: 4, backgroundColor: "#0e467f", color: "#fff" }}>
<Typography variant="h2" align="center" gutterBottom sx={{ fontWeight: "bold", mb: 4 }}>
<Typography
variant="h2"
align="center"
gutterBottom
sx={{ fontWeight: "bold", mb: 4 }}
>
Prêt à Commencer ?
</Typography>
<Box textAlign="center">
@ -143,7 +177,15 @@ const Home = () => {
{/* Section Témoignages */}
<Box sx={{ py: 6, px: 4 }}>
<Typography variant="h2" sx={{ fontWeight: "bold", mb: 2, textAlign: "center", fontSize: { xs: "2rem", md: "2rem", lg: "3rem" } }}>
<Typography
variant="h2"
sx={{
fontWeight: "bold",
mb: 2,
textAlign: "center",
fontSize: { xs: "2rem", md: "2rem", lg: "3rem" },
}}
>
Nos partenaires
</Typography>
<Grid container spacing={4}>
@ -153,7 +195,10 @@ const Home = () => {
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
Un service exceptionnel, une équipe formidable
</Typography>
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
<Typography
variant="body2"
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
>
- zertides
</Typography>
</CardContent>
@ -165,7 +210,10 @@ const Home = () => {
<Typography variant="body1" sx={{ fontStyle: "italic" }}>
Des résultats impressionnants pour notre projet.
</Typography>
<Typography variant="body2" sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}>
<Typography
variant="body2"
sx={{ mt: 2, textAlign: "right", fontWeight: "bold" }}
>
- Client 2
</Typography>
</CardContent>
@ -177,4 +225,4 @@ const Home = () => {
);
};
export default Home;
export default Home;