https://avo.cool logo
Powered by
I wanted to add a style-attribute to a file fie...
# fields
w
I wanted to add a style-attribute to a file field, to make the image smaller. I read https://docs.avohq.io/4.0/html.htm and added a style, however, it is ignored. The simple test case with a text field:
Copy code
field :city, as: :text, html: { show: { content: { classes: "my-test-class", style: "background: red; text: white;" } } }
This applies the class, but not the style. Looking at https://github.com/avo-hq/avo/blob/main/app/components/avo/field_wrapper_component.html.erb, I can see that style, data and classes are applied on lines 3-5 for the wrapper component, and the classes and data being applied for the content on lines 22 and 23 - but it seems like the style was simply forgotten there? 😅 (Same for the label) Besides that, is there an easy way to make the preview image for a file field smaller? E.g. 512px squared, currently it takes up all available space 😄
m
Thread automatically created by Tim in #1141725718364045394
l
hey hey re image: https://docs.avohq.io/4.0/fields/external_image.html nevermind. I red the whole thing now
yes, CSS
target it using data attributes and you should be able to do wtv you want. you can take the markup from inspect element, give it to any llm and tell it to create the selector for that
@loud-jewelry-99127 can look into that bug for you. Can you open a GH issue for that?
l
Yes, we'll push a fix soon
l
I think it's time for a refactor for that API as well...
support more attributes, a better block-based DSL
l
This is fixed on avo 4.0.19
w
I solved it with this generic css:
Copy code
[data-field-type="file"] [data-slot="value"] img {
    max-height: 400px;
    object-fit: contain;
}
And I got the preview of PDFs working with:
Copy code
field :pdf, as: :file, accept: "application/pdf", hide_on: :index, format_display_using: -> { record.pdf.preview(resize_to_limit: [512, 512]).processed.image }
(together with installing MuPdf so that the built-in Rails PDF Preview works). This works well now, aside from the edit page, where the preview image is not shown, but just the generic file icon. This is handled here: https://github.com/avo-hq/avo/blob/7275c9f371cbbef0722b39278c9d99d206c244af/app/components/avo/fields/common/files/view_type/grid_item_component.html.erb#L10-L17 Even though I have a preview image for that pdf, it is not shown on the edit page. I'm not really deep into the whole ActiveStorage preview stuff. No need to fix that for me, it works well enough, just wanted to share this 🙂 Thanks again for the quick answers & fixes!
Ah, too bad, just noticed that by replacing format_(display_)using, I replaced the whole pdf file with a png file. That's not what I wanted 😅 Seems like I might have to edit the view component for my purpose...
Okay, got a solution. Ejected the view and changed the logic a bit. First check if its an audio or video and do the same as before. Then don't check if it is an image, but rather if it is previewable - if so, render the preview image. This should work for PDFs and actual images. The fallback is still just showing the file icon.
Copy code
<% if is_audio? %>
  <%= audio_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
<% elsif is_video? %>
  <%= video_tag(helpers.main_app.url_for(file), controls: true, preload: false, class: 'w-full') %>
<% elsif file.previewable? %>
  <%= image_tag file.preview(resize_to_limit: [700, 700]).url, class: "rounded-lg max-w-full h-auto self-start object-cover #{@extra_classes}", loading: :lazy, width: file.metadata["width"], height: file.metadata["height"] %>
<% else %>
  <show generic file icon>
<% end
l
Pretty cool! Do you want it to behave like this globally on the app or only for a subset of file fields?
w
For all - if a preview image can be generated somehow, why not show it? Not sure about all edge cases, though 😅
Small correction: I re-added the first 
<% if file.representable? && is_image? %>
, as otherwise regular images stopped working. So the whole change is just the additional 
% elsif file.previewable? %>
block (I also changed this to 
preview(...).processed.url
)
l
Awesome! Thanks for sharing!
2 Views
Previous
Powered by