verbb / hyper

A Craft CMS plugin for managing links, focusing on user experience.
Other
22 stars 14 forks source link

Add a preview for OEmbed links #106

Closed benfeather closed 10 months ago

benfeather commented 10 months ago

What are you trying to do?

It would be helpful to have a preview when using Hyper to link videos via OEmbed.

What's your proposed solution?

Could you add the option to output a video preview for the link?

This could be another native field that we could add to the input.

preview

Additional context

No response

engram-design commented 10 months ago

I like the idea of this being another native field to include so it's not tied to the "Link" field. For example:

Screenshot 2023-12-06 at 8 20 12 pm

If I were to add the preview on the half-width link field to the left, it would look pretty unbalanced next to the "Link Text".

My immediate concern though, is how to format the preview so as not to take up oodles of the screen or in a too-small area. For example:

Screenshot 2023-12-06 at 8 50 31 pm
benfeather commented 10 months ago

Is it possible to configure field width in the Craft CP columns layout? The user could limit the preview to one or two columns and use less space.

link-cols

Another option would be to add a toggle to collapse or expand the preview.

engram-design commented 10 months ago

Updated for the next release. To get this early, run composer require verbb/hyper:"dev-craft-4 as 1.1.17".

I've also had to do some iframe wrangling to ensure it's responsive. Some providers like YouTube provide it, while others (X/Twitter) don't, and they don't look so hot being full-width, as there's a lot of white space (see above). YouTube on the other hand responds to the width and looks nice.

benfeather commented 10 months ago

I've updated the plugin, but I don't see a preview field:

fields-ver

fields

engram-design commented 10 months ago

Should be under "UI Elements"?

benfeather commented 10 months ago

Ah, my mistake! It's there, and it looks great. Thanks again.