Image as background

classic Classic list List threaded Threaded
3 messages Options
Reply | Threaded
Open this post in threaded view
|

Image as background

Gerritjan Koekkoek-2
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<[hidden email]>



Reply | Threaded
Open this post in threaded view
|

Re: Image as background

vmassol
Administrator
Hi Gerritjan,

> On 8 Feb 2017, at 13:16, Gerritjan Koekkoek <[hidden email]> 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<[hidden email]>
>
>
>

Reply | Threaded
Open this post in threaded view
|

Re: Image as background

Gerritjan Koekkoek-2
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<[hidden email]>



________________________________
From: users <[hidden email]> on behalf of Vincent Massol <[hidden email]>
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 <[hidden email]> 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<[hidden email]>
>
>
>