treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Wordpress Question for a new poster and WP coder

  • Hello! Having a hard time trying to solve something that is probably fairly simple in Wordpress. Converting a site to Wordpress, and wondering how in heavens do I upload an image to a specific DIV on a page? I have built templates, and can assign images calling out the images in the templates, but ideally I would like it so the client can plug in the text, and also plug in images and have them go to a specific section of the page. Example would be my current simple template:

      **<div id="column02" class="group">
      <img src="<?php bloginfo('template_directory'); ?>/images/graphic_test-03.jpg" alt="graphic_test-03" width="220" height="503">
      </div>
    
      <div id="column01" class="group">     
      <div class="entry">
              <?php the_content(); ?>
            </div>
      </div>**
    

    I would love to enable the uploaded image to go into column02. Any ideas? I tried to do it with Fields but came up short. Thanks! Sorry if this is repeated, I searched and googled to no avail...

    cheers! zack

  • I think all you need to do is change it to this

    <img src="<?php  bloginfo('template_url'); ?>/images/image.png" />
    
  • @Watson90 That would allow him to hardcode the images. The client might not be able to do so.

    @zeech May I ask why column01 is below column02? Anyway, are there certain sections of the page that the images need to go to or is it just one?

  • Ha good Question @chrisburton - Column01 is below because for some reason when I have it above Column02 the elements don't stack correctly. I have Column02 floated right, and in my base site it works great. In WP it stacks below if I put it after column01. And yes, I want the client to able to choose the image so that if they want to change it its easy. Here is the roughly converted site: Glitches and broken images abound I believe. http://www.weir-tsus.com Thanks for your guys insight!

  • @zeech Sounds like a CSS issue that could be resolved. Where on that site can I find where you want to place the images?

  • @chrisburton -thanks for checking this out: I am uploading the images to WP uploads which can be found here: http://weir-tsus.com/wp-content/uploads/2012/11/graphic_test-01.jpg

    The style sheet can be found here: http://weir-tsus.com/wp-content/themes/WEIR-TSUS/style.css

    An archive of the site built in HTML and CSS can be found here: http://weir-tsus.com/ARCHIVED_SITE/

    thanks again

  • Use the Advanced Custom Fields plugin. It will allow you to create a custom field for an image upload and the template tags are extremely easy to use and modify.

  • @zeech No, I meant where on the Wordpress site can I find where you want the client to put the images.

  • Oops - would like to put them in the "column02" div - for example on this page: http://weir-tsus.com/cs_public/ The side image is one big block of an ugly image, and its floated right. Ideally I would like to have the client be able to upload thumbs that would float in the sidebar div and also be able to modify the copy.

    @JeremyEnglert I am going to look into that now, thanks!

  • It's a great plugin and lets you pick multiple field types (including WYSIWYG editor and file upload) and set conditions for which types of posts/pages these post types show up on.

  • @zeech I would disagree with @JermeyEnglert's suggestion. Not that it isn't a good one but it includes things you probably won't need. I think you should look into a plugin that does exactly what you need which is Attachments. Your client can upload the images and not have to worry where they are placed or re-sizing them. You can hardcode the size of the images, etc in your theme so they display exactly like they are now.

    Side note: You should remove the white space from the thumbnails so the margins are equal.

    The body copy from the link you posted just above should be handled through the editor, no?

  • Thanks @chrisburton - I will check out that plug-in. That sounds perfect. I checked out the advanced fields plug-in seemed powerful and a bit complicated.

    As far as your side notes chris - yes the body copy is handled through the editor, they want to be able to update and modify copy on the pages, and not sure what you mean about the white space on the thumbnails? Do you mean the margins in the CSS? Or actual whitespace within the WYSIWYG editor? thank you for your help. zack

  • I'm talking about this: http://weir-tsus.com/wp-content/uploads/2012/11/public_sector_images.jpg

    I would resize some of them so they have equal margins. It looks like you took a bunch of thumbnails and just threw them together without spacing them out evenly.

  • Yes that was just a screenshot from the original site. Crappy quick design flaws... Ideally when I figure this out, I want to be able to upload each thumbnail to be the same size and float them so they fit nicely like they do on the clients page. Thanks @chrisburton

  • Let us know what exactly you need help with.

  • @chrisburton - I installed the "attachments" plugin -activated to a new test template, works but it won't display the image as an image... Is there a simple call in the PHP that he provided on the site to make the image display? Here is my test page: http://weir-tsus.com/attachments/

    Here is the code I placed inside my template:

        <?php
          if( function_exists( 'attachments_get_attachments' ) )
          {
            $attachments = attachments_get_attachments();
            $total_attachments = count( $attachments );
            if( $total_attachments ) : ?>
              <ul>
              <?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
                <li><?php echo $attachments[$i]['title']; ?></li>
                <li><?php echo $attachments[$i]['caption']; ?></li>
                <li><?php echo $attachments[$i]['id']; ?></li>
                <li><?php echo $attachments[$i]['location']; ?></li>
                <li><?php echo $attachments[$i]['mime']; ?></li>
                <li><?php echo $attachments[$i]['filesize']; ?></li>
              <?php endfor; ?>
              </ul>
            <?php endif; ?>
        <?php } ?>
    

    Confused! Thanks

  • Hey @chrisburton I think I figured it out! Thanks!

  • @chrisburton - I believe so - I figured out how to attach and show the image in the correct DIV on the template. I can style the image with CSS. Here is my markup in my template:

    <?php $attachments = attachments_get_attachments(); $total_attachments = count($attachments); ?> <?php if( $total_attachments > 0 ) : ?> <?php for ($i=0; $i < $total_attachments; $i++) : ?>
    <?php $tmp_attachment_id = $attachments[$i]['id']; $tmp_post_id = get_post($tmp_attachment_id); $tmp_title = $tmp_post_id->post_title; $tmp_path_array = explode("/",$attachments[$i]['location']); $tmp_array_length = sizeof($tmp_path_array)-1; $tmp_filename = $tmp_path_array[$tmp_array_length]; $j=$i+1; ?>

    <?php echo wp_get_attachment_image($attachments[$i]['id'], $size='full', $icon = true); ?>

    <?php endfor ?> <?php endif ?>

    Here is the basic CSS for the image: .attachments-div { position: relative; float: right; width: 35%; }

    .attachments-div img {
        border:#000 solid 1px;
        float:left;
    }
    

    And now using this template I can allow the client to upload and attach an image to the right hand column.

    My PHP is limited, so not totally sure what all the code means on the PHP side, but it worked! Do you see any thing wrong with it? Thanks again @chrisburton

    zack

  • Depending on the dimensions for $size='full', you might want to replace 'full' with 'thumbnail'. If they are already sized correctly that code should work.

  • Yeah I saw that in the code, actually changed it to full from thumbnail - one quick question, is there a PHP call that I can add for a hyperlink? Say I want to use the images and have them link to a specific page? An example (excuse the funky CSS background color) is this page: using attachments to build the thumbs, but would like them to link to the proper case studies page: http://weir-tsus.com/attachments/

    If you have quick answer thanks! If not I have hassled you enough! Thanks again @chrisburton cheers zack

  • @zeech This is what I use:

      <?php $attachments = attachments_get_attachments(); ?>
      <?php if( function_exists( 'attachments_get_attachments' ) ) {
        $attachments = attachments_get_attachments();
        $total_attachments = count( $attachments ); if( $total_attachments ) : ?>
      <?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
      <img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" />
      <?php endfor; ?><?php endif; ?><?php } ?>
    

    You can wrap the img tag with an anchor tag like so:

      <?php $attachments = attachments_get_attachments(); ?>
      <?php if( function_exists( 'attachments_get_attachments' ) ) {
        $attachments = attachments_get_attachments();
        $total_attachments = count( $attachments ); if( $total_attachments ) : ?>
      <?php for( $i=0; $i<$total_attachments; $i++ ) : ?>
      <a href="<?php the_permalink(); ?>"><img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" /></a>
      <?php endfor; ?><?php endif; ?><?php } ?>
    
  • @chrisburton thank your for the code! I did a slight modification to this chunk: ">image" alt="<?php echo $attachments[$i]['title']; ?>" />

    Which enabled me to make the title tag a hyperlink. Hope this is PHP proper! Thanks again for all your help zack

  • Sorry not letting me post the code properly... Trying again:

      <a href="<?php echo $attachments[$i]['title']; ?>"><img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" /></a>
    
  • @zeech I don't think that's correct. I believe it should be:

      <a href="<?php echo the_permalink(); ?>"><img src="<?php echo $attachments[$i]['location']; ?>" alt="<?php echo $attachments[$i]['title']; ?>" /></a>