In item vue : how can I have an image behind the item

lclaude
Topic Author
Offline
Expert Boarder

2 years 8 months ago - 2 years 8 months ago #59151 by lclaude

In item vue : how can I have an image behind the item was created by lclaude

Hello,

I want to have a picture displayed in the background of the normal viewing of a flexi item. Behind the title and all FC fields.
I want this only for the item layout.
This picture is in a FC field.

I think I have to make a new template for that. But I don't know how to display an image in the background.

Can you help me, please?

Laurent

Last edit: 2 years 8 months ago by lclaude. Reason: solved

Please Log in or Create an account to join the conversation.

micker
Offline
Administrator

2 years 8 months ago #59152 by micker

Replied by micker on topic In item vue : how can I have an image behind the item

i think :
diplicate your item template
put your field inside render only position
check your div for background

<div style="background:<?php echo $item->fields["YOURFIELDNAME"]->display; ?>;">
">
....
</div>

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

ggppdk
Offline
Administrator

2 years 8 months ago #59166 by ggppdk

Replied by ggppdk on topic In item vue : how can I have an image behind the item

Hello

a small correction to micker's answer:
1. edit layout and add field into the renderonly position
2. use thumbnail URLs of all images (gallery mode) (thumbnail sizes: small, medium, large)
e.g.
<div style="background:<?php echo $item->fields["YOURFIELDNAME"]->thumbs_src[0]; ?>;">
">
...
</div>

See more here:
About custom display of image / gallery field

-- FLEXIcontent is Free but involves a big effort on our part.
Like the our support? (for a bug-free FC, despite having a long list of functions) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing with a 5-star review. Thanks!

Please Log in or Create an account to join the conversation.

micker
Offline
Administrator

2 years 8 months ago #59169 by micker

Replied by micker on topic In item vue : how can I have an image behind the item

thanks for correction

Please Log in or Create an account to join the conversation.

lclaude
Topic Author
Offline
Expert Boarder

2 years 8 months ago #59179 by lclaude

Replied by lclaude on topic In item vue : how can I have an image behind the item

Hello,

Thank you for your help, I'll test that ASAP.
Merry Christmas to you

Laurent

Please Log in or Create an account to join the conversation.

lclaude
Topic Author
Offline
Expert Boarder

2 years 8 months ago #59195 by lclaude

Replied by lclaude on topic In item vue : how can I have an image behind the item

Hello,

Not sure it's the best way, but here is what I done. For feedback and sharing.

- duplicate the template 'default'
- edit the Item layout
- select the item_html5.php
- "load/customize the system's default"
- I didn't find where to put the div you talk, so I add

style="background: url(<?php echo $item->fields["MYFIELDNAME"]->{"display_medium_src"} ?>) no-repeat center 0 / 100%;"

at the line 66 of item_html5.php, so now it's like that :

<?php echo '<'.$mainAreaTag; ?> id="flexicontent" class="<?php echo $page_classes; ?> group" style="background: url(<?php echo $item->fields["MYFIELDNAME"]->{"display_medium_src"} ?>) no-repeat center 0 / 100%;" <?php echo $microdata_itemtype_code; ?>>

Not sure if it's the best way... but it works

You can note:
- I add the "url()" parameter in the background property
- with "no-repeat center 0 / 100%" it works fine with my responsive template

Laurent

Please Log in or Create an account to join the conversation.