I am creating my portfolio in reactjs and I made thumbnails that you can click on to go to the website that I have created so they can see my work, but it opens in the same window. I would like to click on the thumbnail(image) and for it to open the link(website) in a new window(tab). Any ideas on how to get the link: "https://blogs.sw.siemens.com/", to open in a new window? I tried target="_blank" and it doesn't work. Any other ideas?
Here is the code for project.js file:
import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";
export default function Projects() {
return (
<section id="projects" className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-10 mx-auto text-center lg:px-40">
<div className="flex flex-col w-full mb-20">
<CodeIcon className="mx-auto inline-block w-10 mb-4" />
<h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
My Past Projects
</h1>
{/* <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
Description
</p> */}
</div>
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
className="sm:w-1/2 w-100 p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full object-cover object-center"
src={project.image}
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
</div>
</section>
);
}
Here is the code for data.js file:
export const projects = [
{
title: "Siemens Digital Industries Software",
subtitle: "Wordpress, PHP, HML, CSS and Javascript",
description:
"I worked with a development team on this project using a variety of front-end technologies to help build their blogs, podcasts, solid edge and Learning Management System utilizing LearnDash for the education certification site",
image: "./project-1.png",
link: "https://blogs.sw.siemens.com/",
},
{
title: "Signature Doors",
subtitle: "Java, MySQL",
description:
"I worked with a software development team on this project to help build a web application that calculates customer quotes, customer accounts, view notifications, keep track of orders and projects, inventory and CAD/CSR Department. Login: UN:[email protected]; PW: password",
image: "./project-2.png",
link: "https://apps.talixa.com/doors/login.faces",
},
{
title: "B & D Glass",
subtitle: "Wordpress, Elementor, PHP, HTML, CSS and Javascript",
description:
"I developed this website from start to finish and maintained it using a variety of front-end technologies such as Wordpress, PHP, HTML, CSS and Javascript",
image: "./project-3.png",
link: "https://banddglassllc.com/",
},
{
title: "Jones Insurance",
subtitle: "Wordpress, Elementor, PHP, HTML, CSS and Javascript",
description:
"I also developed this website from start to finish and maintained it using a variety of front-end technologies such as Wordpress, PHP, HTML, CSS and Javascript",
image: "./project-4.png",
link: "https://jonesinsurancewv.com/",
},
];
CodePudding user response：
Add the following as the callback for onClick for your image / whatever the wrapper element giving the url.
Define this function inside your Projects function.
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}
In your image element
<img
alt="gallery"
className="absolute inset-0 w-full h-full object-cover object-center"
src={project.image}
onClick={() => { openInNewTab(project.link) }}
/>
Full code snippet is given below
import { CodeIcon } from "@heroicons/react/solid";
import React from "react";
import { projects } from "../data";
export default function Projects() {
const openInNewTab = (url) => {
const newWindow = window.open(url, '_blank', 'noopener,noreferrer')
if (newWindow) newWindow.opener = null
}
return (
<section id="projects" className="text-gray-400 bg-gray-900 body-font">
<div className="container px-5 py-10 mx-auto text-center lg:px-40">
<div className="flex flex-col w-full mb-20">
<CodeIcon className="mx-auto inline-block w-10 mb-4" />
<h1 className="sm:text-4xl text-3xl font-medium title-font mb-4 text-white">
My Past Projects
</h1>
{/* <p className="lg:w-2/3 mx-auto leading-relaxed text-base">
Description
</p> */}
</div>
<div className="flex flex-wrap -m-4">
{projects.map((project) => (
<a
href={project.link}
key={project.image}
className="sm:w-1/2 w-100 p-4">
<div className="flex relative">
<img
alt="gallery"
className="absolute inset-0 w-full h-full object-cover object-center"
src={project.image}
onClick={() => { openInNewTab(project.link) }}
/>
<div className="px-8 py-10 relative z-10 w-full border-4 border-gray-800 bg-gray-900 opacity-0 hover:opacity-100">
<h2 className="tracking-widest text-sm title-font font-medium text-green-400 mb-1">
{project.subtitle}
</h2>
<h1 className="title-font text-lg font-medium text-white mb-3">
{project.title}
</h1>
<p className="leading-relaxed">{project.description}</p>
</div>
</div>
</a>
))}
</div>
</div>
</section>
);
}