Struggling to get a basic image implementation

🆘 Support
1

undefined method `file’ for :Dato::Local::FieldType::Gallery Did you mean? fill

I have been looking through documentation and trying some things like ;
<%= image_tag product.image.file.width(400).to_url %>
AND
<% product.image.each do |image| %>
<% link_to “/#{product.category.slug}/#{product.slug}.html” do %>
<%= image_tag “#{image.url}”, :class => “”, :alt => “#{image.title}” %>
<% end %>

Neither of which work

I did have aspirations to use some funky responsive image approach but right now i would settle to just get an image on my page!! lol

If my model allows a gallery of images do I get those on the page differently than if I only have one image for example

        <% end %>
2

Hey @cleanwell-ni welcome to Community! :slight_smile:

Have you seen this documentation page: https://www.datocms.com/docs/static-generators/middleman/image-manipulation

regarding your first example. The second one instead, depends how you’ve set up your project. If you want more info can you maybe sendo via private message or over Support page the project URL and maybe a link to your repo?

Cheers

3

Hi Matteo. I replied via email but i think maybe it is better to keep replies here as the email i send from is not associated with my DatoCMS account
SO i have tried even the most basic implementation of both single asset image file and gallery and i can get neither to work
I am now wondering if there is an issue with
a) permissions on my local machine and the imgix api?
b) compatibility with middleman 4.3.5 (newest version I think)
c) the gallery of images not being supported by the dato gem?

I can give you access to the repo, but it is not deployed anywhere so you would have to do a local deployment, using RVM 2.6.4 and bundler 1.17.4? Is this a headache? I know running multiple versions of ruby etc can be a nuisance

Dave

4

Combining the two sounds interesting. Do you have any resources/examples on how to do that? I hjave eventually managed to get a basic image to appear.

  1. Is it possible that the word image is reserved within ruby or middleman? I changed my field name to photo in stead of image.
  2. Is it likely that it is not possible to pass it through the middleman image_tag helper? When i reverted back to I had more success, not sure if this alone made the difference! lol

Do you know which imgix methods are exposed in the dato gem. I have had success with width and height (w:200, h:100) but I can’t seem to refer to any others like ar: or crop: etc. It would be good to have a list of what will or will not work

On a related note: How do i access things within the SEO Field, is it just a case of adding on or do I need to traverse through with a do loop like with a gallery field? i.e would product.seo.description get me the description I enter in the SEO field of a product. I have tried it and it doesn’t seem to work but it could be for a different reason, so any pointers on the syntax much appreciated

Finally do you have a resource or reference for ruby/middleman syntax for working with datoCMS and accessing records based on conditionals or multiple conditionals. Like loop through all records that contain a certain string, or only the first 5 records of a group of 10

5

feel free to send me the link to the repo so that I can have a look and suggest some changes there directly. Or see where it doesn’t work!

6

regarding the parameters of Imgix, we should support them all, look here this: https://www.datocms.com/docs/static-generators/middleman/image-manipulation#example

And for the SEO you should be able to get everything in one go using item.seo_meta_tags without looping. Please have a look a that and let me know. Again happy to help directly on your repo if that helps.

The last one seems to me more a Ruby thing rather than Middleman or Dato, am I right? Again I can help directly on the code if you wish.

Cheers

7

Hey @cleanwell-ni, here’s what I’m using for responsive image sizing: Edit images info in html text fields / images not showing nicely in html fields

It works for simple cases where you know the image size (eg. 100vw), but it’s not perfect. I’m definitely looking to improve it!

1 Like
8

Does the datocms focalpoint work with imgix focalpoint. namely by calling fit: ‘crop’, crop: ‘focalpoint’ will the image honour the focalpoint set in datocms

9

You should also get the focal point information from your asset and pass it as an Imgix param, like in this example:

<img src="<%= work.cover_image.url(w: 600, h: 100, fm: 'jpg', auto: 'compress', fit: 'crop', crop: 'focalpoint', 'fp-x': work.cover_image.focal_point['x'], 'fp-y': work.cover_image.focal_point['y']) %>" />

10

Doesn’t seem to recognise .focal_point[‘x’]
indeed doesn’t recognise focal_point OR focalPoint
should there by another identifier before the focal_point like metadata or something?
Dave

I have a promising error message like this

undefined method `x’ for {“x”=>0.46, “y”=>0.3}:ActiveSupport::HashWithIndifferentAccess, when i try and print <%= blog.featured_photo.focal_point.x %> mlooks like it is reading x and y coordinates

I feel like I am nearly at the finishing post!! lol

11

ok managed to get this sorted out, still a few glitches but mostly working

1 Like