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

More
8 years 3 months ago - 8 years 2 months ago #59151 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 2 months ago by lclaude. Reason: solved

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

More
8 years 3 months ago #59152 by micker
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.

More
8 years 3 months ago #59166 by ggppdk
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.

More
8 years 3 months ago #59169 by micker
thanks for correction

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.

More
8 years 3 months ago #59179 by lclaude
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.

More
8 years 2 months ago #59195 by lclaude
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.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.298 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline