Picture gallery with Galleria and Content Query Web part

by Robi 13. August 2012 09:56
Following E. Struyf 's Blog for making a picture gallery from the assets library: Making an Image Gallery Inside the Asset Library: Part 1 - E. Struyf 's Blog http://www.estruyf.be/blog/making-an-image-gallery-inside-the-asset-library-part-1 I thought that it has to be a way to get pictures from picture gallery with the Content Query Web Part and modify the results so that it can work for the galleria. So, the first step of course would be to download all the necessary files. To download files go to the galleria we page and extract the zip file. You can copy all files to the Style library, where I made the JS folder to save the jQuery library file, downloaded from the www.jQuery.com web site. Galleria files  Download Galleria http://galleria.io/download/   Screen shot of the Style library\JS folder. For the galleria to work, you will need: Jquery library Galleria.classic.css Galleria.classic.min.js Galleria-1.2.7.min.js Classic-loader.gif Classic-map.png. XSL files Next thing to do is to modify the ContentQueryMain.xsl and ItemStyle.xsl. In ContentQueryMain you need to modify the div in which pictures will be displayed. In order to do that just add the class gallery to the div id=''{concat('cbqwp',$ClientId)}''. You will specify the branding later on for the .gallery class. ContentQueryMain.xsl  In ItemStyle.xsl you need to add a new xsl:template, which will be used for rendering pictures in CQWP. Important part here is to change the variable SafeLinkUrl. So to get the full picture not just the picture thumbnail you need to select the LinkUrl column for the UrlColumnName. ItemStyle.xsl <xsl:template name="ImageGallery" match="Row[@Style='ImageGallery']" mode="itemstyle">      <xsl:variable name="SafeLinkUrl">         <xsl:call-template name="OuterTemplate.GetSafeLink">          <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>         </xsl:call-template>     </xsl:variable>                      <img src="{@LinkUrl}"/> </xsl:template>  Gallery page Next thing to do is to create and modify the web part page where the gallery will be shown. Edit the file in advanced mode in SharePoint Designer 2010 and just after the PlaceHolderMain opening tag add the following code (modify reference to your script files if needed): <link type="text/css" rel="stylesheet" href="../../Style Library/js/galleria.classic.css"/> <script type="text/javascript" src="../../Style Library/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="../../Style Library/js/galleria.classic.min.js"></script> <script type="text/javascript" src="../../Style Library/js/galleria-1.2.7.min.js"></script> <script type="text/javascript"> $(document).ready(function(){     $(".gallery img").unwrap().unwrap();          $('.gallery').galleria({     width: 700,     height: 467 });     Galleria.loadTheme('../../Style Library/js/galleria.classic.min.js');     Galleria.run('.gallery');  }); </script> This code will add reference to the files in Style library, JavaScript, CSS,… $(".gallery img").unwrap().unwrap(); unwraps the pictures form the <li> tag and <ul> tag which CQWP adds when it displays the pictures and needs to be done so that galleria can step in action and create the actual gallery. Galleria.loadTheme and Galleria.run just runs the galleria to create the picture gallery.  At the end of the page, just after the </asp:content> add the style tag, which will apply background, height and width to the gallery div of the Content Query Web Part. This was set in ContentQueryMain.xsl  <style type="text/css">     .gallery{     width:700px;     height: 472px;     background: #000;     margin:auto;     text-align:center;     } </style> Content Query web part On the page add the CQWP and Edit Web part. For the picture source select the picture gallery where your pictures are saved. You can also specify filter for the pictures. What is important in the CQWP settings is that you apply the ItemStyle you previously created in ItemStyle.xsl called ImageGallery. Save the CQWP settings, save the page and refresh it. And the final result is: Robert Vončina Kompas Xnet d.o.o. robi@kompas-xnet.si

Tags:

SharePoint | SharePoint 2010 | Development

Kaj je Node.js?

