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

lclaude
Topic Author
Offline
Premium Member

8 years 10 months ago - 8 years 10 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: 8 years 10 months ago by lclaude. Reason: solved

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

micker
Offline
Administrator

8 years 10 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

Code:

<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

8 years 10 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...

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

micker
Offline
Administrator

8 years 10 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
Premium Member

8 years 10 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
Premium Member

8 years 10 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

Code:

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 :

Code:

<?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.