Getting Image Object for Image In Library???

Highlighted
Tourist
47 0 1

Hi all

I am trying to create a reusable promo footer on the collections page. I was hoping to arbitrarily add content blocks etc to my collections page but the template is a section of its' own and you can't have sections inside sections.

So I have now gone down the snippets path to create a reusable footer promotion area but the main issue I'm having is I wanted to access the aspect_ratio of the image object previously uploaded in to a library..

I can't find any way to do this..

when using an image uploaded in to a section you can do stuff like: section.settings.image

 

Because I'd ideally like to be able to pull an image from the library as an image object.. Does someone know if this is possible?

0 Likes
Highlighted
Shopify Partner
21 0 9

Yes, you can get an image from its name, try something like:

{% assign hero=images['myhero.jpg'] %} for the image myhero.jpg in the files.  I use this to get image objects that have been saved in files from names in metafields.

see https://help.shopify.com/themes/liquid/objects.

Now you can use image attributes and filters on this, such as hero.width, hero.alt, hero | img_url.

To get the aspect ratio as a percentage do:

{% assign ratio = hero.height | times: 100.0 | divided_by: hero.width %}

 

3 Likes
Shopify Partner
12 0 0
        <div class="grid__item medium-up--one-quarter one-sixth small--one-half">
          <div class="text-center">
              {% assign image = block.settings.usp_icon  %}
	    <img src="{{ image | img_url  }}" alt="{{ image.alt }}">
            <p>{{ block.settings.usp }}</p></div>
        </div>
If I am getting the image object from a metafield how do I assign 'image' to an object?
At the moment {{ block.settings.usp_icon }} returns 'files/changed-01.png' which won't work with {% assign image=images['myhero.jpg'] %} .

The code above returns the image ok but I don't get the alt tag?

Thanks for any help!
0 Likes
Highlighted
Shopify Expert
2686 67 694

Well, why do you expect an alt tag for the image added this way -- there is nowhere to enter it as far as I know?

With metafields it is even more complex, as it depends on where this particular App stores its images -- some do store them at amazon aws...

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
Shopify Partner
12 0 0

Sorry ignore the metafields reference - it is an image from the image picker in the theme settings:

 

Looking at the documentation for the theme settings for the image picker – I should be able to get the alt tag, the image outputs ok:

 

‘In Liquid, the value of image_picker settings is either an image object (if an image has been selected and exists) or nil (if an image has not been selected, or the image doesn't exist). A URL for the image can be generated using the img_url filter. The image object also has built-in support for alt text.’

0 Likes
Highlighted
Shopify Expert
2686 67 694

Ah, right, my bad -- when you select image there is a "edit" button where you can actually edit ALT text.

Then you should be able to use it directly like this 

{{ block.settings.hero_slide.alt }}

(I just checked and this does work :) 

UPD2:

this:

{% assign image = block.settings.hero_slide %}
{{ block.settings.hero_slide.alt }}
{{ image.alt }} 

works as well.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
1 Like
Highlighted
Shopify Partner
12 0 0

Perfect - thanks!

0 Likes