[xwiki-users] stylesheet extension challenge
Hi, Would like to set a backgroundImage dynamically (I have attached 25 jpg files to a page) If I add this velocity code into my wiki page it works! {{velocity}} [[image:Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg||width="100%"]] {{/velocity}} If I add this same code in a stylesheet extension object: #document-title{ background:transparent url($doc.getAttachmentURL("Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg")) no-repeat scroll right center; } I get this result if I inspect the CSS in the browser: background:transparent url(/xwiki/bin/download/Sandbox/change%2Ddocument/Photos.CdLSWorldbanners%407.jpg) no-repeat scroll right center Any suggestions if this CAN work, and if possible; what am I doing wrong? Gerritjan
The CSS is cached, so you get a different image only if you do a page reload with force clear cache. If you want a different image when you reload the page then you have to either keep displaying the image from the page content or use JavaScript. On Fri, Feb 28, 2014 at 6:06 PM, Gerritjan Koekkoek <[email protected]> wrote:
Hi,
Would like to set a backgroundImage dynamically (I have attached 25 jpg files to a page)
If I add this velocity code into my wiki page it works! {{velocity}} [[image:Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg||width="100%"]] {{/velocity}} If I add this same code in a stylesheet extension object:
#document-title{ background:transparent url($doc.getAttachmentURL("Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg")) no-repeat scroll right center; }
I get this result if I inspect the CSS in the browser: background:transparent url(/xwiki/bin/download/Sandbox/change%2Ddocument/Photos.CdLSWorldbanners%407.jpg) no-repeat scroll right center
Any suggestions if this CAN work, and if possible; what am I doing wrong?
Gerritjan _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
The initial load is not happening The images do not need to change on this page... If i Have different pages with different images it is ok Verstuurd vanaf mijn iPhone
Op 28 feb. 2014 om 17:43 heeft Marius Dumitru Florea <[email protected]> het volgende geschreven:
The CSS is cached, so you get a different image only if you do a page reload with force clear cache. If you want a different image when you reload the page then you have to either keep displaying the image from the page content or use JavaScript.
On Fri, Feb 28, 2014 at 6:06 PM, Gerritjan Koekkoek <[email protected]> wrote:
Hi,
Would like to set a backgroundImage dynamically (I have attached 25 jpg files to a page)
If I add this velocity code into my wiki page it works! {{velocity}} [[image:Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg||width="100%"]] {{/velocity}} If I add this same code in a stylesheet extension object:
#document-title{ background:transparent url($doc.getAttachmentURL("Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg")) no-repeat scroll right center; }
I get this result if I inspect the CSS in the browser: background:transparent url(/xwiki/bin/download/Sandbox/change%2Ddocument/Photos.CdLSWorldbanners%407.jpg) no-repeat scroll right center
Any suggestions if this CAN work, and if possible; what am I doing wrong?
Gerritjan _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
$doc.getAttachmentURL is used for files attached to $doc, i.e. the current document, so you either use $doc.getAttachmentURL('fileName') or $xwiki.getAttachmentURL('Space.Page', 'fileName') Hope this helps, Marius On Feb 28, 2014 6:07 PM, "Gerritjan Koekkoek" <[email protected]> wrote:
Hi,
Would like to set a backgroundImage dynamically (I have attached 25 jpg files to a page)
If I add this velocity code into my wiki page it works! {{velocity}} [[image:Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg||width="100%"]] {{/velocity}} If I add this same code in a stylesheet extension object:
#document-title{ background:transparent url($doc.getAttachmentURL("Photos.CdLSWorldbanners@${mathtool.random(1, 25)}.jpg")) no-repeat scroll right center; }
I get this result if I inspect the CSS in the browser: background:transparent
url(/xwiki/bin/download/Sandbox/change%2Ddocument/Photos.CdLSWorldbanners%407.jpg)
no-repeat scroll right center
Any suggestions if this CAN work, and if possible; what am I doing wrong?
Gerritjan _______________________________________________ users mailing list [email protected] http://lists.xwiki.org/mailman/listinfo/users
participants (3)
-
Gerritjan Koekkoek -
Gerritjankoekkoek＠gmail.com
-
Marius Dumitru Florea