Skip Navigation

[Gelöst] Portfolio of images with text overlay and link

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

Problem: I would like to create an image thumbnail gallery that includes a text overlay. The text overlay should appear over each thumbnail when the user hovers over the thumbnail.

Solution:
- Create a custom post type called "Portfolio Image" or something relevant to your site.
- Add an image custom field for the image and a single-line text custom field to hold the caption.
- Add any other custom fields or taxonomies necessary to create the search filters as shown in the example site.
- Create a custom search View of Portfolio Image posts, filtered by the desired fields and taxonomies.
- In the Loop of this View, output the image custom field and the caption custom field using Types shortcodes.
- Add markup, custom CSS, and/or custom JS that handles the interaction and animation for each element.

This support ticket is created vor 6 Jahren, 4 Monaten. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

Dieses Thema enthält 4 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von leilaG vor 6 Jahren, 4 Monaten.

Assistiert von: Christian Cox.

Author
Artikel
#1069213

We would like to create a portfolio of images with text overlay on hover that links to individual url's like the example below -
versteckter Link

Is this possible with toolset?

#1069393

Hi, this looks like something that could be accomplished with Toolset and your own custom CSS and/or JavaScript. Here's how I would set it up.
- Create a custom post type called "Portfolio Image" or something relevant to your site.
- Add an image custom field for the image and a single-line text custom field to hold the caption.
- Add any other custom fields or taxonomies necessary to create the search filters as shown in the example site.
- Create a custom search View of Portfolio Image posts, filtered by the desired fields and taxonomies.
- In the Loop of this View, output the image custom field and the caption custom field using Types shortcodes.
- Add markup, custom CSS, and/or custom JS that handles the interaction and animation for each element.

I can help you with most of this except the animation part. Let me know how you would like to proceed.

#1072481

Great! For the css do you mean we could achieve by adding something like this -
versteckter Link

#1074347

Yes I mean you will add your own custom code to create the animation effect, since that's not something that Toolset provides as a built-in feature. The example you provided looks like it accomplishes the overlay animation effectively, so it's probably a good place to start.

#1074832

Okay thanks, we will follow your instructions and start setting it up.