0

Short version: How do you use CSS to define where a image is located on each Node?

I AM NOT TALKING ABOUT IMAGE STYLES: https://drupal.org/documentation/modules/image#styles

Long version of my question:

I have created a content type call image_content, in which I can create a node and upload a image to that node. That works great! but now what? I mean if load 10 images one one node, the are lined up hortizonaly, and thats pretty ugly. How can I use CSS to change the style of the images per node.

Now I understand, I could create a photo gallery, but I want more control of how each image is displayed. Example my background looks like a empty room. On node created by the image_cotent, I might want a image1 far left, and image2 far right. Basic CSS understanding can do this, but how would I do this node? The reason is I might want the images on node2 have a left-margin of 50px, but images on node1 to be margin-right-0px

Does this make sense?? PLEASE provide example if you can!

0

If you look at the body tag in view source or firebug you should be able to see a list of CSS classes assigned to class attribute; Ex. class="html not-front page-node page-node-1"

So you should be able to style each node different than other nodes based on the node ID

CSS example:

/* node 1 styles */

body.page-node-1 .title {
  color: #333;
  background-color: blue;
}

body.page-node-1 .field-name-field-image {
  position: absolute;
  left: 100px;
  top: 100px;
}

/* node 2 styles */

body.page-node-2 .title {
  color: #000;
  background-color: yellow;
}

body.page-node-2 .field-name-field-image {
  position: absolute;
  left: 200px;
  top: 200px;
}

I hope this will help you.

  • 1
    Yes that works. I actually used views and used firefox to find the ID and class of the images. Thanks for the help! – Benjamin Jones Oct 24 '13 at 5:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.