improve central image functionality

This commit is contained in:
Ray Elliott 2022-07-25 15:02:12 +01:00
parent 8725e3fe72
commit a6aab3aacc
4 changed files with 53 additions and 13 deletions

View File

@ -22,14 +22,14 @@
"type": "string", "type": "string",
"source": "attribute", "source": "attribute",
"selector": ".img-primary", "selector": ".img-primary",
"attribute": "src", "attribute": "data-src",
"default": "" "default": ""
}, },
"imgUrlHover": { "imgUrlHover": {
"type": "string", "type": "string",
"source": "attribute", "source": "attribute",
"selector": ".img-secondary", "selector": ".img-secondary",
"attribute": "src", "attribute": "data-src",
"default": "" "default": ""
} }
} }

View File

@ -9,6 +9,7 @@ import {
} from "@wordpress/block-editor"; } from "@wordpress/block-editor";
import { import {
__experimentalNumberControl as NumberControl, __experimentalNumberControl as NumberControl,
Button,
ToggleControl, ToggleControl,
Panel, Panel,
PanelBody, PanelBody,
@ -121,10 +122,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
}} }}
allowedTypes={["image"]} allowedTypes={["image"]}
multiple={false} multiple={false}
labels={{ title: "Central Image" }}
mediaPreview={ mediaPreview={
attributes.imgUrl !== "" ? ( attributes.imgUrl !== "" ? (
<div>
<img src={attributes.imgUrl} alt="" /> <img src={attributes.imgUrl} alt="" />
<Button
onClick = {() => {setAttributes({ imgUrl: "" })}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : ( ) : (
<p>No image selected.</p> <p>No image selected.</p>
) )
@ -132,6 +141,9 @@ export default function Edit({ attributes, setAttributes, clientId }) {
/> />
</PanelRow> </PanelRow>
<PanelRow>
</PanelRow>
<PanelRow> <PanelRow>
<MediaPlaceholder <MediaPlaceholder
onSelect={(img) => { onSelect={(img) => {
@ -140,10 +152,18 @@ export default function Edit({ attributes, setAttributes, clientId }) {
}} }}
allowedTypes={["image"]} allowedTypes={["image"]}
multiple={false} multiple={false}
labels={{ title: "Central Image On Hover" }}
mediaPreview={ mediaPreview={
attributes.imgUrlHover !== "" ? ( attributes.imgUrlHover !== "" ? (
<div>
<img src={attributes.imgUrlHover} alt="" /> <img src={attributes.imgUrlHover} alt="" />
<Button
onClick = {() => {setAttributes({ imgUrlHover: "" })}}
isSmall={true}
isDestructive={true}
>
Remove
</Button>
</div>
) : ( ) : (
<p>No image selected.</p> <p>No image selected.</p>
) )
@ -180,8 +200,12 @@ export default function Edit({ attributes, setAttributes, clientId }) {
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
<img className="img" src={attributes.imgUrl} /> { attributes.imgUrl !== '' ? (
<img className="img" src={attributes.imgUrlHover} /> <img src={attributes.imgUrl} />
) : null }
{ attributes.imgUrlHover !== '' ? (
<img src={attributes.imgUrlHover} />
) : null }
</div> </div>
</div> </div>
</div> </div>

View File

@ -31,8 +31,24 @@ export default function save({ attributes }) {
<div className="inner-content"> <div className="inner-content">
<div className="image-hover"> <div className="image-hover">
<img className="img img-primary" src={attributes.imgUrl} /> {attributes.imgUrl !== "" ? (
<img className="img img-secondary" src={attributes.imgUrlHover} /> <img
className="img-primary"
src={attributes.imgUrl}
data-src={attributes.imgUrl}
/>
) : (
<span class="img-primary" data-src={attributes.imgUrl} />
)}
{attributes.imgUrlHover !== "" ? (
<img
className="img-secondary"
src={attributes.imgUrlHover}
data-src={attributes.imgUrlHover}
/>
) : (
<span class="img-secondary" data-src={attributes.imgUrlHover} />
)}
</div> </div>
</div> </div>
</div> </div>

View File

@ -175,20 +175,20 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
& > .img { & > img {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
inset: 0; inset: 0;
object-fit: cover; object-fit: cover;
&:nth-child(2) { &:nth-of-type(2) {
transition: opacity var(--duration__image-hover); transition: opacity var(--duration__image-hover);
opacity: 0; opacity: 0;
} }
} }
&:hover > .img { &:hover > img {
&:nth-child(2) { &:nth-child(2) {
opacity: 1; opacity: 1;
} }