Looking for an image function

If you’re not opposed to using jQuery for this you can use:

$(function () {
if ( $('.post img').length > 0 ) {
$('head').append('<link rel="stylesheet" href="alternate.css" type="text/css" />');
}
});

That will check to see if there is an image tag inside <div class="post"> (the default class from WP). If there is, write an additional CSS file into the head. In that file you can simply overwrite exiting CSS to restyle the page.

well what I was thinking of doing was using fields..but I cant wrap my head around how it would work. The only change in layout Id have it do is add an extra column in the html.

Not sure what you mean by ‘using fields’. Do you have an example somewhere?

https://www.wprecipes.com/wordpress-tip-detect-if-a-post-has-at-least-one-image

That is a php way to check if an image exists in a post. I guess it all depends on what you want the final outcome to be.

You say you want to add another column. Is that going to be in the ‘post’ or on the page itsself like

post | sidebar <- no image
post | column | sidebar <- with image

If that’s what you’re looking for something like:

<?php
$content = $post->post_content;
$searchimages = '~<img [^>]* />~';

/*Run preg_match_all to grab all the images and save the results in $pics*/

preg_match_all( $searchimages, $content, $pics );

// Check to see if we have at least 1 image
$iNumberOfPics = count($pics[0]);

if ( $iNumberOfPics > 0 ) {
     $columnize = "true";
} else {
     $columnize = "false";

?>

Then outside the loop where you want the column:

<?php
if ($columnize == "true"){
    echo "your column stuff here";
}
?>

the field comment was just an idea..I have no idea how or if it could work. My situation is that Im trying to work with a fairly abnormal design that requires two different ways of displaying the posts depending on if the user attached an image or not. The way I have it set up (in html and css) is two div’s – nested in a larger one with overflow: auto so its scrollable, the left div is for an image, while the right one is for the posts text/content. You can think of the left div as a sort of just a picture to represent the post (for instance here: https://www.wprecipes.com/wordpress-tip-get-all-custom-fields-from-a-page-or-a-post the image with all the different colored wp logos). The right side is going to hold the actual post (the whole thing = excluding that intro picture). The problem is that there is no guarantee that the user will post that picture so I need to alter the layout to just one column that spans the width of the original two. While I like the idea of it detecting if there is an image attached, there is still a chance that they will post a picture within the actual content of the post so it wont really work to well…that’s why I was thinking about using a field.

I know this probably quite confusing but I plan on posting a screenshot of what I mean when I get out of class…

here we go..this is what I’m working with.

First with the display picture
https://img40.imageshack.us/i/postwith.gif/

and without
https://img14.imageshack.us/i/postwithout.gif/

Do you already have the system where your users can upload that ‘avatar’ image? Does your system give that image a specific class or id?

No I figured it was possible to just pull the images out of the entries content (the attached files) since Im guessing it stores them in an array..or something lol. I’m open to suggestions as this is driving me nuts :p

I have the logic set out I’m just not sure if its possible or how to do it..basically it goes as follows:

-check to see if post contains any images
-if images found
-loop through images and test to see if any meet the minimum width requirement to qualify as the intro/avatar pic
(note* it has to have a certain minimum width or else the design is going to look terrible, since Im using fixed widths and the two columns are split vertically with a background image)
-if match is found apply 2 column layout (place the image in the left column, rest of the content in the right etc)
-else display a single column layout

I really dislike how it works logically and Id love to have an option where the user can just specify if they want to add an avatar image or not when creating the entry..but that’s just how I thought it might be possible.

Okay try this. Build your posts with both columns. In your CSS define the widths with the left column being 0px and the right as whatever the full width is.

When your user uploads an image they can state the alt text for the image. Using jQuery you can then see if that image exists. If it does, you can then load an additional CSS to then make the columns readjust to the 2 column sizes.

$(document).ready(function() {
$('.post img').each(function(index){
if ($(this).attr('alt') == 'avatar') {
$(this).addClass('avatar');
}
})
if ( $('.avatar').length > 0 ) {
$('body').css({'background' : '#eed'}); // just for testing
$('head').append('<link rel="stylesheet" href="alternate.css" type="text/css" />');
}
});

This will look at all the images in the div.post. If an image exists with the alt of avatar, it will add the class of avatar to it. Then it checks to see if the class avatar exists. If it does, it appends the head with the new CSS.

So in the new CSS you need to rewrite the widths of the columns and then position the avatar image absolutely up into the first column.

Workable?

ok Im trying to get this into my existing site now..where do I put this exactly? In header.php?

Also once it does get the image how can I grab that particular one and make it display on the left column? Thanks for helping..and for the patience :p

sorry that was a kind of dumb question..found that its javascript so I put it in between the head tags but its not doing anything.

<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 ) {
$('body').css({'background' : '#eed'}); // just for testing
$('head').append('<link rel="stylesheet" href="alternate.css" type="text/css" />');
}
});

</script>

so what did I do wrong? lol

Are you sure it’s not doing anything?

If you have Firebug and the Web developer toolbar for Firefox, you can “view generated source” and look to see if the alternate.css is being appended to the head.

Would you have a test link somewhere. It’s a guessing game on this side without one.

Remember that there are no styles or anything applied to the class avatar. Unless you actually have a CSS file named ‘alternate’ with rules in it for the .avatar, nothing will happen.

when I view the source there isnt any extra stylesheet being appended.

I am however getting this from firebug

$ is not defined
wordpress?paged=2()wordpress?paged=2 (line 14)
[Break on this error] $(document).ready(function() {\n

sorry I don’t have any working example to link to..I’m doing this all on my machine.

sounds like the path to jQuery isn’t correct.

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

try using an absolute path to the file like

<script type="text/javascript" src="https://yoursite.com/jquery.js"></script>

and see how that goes

Alright absolute paths worked (well I had jquery.js in the wrong directory) but its still not adding the stylesheet. It is however, changing the body’s bg to #eed

*edit

I changed the code to the following (the stylesheet’s url)

<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 ) {
$('body').css({'background' : '#eed'}); // just for testing
$('head').append('<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/alternate.css" type="text/css" />');
}
});

</script>

and now its including the alternate stlyesheet on every page regardless if an image with the alt attribute of avatar is present.

Im not familiar with jquery at all so perhaps Im not understanding something..does the code above look for a specific image with the alt of avatar in a particular div? If so where is that div being specified? Thanks.

I think it could be trying to add PHP with JS.

Let em try to exaplain the cade ad offer a suggestion:

thie starts the function
$(document).ready(function() {

This looks for all images inside a element with a class of post, if any of the found images have the alt of avatar it adds a class of avatar to it as well

$('.post img').each(function(index){
if ($(this).attr('alt') == 'avatar') {
$(this).addClass('avatar');
}
})

This part then checks to see if any elemnt on the page with the class of avatar exists, then write the CSS. Remove the line above the append line. It was there just to test. Thats why the background is changing colors.

if ( $('.avatar').length > 0 ) {
$('body').css({'background' : '#eed'}); // just for testing
$('head').append('<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/alternate.css" type="text/css" />');
}
});

Dont wirte this:

href="<?php bloginfo('template_directory'); ?>/alternate.css"

Try this:

href="https://the_full_path_to_your_CSS/alternate.css"

I’m testing locally and it appears to work fine.

If that doesn’t work, will you post the entire head.php here (ill assume you’re including all this in the head.php file). That way i can see what you are using and i can test locally as well.