• In my page.php is a wrapper with two div’s in it. One div is for text, the other for a picture. When I want to write a new page in the page.php template, I don’t know in wich div I’m writing, the text or picture div. Should this be visible within the writing-page? What am I missing? Can it perhaps be done by including a image.php in the text div? Perhaps good to mention, I’m awfully new at this.

Viewing 11 replies - 1 through 11 (of 11 total)
  • You should write in the editor your page normally, import and add to it the images you want, and then, automatically, the template will split the images to one side and the text to another by its own.

    So by principle you don’t have to worry about nothing, just write your page in the editor as usual.

    I’m guessing your template is made to keep separated images and text, via php or css.

    What results do you obtain by now ?

    If you’re building the template, there’s some code snippets to use in order to get the image of a post/page in one side and the text in another one.

    Thread Starter erwin_m

    (@erwin_m)

    I’m building the template, so I’m very interested in what snippets you’re meaning.

    The result I’m obtaining is creating a varity in layout for end-users with multiple templates like page.php.

    Thank you for your reaction.

    Here you’ll find them out !

    I guess you could do something like :

    //strating the loop
    		<?php
    		if (have_posts()) :
    		while (have_posts()) :
    	        the_post();
    		?>
    //first div
    		<div class="firstdivimage">
    
    		<!--SNIPPET-->
    
    		</div>
    //second div
    		<div class="seconddivtext">
    
    		<?php the_title(); ?>
    		<?php the_content(); ?>
    
    		</div>
    //finishing
    		<?php endwhile;
    		endif;
    		?>

    and then in your CSS :

    .seconddivtext img{
    	display:none;
    	}
    Thread Starter erwin_m

    (@erwin_m)

    As I said, I’m very new with wp…..is it nescessary to include the loop or if you don’t have a blog than you don’t need the loop. The rest is clear to me, thank you.

    If you want your link pages be shown in text area, write it in text div as while coding the programmer created two divs one for picture and another for picture.

    Thread Starter erwin_m

    (@erwin_m)

    So, there isn’t a reason to put in the loop?

    Thread Starter erwin_m

    (@erwin_m)

    And what if I first want a div with content full width and then under it two div’s near each other. One with images and one with content also. How is it possible to create the content dynamically different for both div’s? And what should be in my div’s? Is it two times
    <?php the_title(); ?>
    <?php the_content(); ?>

    Thank you for your help, it’s very inspiring for me ;).

    Thread Starter erwin_m

    (@erwin_m)

    I’ve been trying to recreate the code as above, but I don’t get it to work. Right now I have:

    <?php
    /*
    Template Name: standaard layout
    */
    ?>
    
    <?php get_header(); ?>
    
    <!--Begin Content-->
    <div id="container2">
    
    <!--strating the loop-->
    
    		<?php
    		if (have_posts()) :
    		while (have_posts()) :
    	        the_post();
    		?>
    
    <div class="content">
    
    <!--SNIPPET-->
    
    </div>
    
    <div class="textdiv">
    
    <?php the_title(); ?>
    		<?php the_content(); ?>
    
    </div>
    
    <!--finishing-->
    		<?php endwhile;
    		endif;
    		?>
    
    </div><!--//container2-->
    <br style="clear:both" />
    </div><!--//container-->
    
    </body>
    </html>

    CSS part:

    .content {
    	width:500px;
    	float:left;
    }
    .textdiv img{
    	display:none;
    	}

    When I create a page with this template, I do see the text, but the image won’t be shown. Is there a specific way to insert the image or is my code invalid?

    @erwin, in the <!--SNIPPET--> part you must insert this code :

    <?php $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    $firstImageSrc = wp_get_attachment_image_src(array_shift(array_keys($images)));
    echo "<img src=\"{$firstImageSrc[0]}\" width=\"150\" height=\"150\" />"; ?>

    You can change the size, there is set to 150×150 px.
    If you want a more dynamic size, you should check the link I provided, there you can find some variations.

    Or, you can use this instead and add it a class to style it :

    <span class="myimage"><?php
    $szPostContent = $post->post_content;
    $szSearchPattern = '~<img [^\>]*\ />~';
    preg_match_all( $szSearchPattern, $szPostContent, $aPics );
    $iNumberOfPics = count($aPics[0]);
    if ( $iNumberOfPics > 0 ) {
    for ( $i=0; $i < $iNumberOfPics ; $i++ ) {
    echo $aPics[0][$i];
    };
    };
    ?></span>
    .myimage img{
    	max-width:yoursize;
    	max-height:yoursize;
    	}
    Thread Starter erwin_m

    (@erwin_m)

    Ok, thank you! I’m gonna try it. It makes sense to me.

    Hope it works, I think the first code is only for images uploaded to your WordPress images folder from your computer, and not ‘linked images from somewhere else’ (in the editor you have both options allowed).

    The second one will retrieve all the images in the post and it should work with all kind of images (uploaded plus linked).

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘multiple div’s in page.php problem’ is closed to new replies.