Using images with Flex-objects

Support
1

Hi, I’m having a look at Flex-objects as I think it might suit an artist’s portfolio I’m building - there are artworks plus related prints for sale so I thought I could have a directory of artworks, and a directory of prints and relate the two: if I look at an artwork I want to see which size prints might be available. But I’d also like to just show a listing of prints. So it seems a good fit.

I’m struggling with the image path. I’ve added the image upload field, and I can see where grav is storing the image but when I try to show it I’m getting an empty string.

my twig is:
{% if object.item_image %}
show the image - and this if is successful because i see the alt tag
{% endif %}

within the if I’ve tried:
<img src="{{ object.item_image|first }}" alt="{{ object.title }}" >
or
<img src="{{ object.item_image.media|first }}" alt="{{ object.title }}" >
or
<img src="{{ object.item_image.url }}" alt="{{ object.title }}" >
or
<img src="{{ object.item_image.media.url }}" alt="{{ object.title }}" >

with no luck - what am I missing?

2

Hello, i’m really interested in your project, as I am exploring the possibilities of flex-objects applied to portfolios.
Would you be so kind to share the blueprint of the flex-object, as a starting point?
I could offer some help, once I’ve been able to replicate the scenario.
Thank you!

3

Hi Marco,

I’ve been busy but will get on to this - I’d like to solve it too as have a rental website and a portfolio website that would be great with flex-objects and images…

Best,

Dan

1 Like
4

In my custom flext-objects blueprint I have config and image field as:

config:
  data:
    storage:
      class: 'Grav\Framework\Flex\Storage\FolderStorage'
      options:
        folder: user-data://objects-folder

form:
  validation: loose
  fields:
    image:
      type: file
      label: Image
      accept:
        - image/*

Then in my template I have this:

    {% if object.image %}
        {% set image_data = object.image|first %}
        {% set image = object.media.all[image_data.name] %}
        <div class="image p-3 p-md-0 text-center">
            {{ image.cropResize(400, 200).html()|raw }}
        </div>
    {% endif %}

Key point here - to store objects folder based (storage.class: 'Grav\Framework\Flex\Storage\FolderStorage') so that images would save within that folder when no destination provided. Then, like with pages page.media, it’s the same with objects - object.media

3 Likes
5

Hi Karmalakas, I’ve finally had time to work on Flex-objects and your tips really helped - I’ve got it set up now. Thanks again.

1 Like