Using images with Flex-objects

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 }}" >
<img src="{{|first }}" alt="{{ object.title }}" >
<img src="{{ object.item_image.url }}" alt="{{ object.title }}" >
<img src="{{ }}" alt="{{ object.title }}" >

with no luck - what am I missing?

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!

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…



1 Like

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

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

  validation: loose
      type: file
      label: Image
        - image/*

Then in my template I have this:

    {% if object.image %}
        {% set image_data = object.image|first %}
        {% set image =[] %}
        <div class="image p-3 p-md-0 text-center">
            {{ image.cropResize(400, 200).html()|raw }}
    {% 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, it’s the same with objects -


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