jekyll-cloudinary icon indicating copy to clipboard operation
jekyll-cloudinary copied to clipboard

Retrieve alt tags from cloudinary

Open danielcgold opened this issue 7 years ago • 3 comments

You can add alt tags from within Cloudinary. Is there a way to have those alt tags in the <img> tag after the site compiles?

danielcgold avatar Jul 23 '18 01:07 danielcgold

@danielcgold the plugin currently doesn't query Cloudinary's API at all, but it should be possible indeed.

nhoizey avatar Jul 23 '18 15:07 nhoizey

ah I see how it works. I did something like this locally and got it to work.

        image_to_search = image_src.split('.')[0] # remove the file extension
        image_to_search = image_to_search[1..-1] # remove the initial path slash
        
        uri = URI("https://api.cloudinary.com/v1_1/#{settings["cloud_name"]}/resources/image/upload/?public_ids[]=#{image_to_search}&context=true")
        req = Net::HTTP::Get.new(uri.to_s)
        req.basic_auth(settings['cloud_key'], settings['cloud_secret'])
        
        Net::HTTP.start(uri.host, uri.port, :use_ssl => true) do |http|
          response = http.request(req)
          if response.code == "200"
            source = JSON.parse(response.body)
            html_attr["alt"] = source['resources'][0]['context']['custom']['alt']
          end
        end

So for: {% cloudinary /mmm/1/DSC00040.jpg %} the messy part was removing the initial slash and the file extension to look up the image based on the public_id. Depending on the upload settings, this plugin could handle returning the image source as well -- but then it wouldn't work locally without making an API request.

I bet overriding the alt tags locally wouldn't be too hard and maybe https://github.com/nhoizey/jekyll-cloudinary/issues/12 could be added with the addition of the API stuff.

I'd be curious if you have thoughts on improving!

danielcgold avatar Jul 23 '18 17:07 danielcgold

@danielcgold this is really interesting!

I see a few improvements:

  • we should use Cloudinary's gem instead of building our own API calls
  • we should also add settings to activate such retrieval, which would default to false (querying Cloudinary for each image might take time, and people won't have any alt in Cloudinary)
  • maybe we could also allow developers to inject other data than alt in their Liquid templates: something like {% cloudinary my-image.jpg alt=api.alt width=api.width height=api.height %} or similar/better

Fixing #12 would be another big improvement, indeed.

nhoizey avatar Jul 26 '18 16:07 nhoizey