Different pics on each page required, not in main body text – how to do this?

  • Hi there, bit new to this

    In the different static pages on my site, I want to have 3 different images down the side of each page, not in the main text. Currently attempting to do this using the text widget in the left sidebar, but this gives me the same 3 images across all the pages.

    How can specify different images for each page?

    Many thanks

    Alex

Viewing 2 replies - 1 through 2 (of 2 total)

  • Here’s a CSS technique that I would try first. This relies on the fact that each post or page has a unique ID assigned to it, and if your theme’s developer coded the theme correctly, that ID can be found as a class of the body element, for example, page-id-311.

    Let’s say the page IDs of your three pages are 123, 124, and 125 (resulting in pages with a class of page-id-123, page-id-124, and page-id-125). You can see what the ID of your pages are by either using a web debugging tool like Firebug or Chrome Developer Tools, or just doing a view source on the page and seeing what classes are associated with the body element.

    In a sidebar text widget, create a DIV with a specific ID, like SidebarPic:

    <div id="SidebarPic"></div>

    Depending upon your theme’s features, if it has a Custom CSS option, copy & paste the below CSS rules into it. If your theme doesn’t have a Custom CSS option, you can create a child theme and use the child theme’s style.css file, or you can use a CSS plugin. Do not edit your theme’s CSS files directly!

    body.page-id-123 #SidebarPic {
   background-image: url(/images/my_image1.jpg);
   height: 360px;
   width: 100px;
}
body.page-id-124 #SidebarPic {
   background-image: url(/images/my_image2.jpg);
   height: 400px;
   width: 150px;
}
body.page-id-125 #SidebarPic {
   background-image: url(/images/my_image3.jpg);
   height: 280px;
   width: 130px;
}

    So just set the background-image property to point to the specific image for each page, and adjust the height & width properties for each image as well. You must specify the height & width of the image in order for it to display, although you can intentionally crop the image by specifying smaller dimensions than the image’s actual size.

    Thread Starter VisibleMusic

    (@visiblemusic)

    great, thanks for the input, will try later!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Different pics on each page required, not in main body text – how to do this?’ is closed to new replies.