by Rok Bermež 24. May 2012 12:43
Node.js je zadnji izmed dolge vrste programskih jezikov, APIjev, toolkitov, ki se trudijo biti zadosti 'cool', da bi jih uporabljali. V tem smislu nadaljuje tradicijo Railsov, AJAXa, Hadoopa ter do neke mere tudi HTML5 hypea. Praktično je nemogoče najti kakršnokoli spletno orientirano konferenco brez vsaj kakšnega predavanja na to temo, ki bo večkrat kot ne, popolnoma zmedlo poslušalce. Glede na to, da je tudi mene doletela ta čast, da bom na prihajajoči NT konferenci govoril o prav tej zadevi je smiselno, da se ji malce posvetimo tudi v Piki. Node.js, oziroma včasih zgolj Node, je strežniška rešitev za JavaScript oz. še bolj specifično, za prejemanje in odgovarjanje na HTTP zahtevke. Seveda se takoj pojavi vprašanje: Zakaj naj bi JavaScript poganjal karkoli izven brskalnika? Še posebej pa kar Strežnik ?!? Prva zadeva, ki jo moramo vedeti je, da Node sicer poganja JavaScript, ni pa tudi sam JavaScript. Sestavlja ga Googlov V8 JavaScript pogon, libUV ter vrsta vključenih knjižnic in je namenjen pisanju skalabilnih internetnih aplikacij. Hitro lahko pomislimo, da JavaScript ni najbolj primeren za upravljanje z viri na sistemskem nivoju in imeli bomo prav. A glede na to, da sam Node ni JavaScript temveč C program kateremu JavaScript zgolj pošilja navodila za upravljanje s črno magijo APIja vašega operacijskega sistema. Dejstvo je, da je JavaScript današnjim spletnim programerjem precej bližje kot C, kar samo po sebi vpliva na resen pogled na Node, saj jim omogoča napisati strežnik, ne da bi jim bilo potrebo poznati C, oziroma kakšen drug jezik. Kot pri ostalih jezikih, bo tudi tu primeren ogled 'živjo svet' primera: var http = require('http'); http.createServer(function (req, res) { res.writeHead(200, {'Content-Type': 'text/plain'}); res.end('Živjo svet\n'); }).listen(1337, "127.0.0.1"); console.log(Strežnik teče na http://127.0.0.1:1337/'); S klicem 'require' naložimo zahtevan modul (ki jih pri node.js ne manjka in skupnost sproti dodaja nove), v našem primeru http modul v spremenljivko, iz katere smo naredili spletni strežnik. Pri tem smo strežniku podali funkcionalnosti, ki na vsak zahtevek zgolj nastavijo HTTP header ter vrnejo statično besedilo in nastavili specifičen port ter IP naslov, na katerem naj strežnik posluša. Kako bomo poservirali več zahtevkov hkrati? Zelo enostavno, napisati nam ni treba prav nič dodatnega. Lepota Node.js je, da lahko s precej enostavnim in vsakdanjim JavaScriptov pridemo do teh rezultatov. Klici funkcij v node.js so načeloma vedno asinhroni in določijo še 'callback' fukncijo, ki se bo izvedla ko bo klic končan, tako klicajoči niti ni treba čakati na rezultate temveč lahko vmes obdeluje druge zahtevke. V klasičnem spletnem scenariju je komunikacija med spletnim strežnikom ter podatkovno bazo časovno najbolj zahteven del operacije. Node bo na vašem sistemu pustil manjši 'footprint' kot klasičen spleti strežnik in zaradi svoje asinhrone narave ne bo uporabljal virov med čakanjem na rezultat neke akcije. Tako na primer med klicem na podatkovno bazo, ki traja recimo 30 ms, ne čaka z alociranimi viri, temveč jih vmes uporabi za obdelovanje drugih zadev. Poanta Node-a je tako, da je izjemno hiter, enostavno skalira in zaradi uporabe JavaScripta tudi precej enostaven za uporabo. Ni pa srebrni metek, ki bi bil primeren za uporabo v vsakem scenariju. Med tem, ko se odlično obnese pri: - dogodkovno orientiranih sletnih aplikacijah ki skalirajo čez več odjemalčevih povezavah - na JSONu temelječih HTTP APIjih - podatkovnih aplikacijah, ki uporabljajo isto kodo na strežniku in odjemalcu se zaradi svoje 'interpreted' narave obnese nekoliko slabše pri zahtevnejših CPU operacijah. Prav tako bi se dalo zagovarjati, da aplikacija, ki poleg svoje funkcionalnosti v sebi vsebuje tudi spletni strežnik podre 'razdeljevanje odgovornosti' in s tem prispeva k kompleksnosti njenega vzdrževanja. Na račun JavaScripta pa.... se najverjetneje ne najde mnogo ljudi, ki bi spodnjem delu kode pripisali simpatičnost: if (typeof my_var !== "undefined" && my_var !== null) { // neki, neki } Tako je Node.js zanimiva zadeva, vredna ogleda, a če ste sedaj veliko investirali v Microsoftove tehnologije, najbrž ne ponuja bistvene prednosti pred uporabo Async Controllerjev, MVC4 Web APIja ter SingalRja.

Tags:

Development

Display members of AD group in SharePoint 2010

by Robi 9. December 2011 17:16
Hi, Because I got a question so many times if you can show members of AD groups on SharePoin site, I decided to build a web part that would replace the Site Users web part.   The usage is pretty simple, what you need to do is deploy a wsp package that you can find inside the bin\release folder.   Next step is to add a web part to your site and what you need to do is enter some information to access the Active Directory.   You need to enter: user name to connect to AD in the format: domain\username domain information for LDAP query in format of: DC=corp,DC=xnet,DC=si you need to enter FQDN of a domain controller to which the ldap query will be sent: xnet-dc01.corp.xnet.si Hopefully some one will find this web part usefull. You can find solution attached in a zip file.   For comments and suggestions please contact me at: robi@kompas-xnet.si THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.   There were some bug fixes so I published a new version of a Web Part.   Skupine Web Part_1.2.zip (219.37 kb)

Tags:

SharePoint | Development | SharePoint 2010

SharePoint User Code Service not starting

by Robi 17. January 2011 11:42
I tried to publish a sandbox solution on SharePoint Server and was getting error that Sandbox Code service server was not found. I checked in Central Administration and found out, that Microsoft SharePoint Foundation Sandboxed Code Service was running and that SharePoint 2010 User Code Host Service was set to automatic but not running. In the event logs, I found out, that I have errors in system logs: Event Id: 7031, 7034; source: Service Control Manager; details: The SharePoint 2010 User Code Host service terminated unexpectedly. I found out, that service account that was running Sandbox code service needs to have access to performance counters on the server. So what you need to do is pretty simple, you need to grant service account access to counters and you can do it by adding service account as a member of local group Performace Monitor Users in Server Manger.   Voila, after adding user to Performace Monitor Users everything works as expected.

Tags:

Administration | Development | SharePoint 2010

Bulletproof Cross-Browser CSS Techniques

by Rok Bermež 13. October 2010 09:44
I've written up a summary of all tehniques and tricks for cross-browser CSS coding I've learned over [More]

Tags:

ASP.NET | Design | Development | Visual Studio | Web

Calendar

<<  November 2017  >>
MonTueWedThuFriSatSun
303112345
6789101112
13141516171819
20212223242526
27282930123
45678910

View posts in large calendar

Page List

Month List