ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   jameskyle
   Member

   After solving my previous problem on how to style certain parts of my theme differently from others using CSS - http://themeshaper.com/forums/topic/styling-index-page-differently-from-post-page - I'm looking to add some images. The problem is similar to the last in that I only require the images to be visible in certain areas of the theme, but I don't think it can be done with CSS this time.

   The layout is currently as shown in the image linked to below:
   http://picasaweb.google.com/jameskyle.net/ThematicLayoutImages#5545689789086074018
   (Picasa web album link.)

   I'd like the purple areas (.hentry) to be the featured image of the post they represent. I think I'd need a PHP based solution, as I don't think I can reference the featured image of the post using CSS as I can't give an address before the page is rendered.

   This is complicated however by the need to have no background image in other parts of the site, specifically the areas covered in the first post I made:

   .single
   .page
   .page-template-template-fullpage-php

   The idea is that lists of posts, be they the index page, archives or searches show the image and title in a 2 by x grid with only the title and featured image visible but look like regular posts in .single or .page.

   Posted 2 years ago #
2. 

   jameskyle
   Member

   Reading various threads and looking at the syntax of PHP (a language I'm not at all familiar with,) I'm thinking something like this would work:
   
function setHentryBackground() {
// Set the background image to the featured image for every area of the theme
.hentry{
background-image: featured-image(); // this is wrong but you get the general idea
}

   // Now create exceptions to that rule
if (is_single_post() || is_page() || is_page_template(".page-template-template-fullpage-php()) {
// .hentry { // background-image:none; }
}
}

   This code will almost certainly be uncompilable given that I made much of it up, but the logic of it should be correct. Anyone here that knows how to make this into working PHP?

   Posted 2 years ago #
3. 

   jameskyle
   Member

   Doing some reading of the Wordpress Codex I'm updating the code above:
   
function setHentryBackground() {
// Set the background image to the featured image for every area of the theme
.hentry{
background-image: featured-image(); // this is wrong but you get the general idea
}

   // Now create exceptions to that rule
if (is_single() || is_page()) { // I presume that pages of any template will be covered by is_page()
// .hentry {
// background-image:none;
}
}
}


   Providing that I can just drop CSS into the PHP without any consequences the second part at least should work right?

   Posted 2 years ago #
4. 

   jameskyle
   Member

   I'm thinking I should add
   header('Content-type: text/css');
   to the function to allow me to change the CSS.

   function setHentryBackground() {
// Set the background image to the featured image for every area of the theme

   if (is_single() || is_page()) { // I presume that pages of any template will be covered by is_page()
// .hentry {
// background-image:none;
} else {
.hentry{
background-image: featured-image(); // this is wrong but you get the general idea
}
}
}

   It is the process of combining the CSS with the PHP that has me muddled, not knowing much about PHP or any experience of working with it.

   Posted 2 years ago #
5. 

   jameskyle
   Member

   I've inserted the following code into my functions.php file to check that it recognises which part of the theme it's showing, so that it can style it accordingly.
   
if (is_single() || is_page()) {
echo "single post or page";
} else {
echo "post background is featured image";
}

   It only ever shows the "post background is featured image" text, which is fine on the homepage as that would be the case, but when displaying single posts or pages it returns that statement too.

   I assume that either my code is wrong and what I think is a check for single pages and posts is just nonsense, or functions.php doesn't run as I thought (that is, called every time the browser refreshes the page, such as on refresh or moving to a new page.)

   Can anyone help explain why this doesn't work?

   Posted 2 years ago #
6. 

   jameskyle
   Member

   Hell yeah! Making progress!

   Using the echo command as I would a trace in Actionscript I've made my conditional work.
   
function set_post_background() {
//then define the action to take:
if (is_page() || is_single()) {
echo "single post page";
} else {
echo "background to posts should be featured image";
}
}
//now we can add our new action to the appropriate place like so:
add_action('wp_head', 'set_post_background');

   I've changed is_post() to is_single(), as is_post no longer works in WordPress 2.9+.What a pain, but I'm sure it's for good reason. I've also added the add_action line, which seems to be necessary. I don't know much about PHP but I assume that this is placing my echo code in the header of the page and not in the head tags of the HTML.

   Here's the resources I used to get this working. It's not like it just popped into my head or anything!
   When I was beginning to dount that || meant AND... - http://www.w3schools.com/php/php_operators.asp
   Looking for anything that could help in the Thematic guide Wiki - http://themeshaper.com/thematic/guide/?page_id=10
   The ever useful WP Codex - http://codex.wordpress.org/Conditional_Tags#A_Single_Post_Page

   Now I just need to add the code to make the background image of each hentry div the featured image of the post it represents. I don't think the code on the Thematic Guide Wiki will cut it, since it refers to a static stylesheet, while I'm trying to make a more dynamic beastie.

   Thematic Guide Wiki code:
   
//lets give our new action a name

   function childtheme_css() {
//then define the action to take:
if (is_page('82')) {?>
<link rel="stylesheet" type="text/css" href="<?php echo
bloginfo('stylesheet_directory') ?>/homepage.css" /> <?php }
//end action:
}
//now we can add our new action to the appropriate place like so:
add_action('wp_head', 'childtheme_css');


   I suppose I could just add the featured image to all posts then hide it on those that it's not meant to be displayed on. That's a less elegant solution though, and I'd rather avoid hiding images since I assume that despite being hidden it'll still try to download them, whethas in my preferred solution they won't be a problem.

   I'll work away on this, and as ever any help is appreciated.

   Posted 2 years ago #
7. 

   Jonny Janiero
   Member

   i haven't read thru all this thread and cant grasp exactly what you are trying to achieve, but from what i can make out...
   would the dynamic classes
   .singular
   and
   .not-singular
   be useful.

   the class .singular specifies single posts, pages
   .not-singular specifies index, category, tag, archive pages, etc

   Posted 2 years ago #
8. 

   jameskyle
   Member

   If I could add the featured image to the content, then remove or hide it on instances of .singular this would also help, as I could have it fill the whole space of the .hentry div using CSS without much trouble

   I'm having to reinstall wordpress at the moment though, as I've done something to it using (I think) the following code.

   
function set_post_background() {
//then define the action to take:
if (is_page() || is_single()) {
echo "single post page";
} else {
echo "background to posts should be featured image";
}
}
//now we can add our new action to the appropriate place like so:
add_action('wp_head', 'set_post_background');


   I think this is preventing me from getting into the wp-admin page. When tested on my mac I get a blank Safari window. When tested online I get a whole bunch of error messages relating to something about not being able to change the header. I wish I'd taken a note of the message, but it repeated the length of the browser window and beyond. I don't think this is working. Perhaps the wp_head is wrong? Perhaps the echo commands are causing problems? I don't know to be honest.

   I think possibly adding the featured image to all non-singular instances of posts would be the way to go. I'll just style it appropriately. I'll do some research and update what I've found or achieved.

   Posted 2 years ago #
9. 

   jameskyle
   Member

   I tried a solution that came to me thinking back to my old AS2 programming days. This solution is called "why it's not always a good idea to just copy/paste code from the internets."

   Why is this? I'm not sure, but somewhere along the line I think hidden characters creep in. By copying my code into NeoOffice, exporting the text as a .txt file then copying the code back into DreamWeaver everything works fine again. The code itself is identical: syntax, white space, tabs, everything is the same.

   Posted 2 years ago #
10. 

    helgatheviking
    Moderator

    yeah i have no idea what you are trying to do either. your earlier code is mostly impossible. there is a way to do dynamic css, but it is complicated. you could echo something between <style> tags into the header perhaps. your not enclosing header stuff in <style> tags is probably what broke your site.

    i often test code/logic etc on the thematic_before hook.

    so you want the .hentry to be a certain color?

    why not

    .not-singular .hentry {background: red;}

    which would be different from

    .singular .hentry {background: yellow;}

    also the post containers themselves (which have the .hentry class) also have a bunch of other useful classes if you have thematic post classes enabled. you should enable the body classes to so you can do what jonny and i describe.

    http://themeshaper.com/forums/topic/thematic-0976-is-online-important-release-notes

    Posted 2 years ago #
11. 

    jameskyle
    Member

    so you want the .hentry to be a certain color?

    Not exactly. The theme shouldmeet two conditions
    1) Any parts of the site that are not displaying a single ordered or unordered post should display only the post title and featured image.

    The featured image should ideally be the background image for the post, effectively making the index page a list of images with headings. Even if this was done by adding the relevant featured image to each posts content then styling it with CSS, I could work with that so long as the rest of the post content was hidden on these non-singular pages.

    2) All instances of singular posts (for example, when the heading of one of the posts on the blog index, archives or search are clicked,) should display with default thematic styling. This was the reason for the conditional statement; I had thought that I would get a working conditional first, then add the code to make the visual changes to the pages.

    All I really want is for index, archive, search, etc to display a list of post titles with featured images in a visual portfolio kind of thing. I'm building it for an artist friend who's looking for a place to display his work outside of the usual image hosting websites.

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.