Looking for an image function

  • Im just curious if anyone could help me out..I’m looking for a function that will tell me if there is an image included in a post. What I plan on doing is altering the default layout with a conditional statement to load one layout if the post contains an image and another if it doesn’t.

    Does such a function exist? Or is there a better way to do this ie a plugin or something? Thanks.

Viewing 8 replies - 16 through 23 (of 23 total)
  • Thread Starter iamchel

    (@iamchel)

    <?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="https://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">       

$(document).ready(function() {
$('.post img').each(function(index){
if ($(this).attr('alt') == 'avatar') {
$(this).addClass('avatar');
}
})
if ( $('.avatar').length > 0 ) {
$('head').append('<link rel="stylesheet" href="./wp-content/themes/unveiled/alternate.css" type="text/css" />');
}
});

</script>

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/mastersheet.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />

<style type="text/css" media="screen">

<?php
// Checks to see whether it needs a sidebar or not
if ( empty($withcomments) && !is_single() ) {
?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/./wp-content/themes/unveiled/images/kubrickbg-<?php bloginfo('text_direction'); ?>.jpg") repeat-y top; border: none; }
<?php } else { // No sidebar ?>
	#page { background: url("<?php bloginfo('stylesheet_directory'); ?>/./wp-content/themes/unveiled/images/kubrickbgwide.jpg") repeat-y top; border: none; }
<?php } ?>

</style>

<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div id="content">

    That is my head..its heavily modified (I admit, its pretty sloppy) to fit my needs.

    If I understood correctly

    $('.post img').each(function(index){

    .post is the class of the container? If so would it be safe to say that its alright to change it to what Im using on my end?

    I should note that it is loading the alternate stylesheet but its not working conditionally from what I can see..its just loading it for every page.

    Thread Starter iamchel

    (@iamchel)

    Oddly enough I just noticed that the alternate stylesheet is being applied to the entire page.

    I have this code below and its adding the border to everything including the gravatar’s I have in the sidebar…

    .avatar
{
    border: 4px solid #000;
}

    EDIT* heh I spoke to soon…the gravatars have the class avatar by default from this plugin lol

    EDIT2* I removed the gravatars from the sidebar and its working perfectly now. I guess the code just looks for anything named avatar and not necessarily and alt of avatar?

    Now I just need to find out how to get the image to the other div :p

    This is the code generated by the gravatar plugin Im using in case you want to inspect it some more.

    <img class="avatar avatar-42" height="42" width="42" src="https://www.gravatar.com/avatar/52e0fd687705f1f3ccbc97175953f14a?s=42&d=identicon&r=pg" alt=""/>

    Cool, I’m glad you found that the other plugin was using the same class name before I tried to figure it out.

    So don’t touch the Gravatar plugin. Instead change all the instances of ‘avatar’ in the script with something else. In the code below I changed it to ‘pic2col’, hopefully that won’t conflict with anything else.

    I guess the code just looks for anything named avatar and not necessarily and alt of avatar?

    The second part of the script was looking for anything with the class ‘avatar’ so changing that to something super specific will work fine.

    One thing I would do is move the script below all the existing CSS links in your head tag. That way it will over write the existing when the script fires.

    Here’s an example of how it can work: 

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>

<style type="text/css">
.post {
width: 600px;
border: 1px solid #000;
position: relative;
}

.post p {
padding: 4px 8px 18px 8px;
margin: 0;
}

.post img {
float: left;
display: inline;
margin: 4px 8px 4px 8px;
}

.post_col_r {
width: 0px;
float: left;
}

.post_col_l {
width: 600px;
background: #eee;
}
</style>

<script src="jquery/jquery-1.2.6.js" type="text/javascript"></script>

  <script type="text/javascript">
$(document).ready(function() {
$('.post img').each(function(index){
if ($(this).attr('alt') == 'pic2col') {
$(this).addClass('pic2col');
}
})
if ( $('.pic2col').length > 0 ) {
$('head').append('<link rel="stylesheet" href="pic2col.css" type="text/css" />');
}
});

  </script>

</head>
<body>
<div class="post">
<div class="post_col_r">
</div>
<div class="post_col_l">
<!-- ** this is where your loop goes ** -->

<!-- below is sample output from the loop -->
<img src="120x120.gif" alt="" />
<p>Duis condimentum, tortor et tristique fermentum, dui eros feugiat turpis, vel elementum nibh ante ut sem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed ipsum est, sed facilisis enim. Etiam arcu augue, scelerisque vitae fermentum eu, condimentum nec leo.</p>
<p>Praesent malesuada, purus in dapibus pharetra, lorem nibh euismod augue, id venenatis libero lectus sit amet mauris. Integer rutrum lacus at odio malesuada ac vestibulum leo consectetur. Phasellus posuere velit a neque gravida at iaculis odio lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<img src="120x120.gif" alt="pic2col" />
</div>
</div>

</body>
</html>

    Notice I am using a 120px x 120px image as my test image so the CSS dimensions are based on that. Also the link to my jQuery s relative to my test environment so of course you’ll need to make sure it points correctly on your side.

    By default, WP gives a class of post to the post div. If you have changed that, then change it in the script and CSS accordingly.

    So you need to ‘position: relative’ the .post. That way you can safely ‘position: absolute’ the image you want to maneuver.

    So when the script successfully fires and appends the new CSS, this is the example CSS I used:

    .post_col_r {
width: 130px;
float: left;
}

.post_col_l {
width: 460px;
background: #eee;
margin: 0 0 0 140px;
}

.pic2col {
position: absolute;
top: 0;
left: 0;
}

    It appears to work fine. Of course you’ll need to adjust for your column and image sizes and spacing and what-not.

    Okay, the script needs to be changed. IE doesn’t refire the CSS that’s being appended so a different approach. We’ll use jQuery to write the CSS.

    $(document).ready(function() {
$('.post img').each(function(index){
if ($(this).attr('alt') == 'pic2col') {
$(this).addClass('pic2col');
}
})
if ( $('.pic2col').length > 0 ) {
// $('head').append('<link rel="stylesheet" href="pic2col.css" type="text/css">');
$('.post_col_r').css({width: '130px', float: 'left'});
$('.post_col_l').css({width: '460px', float: 'right', background: '#9dd'});
$('.pic2col').css({position: 'absolute', top: '0', left: '0'});
}
});

    I commented out the style sheet for reference. This should also be a pretty straight forward guide to writing CSS with jQuery.

    Thread Starter iamchel

    (@iamchel)

    Alright its getting closer and closer to working ??

    Only problem is that its not working in ie

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; Creative AutoUpdate v1.40.01)
    Timestamp: Wed, 14 Oct 2009 18:01:16 UTC

    Message: Invalid argument.
    Line: 1061
    Char: 4
    Code: 0
    URI: https://localhost/wordpress/jquery.js

    Not sure what that means…

    By “not working” what do you mean exactly?

    Are you using the updated script that does not append a CSS file to the head?

    Thread Starter iamchel

    (@iamchel)

    it works in ff but in ie7 I get “error on page” on the bottom left corner of the browser and it doesn’t apply any of the styles from the script.

    well crap. how about this. Save the page out as a plain HTML page and mail it to me so I can see if anything catches my eye.

    tugbucket [at] gmail [dot] com

Viewing 8 replies - 16 through 23 (of 23 total)
  • The topic ‘Looking for an image function’ is closed to new replies.