[xwiki-users] Image as background
Hi, I have a attached image on a page. My aim is to use the image as a background image, So the resulting HTML should be <div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div> So in the HTML-macro I have a $doc.getAttachmentURL('xxx.png') But executing it it looks like the wiki-engine is also transforming the "background-image:" as a wiki image, so I get resource not found errors? Any suggestion how to wrap? Gerritjan Koekkoek Vader van Rai Koekkoek (cdls) en voorzitter vereniging CdLS Visit our website<http://www.cdlsworld.org> Facebook<https://www.facebook.com/gerritjan.koekkoek> email<[email protected]>
Hi Gerritjan,
On 8 Feb 2017, at 13:16, Gerritjan Koekkoek <[email protected]> wrote:
Hi,
I have a attached image on a page.
My aim is to use the image as a background image,
So the resulting HTML should be
<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>
So in the HTML-macro I have a $doc.getAttachmentURL('xxx.png')
But executing it it looks like the wiki-engine is also transforming the "background-image:" as a wiki image, so I get resource not found errors?
Any suggestion how to wrap?
The best practice is to use a SSX: http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial Note: Re the HTML macro please paste our exact content. The HTML macro will clean the HTML by default to make sure it generates valid XHTML. To prevent this cleanup , use clean=“false”. See the doc for the HTML macro for more details. Thanks -Vincent
Gerritjan Koekkoek Vader van Rai Koekkoek (cdls) en voorzitter vereniging CdLS Visit our website<http://www.cdlsworld.org> Facebook<https://www.facebook.com/gerritjan.koekkoek> email<[email protected]>
I tried to use SSX as best practise. I used below CSS3: .container-with-background { width: 100%; height: 500px; background-color: blue; background: url("$xwiki.getAttachmentURL($doc, ${xwiki.getDocument($doc).getObject('WaihonaCode.centresExpertiseClass').photo})") no-repeat center; background-size: cover; background-clip: padding-box; } Blue is just a color in this example, I Actually use a color related to the primary-color of color theme (flamingo) This works as long as $doc = page holding the SSX object. But I actually have a class, sheet and object page. So $doc in my case is the page holding the object. This returns a error: [Error] Failed to load resource: the server responded with a status of 404 (Not Found) ($xwiki.getAttachmentURL($doc, ${xwiki.getDocument($doc).getObject('WaihonaCode.centresExpertiseClass').photo}), line 0) The url generated is: ...ssx/space/($xwiki.getAttach...) Is there a way of accessing the variables required to call getAttachmentURL(); Full-doc name and a Object-property from the SSX? Or would it be, in this case, better to generate inline CSS in the sheet? (and use the Clean=false parameter) Gerritjan Koekkoek Vader van Rai Koekkoek (cdls) en voorzitter vereniging CdLS Visit our website<http://www.cdlsworld.org> Facebook<https://www.facebook.com/gerritjan.koekkoek> email<[email protected]> ________________________________ From: users <[email protected]> on behalf of Vincent Massol <[email protected]> Sent: 08 February 2017 13:20:04 To: XWiki Users Subject: Re: [xwiki-users] Image as background Hi Gerritjan,
On 8 Feb 2017, at 13:16, Gerritjan Koekkoek <[email protected]> wrote:
Hi,
I have a attached image on a page.
My aim is to use the image as a background image,
So the resulting HTML should be
<div style="background-image: url(http://i54.tinypic.com/4zuxif.jpg)"></div>
So in the HTML-macro I have a $doc.getAttachmentURL('xxx.png')
But executing it it looks like the wiki-engine is also transforming the "background-image:" as a wiki image, so I get resource not found errors?
Any suggestion how to wrap?
The best practice is to use a SSX: http://platform.xwiki.org/xwiki/bin/view/DevGuide/SkinExtensionsTutorial Note: Re the HTML macro please paste our exact content. The HTML macro will clean the HTML by default to make sure it generates valid XHTML. To prevent this cleanup , use clean=“false”. See the doc for the HTML macro for more details. Thanks -Vincent
Gerritjan Koekkoek Vader van Rai Koekkoek (cdls) en voorzitter vereniging CdLS Visit our website<http://www.cdlsworld.org> Facebook<https://www.facebook.com/gerritjan.koekkoek> email<[email protected]>
participants (2)
-
Gerritjan Koekkoek -
Vincent Massol