improve central image functionality
This commit is contained in:
parent
8725e3fe72
commit
a6aab3aacc
|
@ -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": ""
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
32
src/edit.js
32
src/edit.js
|
@ -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>
|
||||||
|
|
20
src/save.js
20
src/save.js
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue