Grow your CSS skills. Land your dream job.

WordPress Question for a new poster and WP coder

  • # November 17, 2012 at 2:17 am

    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:

    **

    < ?php the_content(); ?>

    **

    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

    # November 17, 2012 at 5:47 am

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

    # November 17, 2012 at 10:36 am

    @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?

    # November 17, 2012 at 10:52 am

    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!

    # November 17, 2012 at 11:21 am

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

    # November 17, 2012 at 1:12 pm

    @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

    # November 17, 2012 at 6:06 pm

    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.

    # November 17, 2012 at 9:44 pm

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

    # November 17, 2012 at 11:00 pm

    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!

    # November 17, 2012 at 11:30 pm

    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.

    # November 17, 2012 at 11:44 pm

    @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?

    # November 19, 2012 at 1:12 pm

    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

    # November 19, 2012 at 1:33 pm

    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.

    # November 19, 2012 at 1:44 pm

    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

    # November 19, 2012 at 1:51 pm

    Let us know what exactly you need help with.

Viewing 15 posts - 1 through 15 (of 26 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".