add svg icons over the image

Tagged: custom icon

This topic has 3 replies, 2 voices, and was last updated 2 years, 3 months ago by David Beckwith.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
December 2, 2020 at 3:00 am #23604

Carlo
Participant

Hi there,

I need to show a svg icon over the image of each card (base card style).

The icon should be different based on the category of the related post.

If it’s not possible to pick the icon “automatically”, I can create an acf custom field (field type image -> image array ) and manually add the right image in that field for each post.

I have searched the forum and tried some solutions with no success so far.

Thank you for your support.

December 2, 2020 at 8:22 am #23633

David Beckwith
Participant

Hi there,

Tom provides a list of the available hooks in WPSP here:

You could then hook your ACF field content into the post wrapper, and a little CSS to position it over the image.

December 2, 2020 at 10:13 am #23637
Carlo
Participant
Hi David,

the link is missing 🙂

Anyway, I got it. I was going crazy because it was not working but then I found out that… wordpress had not get the icon I put in the custom field’s post. Updating the post again did the trick 😀

About the css, I have added a class to the icon and stylized it this way:
```
                            position: absolute;
                            bottom: 230px;
                            width: 60px;
```
The hook is wpsp_before_title.
The aim is to have the icon over the image (basic card style) in the top area.

Is it ( “wpsp_before_title” hook in combination with the css I showed you above) a good approach or would you suggest something better?
December 20, 2020 at 9:17 am #24430

David Beckwith
Participant

Glad to hear you found the answer. That method of hook and CSS is what i would use! Sorry for the late reply.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

[Support request] add svg icons over the image