DEV Community

Discussion on: Daily Hacktoberfest Miscellaneous discussion (October 1st)

Collapse
 
ben profile image
Ben Halpern

I just created an issue in our repo that folks are welcome to jump on!

Framed Image liquid tag #4181

Is your feature request related to a problem? Please describe.

As a user I might want to add an image to the site and automatically "frame" it in another image. I just think this would be kind of fun.

What I mean is that I can add an image from a URL that will then get added into another image based on existing templates.

A template like this:

So if I had a picture of a puppy I could put it into that template using two liquid tag params like such...

{% framedimage https://i.imgur.com/mygreatpuppypic.jpg iphone-in-hand %}

I just think this could be a lot of fun.

Describe the solution you'd like

The implementation as I'm seeing it would actually be a pretty straightforward use of Cloudinary, which we already use all over the site for image manipulation and serving.

Details here...

cloudinary.com/documentation/image...

It would plug into the Cloudinary Ruby library in some way like this...

cl_image_tag("iphone-in-hand.jpg", :overlay=>"https://i.imgur.com/mygreatpuppypic.jpg", :width=>0.9, :gravity=>"north_east", :opacity=>70, :effect=>"brightness:50", :crop=>"scale")

Describe alternatives you've considered

Alternative to the Cloudinary API thing, it might make sense to thread the two images together using HTML and CSS instead. That might be the more appropriate way to do this.

Additional context

The way I see this is that we could have a fun library of "frames", each of which could have an associated slug of sorts. The slug is used as the second argument for the liquid tag.

This feature could occasionally be useful, but will always be fun. And it stretches the magic of our liquid tag format.

Here is an example of a recently merged liquid tag PR: github.com/thepracticaldev/dev.to/... for reference on how these are created.