fluid icon indicating copy to clipboard operation
fluid copied to clipboard

Implement Media Filters

Open hishamco opened this issue 4 years ago • 9 comments

This should include: img_tag and video_tag at least

hishamco avatar Mar 17 '21 13:03 hishamco

Explain how you think these should work. I looked through the Liquid doc and didn't see them there.

What type of value would these operate on? What would these output?

deanebarker avatar Oct 12 '21 17:10 deanebarker

@deanebarker please refer to https://shopify.dev/api/liquid/filters/media-filters#img_tag and https://shopify.dev/api/liquid/filters/media-filters#video_tag

hishamco avatar Oct 12 '21 17:10 hishamco

The filters on that page are Shopify-specific. Do you want these for raw Fluid, Fluid used as a ViewEngine, or Fluid used in some application?

deanebarker avatar Oct 12 '21 18:10 deanebarker

While Fluid based on Liquid, such filters will be a plus, moreover they will be helpful for Orchard Core

hishamco avatar Oct 12 '21 18:10 hishamco

But, again, those filters aren't technically on Liquid. They're part of Shopify.

Yes, but the problem is that forming a path to anything requires knowledge of where that thing is. In Shopify, it looks like these filters work on some kind of image value?

So we'd need two things:

  1. An ImageValue based on FluidValue
  2. Some knowledge of the URL path to that image

This is theoretically possible in raw Fluid, but I don't know how helpful it would be.

If you want to use this in Orchard (which makes sense because Orchard has knowledge of the URL pathing) , then I feel like this is a ticket for that project.

deanebarker avatar Oct 12 '21 18:10 deanebarker

If you want to use this in Orchard (which makes sense because Orchard has knowledge of the URL pathing) , then I feel like this is a ticket for that project.

There are some project drive Orchard Core project, but that doesn't mean it could be useful for other project, BTW if some filters are Orchard Core specific we could add them in OC, thanks for Fluid extensibility

Thanks for your feedback

hishamco avatar Oct 12 '21 18:10 hishamco

I am in favor of implementing Shopify's specific filters or tags as long as they are physically separated. For instance we could have a dedicated nuget package, with the theming tags, ... Though some of it might not work at all since they also rely on their content model (page, blog, products, ...).

This way someone who wants to remain bound to the official language won't have to answer to support these.

There might already be some filters that are not officially in Liquid, but are nice to have. These might have to move eventually, or at least be optional.

sebastienros avatar Oct 12 '21 18:10 sebastienros

I would probably do this as an identifier on a new value class? If you do it as a filter, then it could be used on something which doesn't have a URL, which wouldn't make sense.

Totally untested code...

public class ImageValue : FluidValue
{
  public static string PathTemplate { get; set; }

  private string _filename;

  public ImageValue(string filename)
  {
    _filename = filename;
  }

  protected override FluidValue GetValue(string name, TemplateContext context)
  {
    if(!string.IsNullOrWhiteSpace(PathTemplate) && name == "url")
    {
      return string.Format(PathTemplate, _filename);
    }
    return NilValue.Instance;
  }

  [lots of other stuff here]
}


ValueTask<FluidValue> ImageTag(FluidValue input, FilterArguments arguments, TemplateContext context)
{
  return new StringValue("<img src=\"" + input.ToStringValue() + "\">";
}
TemplateOptions.Default.Filters.AddFilter("img_tag", ImageTag);

Then you could do this in C#:

ImageValue.PathTemplate = "/images/{0}";

context.SetValue("main_image", new ImageValue("main_image.png"));
context.SetValue("header_image", new ImageValue("main_image.png"));

And in Fluid:

{{ main_image.url | img_tag }}

deanebarker avatar Oct 12 '21 18:10 deanebarker

@deanebarker are you interest to submit a PR for this?

hishamco avatar Oct 27 '21 16:10 hishamco