Publié le 21 mars 2014

Intégrer un module d’accès PASS sur votre site web

Mise à jour : Le site Pass.us à mis en ligne une nouvelle version de son gestionnaire de galeries permettant l’intégration grâce à un code à insérer sur votre site web, rendant, par le fait, obsolète cet article.

How to implement an access module for PASS galleries on your own website

J’ai reçu de nombreuses demandes de photographes (la plupart anglophone, d’où la traduction de cet article) me demandant comment j’avais bien pu intégrer un module d’accès à mes galeries PASS sur mon site Web.

I received many requests from photographers ( mostly English, that’s why I translated this post) wondering how I could integrate an access module to my PASS galleries on my own website.

Pour ceux qui prennent la conversation en route, j’ai créé un module permettant à mes client d’inscrire l’identifiant de leur galerie photos sur mon propre site web pour qu’ils soient redirigé sur le site pass.us où je stocke les galeries de mes clients. Ceci leur évitent d’avoir à retenir des adresses supplémentaires et compliquées du genre: http://nicolaslogerot.pass.us/clientgallery.

~~Vous pouvez voir ce module en action sur mon site en vous rendant sur cette page~~

For those who take the conversation in the way, I created a module for my customer where they can enter their ID photo gallery on my onw website so they are redirected to the site pass.us where I store the galleries of my clients. This avoids their having to remember additional and complicated web addresses like: http://nicolaslogerot.pass.us/clientgallery.

You can view this module in action on my website by visiting ~~this page~~

Il s’agit d’inscrire un bout de code (script) sur une page de votre site là où vous souhaitez implanter le module. Au vue des différents systèmes existants (WordPress, Joomla, Squarespace…. et bien d’autres systèmes ou simplement un site en Html…) il est difficile de savoir si cette solution fonctionne sur toutes les plateforme, mais le code est du HTML pure et dure donc à mon avis pas de soucis particuliers.

Par exemple sur un système fonctionnant sous WordPress, il suffit d’inscrire les lignes de code dans un nouvel article ou une nouvelle page. Attention à bien copier/coller le code donné plus bas en mode « Texte » et non en mode « Visuel » dans l’éditeur d’article de WordPress ou autres, sinon l’article va afficher un bout de code sur votre site et non restituer un formulaire avec bouton d’envoi.

Aussi pensez bien à remplacer « http://www.mondomaine.pass.us/ » par votre adresse web personnalisée de votre compte PASS, en n’oubliant pas le » / » à la fin.

It’s just a piece of code (script) on any page of your site where you want to locate the module. Because of all the different web and CMS systems (WordPress, Joomla, Squarespace …. and many others system, or simply a HTML website…) it would be difficult to know if this solution works on any platform, but it’s a simple HTML code so there is no particular worries in my opinion.

For example, on a system running under WordPress, simply enter lines of code in a new post or a new page. Make sure to copy and paste the code given below in « text mode » and not « Visual mode » editor in WordPress or other editor, otherwise the item will display a snippet of code on your site and not returned form with a submit button.

Also remember to replace « http://www.mydomain.pass.us/ » with your custom web address of your PASS account, and not forgetting the « / » at the end.

Donc voici le code à copier-coller:

So here’s the code to copy and paste:

  <html>
<head>
<script type="text/javascript">
function newWin(val)
{
    window.open("http://mondomain.pass.us/" + val);
}
</script>
</head>

<body data-rsssl=1 data-cmplz=1 data-rsssl=1 data-rsssl=1 data-rsssl=1 data-rsssl=1>
<form onsubmit="newWin(this.folder.value); return false;">
  <p ><label for="folder"></label><input class"fieldpass" type="text" name="folder" placeholder="Entrez l'identifiant"></p>
  <input type="submit" value="ACCÈS PHOTOS" class="buttonclass" />
</form>
</body>
</html>

Pour la mise en forme du bouton de validation, vous pouvez ajouter des style CSS à votre site en appelant le style class= »buttonclass » ou utiliser le style par défaut de vos butons « submit », mais là à vous de chercher, je ne peux pas le faire à votre place.

La seule chose que je puisse faire et de vous donner le lien d’un site web pour générer le style CSS de boutons que vous pouvez personnaliser, après, google est votre amis pour connaitre la méthode pour intégrer le style CSS dans votre site web:

http://www.cssbuttongenerator.com/

For formatting Submit button you can add CSS to your site by calling style class= »buttonclass » or use the default CSS style of your « submit » buttons, but this is up to you to seek, I can not do for you.

The only thing I can do for you is to give you the link of a website to generate buttons CSS style where you can customize it, after, google is your friend to know the method to incorporate CSS into your website: