1 Reply Latest reply on Nov 5, 2013 6:29 PM by xpan

    Layer coordinates + width to CSS format

    xpan

      Hi, all.

      I'm a designer and my coding skills are ever fading since the mid 10's when I no longer had to code my own sites.

      Nowadays I'm struggling with CSS / JS / HTML again to build the latest version of my portfolio site.

      But to get to the point, my problem is I have a PSD file with several images layed out in a very irregular grid system that I'm exporting and, basically, assigning them the same positions they have on my PSD to the site's CSS.

      The thing is there are a lot of images and I wanted an automated way of assembling the CSS code by exporting and concatenating strings to a txt file that would later be pasted in my CSS.

       

      I've found in this forum that there are ways of getting the X and Y positions of a layer, is there a way of knowing it's width?

      Also, is there anyway I can have a result like this written out on a txt files of every layer in my PSD:

       

      .layer_name {

          width:28.02%;

          position:absolute;

          left: 21.45%;

          top: 117.34%;

       

      these percentages are a simple formula to scale and distribute the images accondingly in the browser on window resize:

      width = (image.width/1920)*100;

      left = (image.x/1920)*100;

      top = (image.y/1920)*100;

       

      That would be super helpful as I'd already have all my CSS written by PS, basically.

      Is there any pointers on how to get those layer infos and also how to concatenate strings on JSX?

       

      Thank you!

        • 1. Re: Layer coordinates + width to CSS format
          xpan Level 1

          Well, I got the second part in a separate JS file (of course some values would be replaced with the dynamic data from the layers). This is what I have so far:

           

           

          <script>

          function myFunction()

          {

          var layerName = 'layer_name';

           

           

          var widthValue = 350/1920*100;

          var width = Math.round(widthValue*100) / 100;

           

           

          var leftValue = 1024/1920*100;

          var left = Math.round(leftValue*100 / 100);

           

           

          var topValue = 768/1920*100;

          var top = Math.round(topValue*100 / 100);

           

           

          var writeCSS = ('.' + layerName + "{<br>" + "width: " + width + "%;<br>" + "position:absolut;<br>" + "left: " + left + "%;<br>" + "top: " + top + "%;");

             

          return writeCSS;

          }

           

           

           

           

          document.getElementById("demo").innerHTML=myFunction();

          </script>