Hello!

 

 

I'm making this Wordpress site for a client but I'm having difficulties with something…

I've attached a picture to explain easier.

 

 

Basically, we have a featured image on a lot of pages. We want the text/content to be at the right of this image. The featured image also has a caption that appears below it. The problem is, the text entered in the text area when writing a page will always appear underneath the featured image and the image caption. How can I make it appear at the right of the image?

 

It seems like quite a few people have already searched for this "issue" out there, but it also seems like no one found a solution yet

 

All help is appreciated!

 

Are you talking about from a code point of view, so you want some css to define how all the pages display (I don't think I'm putting that very well)? Or do you mean when you are adding content to a page using the WordPress dashboard (Add Page or Edit Page)?

Also - this is specifically for a featured image that has been set as featured in the right hand column of the input screen?

Hey Jane, this is for whatever method works to make the text appear at the right of the featured image, be it through the WordPress dashboard or through CSS if needed!

And you mean left hand column right? The featured image is at the left They are all at the left on the site I'm working on.

No I mean the menu thingy in the column on the right.

 

 

But if that is not what you meant by featured - then ignore this because it's a red herring

Edited February 1, 201412 yr by Jane B

Anyhow, as you can see - I am not clear about what you are asking so this may be stating the obvious. But is this relevant?

 

Oh! Yes, that's the "Featured image" feature that I was talking about Sorry, my bad!

 

And yes, that second picture shows it the way I'd like to have it (more or less). How did you do it?

Edited February 1, 201412 yr by Revs

Well, I'm not sure whether the fact that it is featured or not is important - because I don't know whether your theme treats featured images differently and sticks them at the top of the text.

 

But assuming that's not relevant, to get any image to go on the left of the text you have the option to set its alignment when you first add it to the page (using Add Media) or, if you have already added it, you can click on it, then click the little square that appears in its top left hand corner.

 

That brings up the window, I did the screen print of, and then I have chosen the option Left for alignment - you can see the dot next to left in the screen print.

Hmm yes I already assumed you did it that way It used to do a lot of weird things for me but now I think I managed to figure out how it works a little bit better at least, I first need to add the text and then the image, not the other way around, otherwise it messes up everything.

 

Now my only problem compared to the featured image feature is that the image and the text sits much lower, basically much further down from the menu than if you were to used the other option. Did you notice this as well? I guess this needs some CSS to fix it, or perhaps you know a trick as well

Okay, another problem I have is the text wrapping up around the. I assumed it was going to do this as shown on your picture that's why I said it's "more or less" what I'm looking for Is there a way for this *not* to happen? Basically as if there was two columns, one at the left (with the picture and the caption below), and another one at the right (with the text)?

Hmm... I hadn't noticed it being lower down - I wonder whether you have any carriage returns that have sneaked in there. My usual method is just to keep messing around with the thing until it looks right.

 

It may be that you could consider not doing it the way I just suggested but switching to the code view of the page and putting a div (may be something else in html5 but I'm not sure that matters) around the image and another one around the text. Giving each of those a class and using css to make them float left (ermm... maybe).

 

I have done something along those lines before but it was very much trial and error, and quite likely not best practice.

 

If you have a load of pages that all want this layout then perhaps you should be writing a template - but I'd be out of my depth with that, I'm afraid. The thing I did was where I just had one single page that I wanted a particular layout on.

The way I would tackle this problem would be similar to what Jane has just described.

 

Your page is made up of 'frames' called divisions in html, there are different types of division, the most commonly used if the 'div' element. Each piece of your content that is being grouped as part of the page inside a 'div'. To make the two pieces you want to keep on the left stay together as you have shown they need to be grouped inside the same div, this div needs to be inside the 'article' div that is holding your main text area. The article div will group both the div holding your featured image with it's caption, and another div holding your text.

 

The html would look like this -

<body>
<div class="wrapper>
  <!-- This is the outer most container that all else is grouped inside -->

  <header>
    <!-- this is your site or section header, the menu can be inside it or bellow it depending on the design you are using-->
  </header>

  <nav>
    <!-- This is your navigation, or 'menu' -->
  </nav>

  <div class="container">
    <article>

      <div class="featured">
        <!-- This is the div that will hold your image and caption divs-->
        <div class="image">
          <!-- This is the image div -->
        </div><!-- close the image div -->
       
        <div class="caption">
          <!-- This is the caption div -->
        </div><!-- close the caption div -->

        <!-- notice how the caption div is INSIDE your featured div and bellow the image div -->
      </div><!-- close the featured div -->

      <div class="main_content">
        <!-- you guessed it, your main text content goes in this div -->
      </div><!-- close the main_content -->

    </article>

    <div class="next">
     <!-- your next item to display bellow the article -->
    </div><!-- close next div -->

  </div><!-- close the container div -->
</div><!-- close the wrapper div -->
</body>

Then your css would look something like this (Plus styling)

body {
}

.wrapper {
}

header {
}

nav {
}

.container {
}

.featured, .main_content {
  display: inline-block;
  float: left;
}

.image, .caption {
  display: block;
}

/* Then in your next element you need to clear the float left */

.next {
  clear: both;
  display: block;
}

This would produce a layout of -

If you wanted the main_content to be displayed in a column instead of wrapping around the featured div you simply set it separately and have no float:left thus -

 

.featured {
  display: inline-block;
  float: left;
}

.main_content {
  display: inline-block;
}

Oh damn, apparently my last reply to Jane didn't post properly I had written that I had found a plugin called "Magazine columns" which allowed me to split the text from the text area in, well, two columns and that it works perfectly now! I hope that piece of code you wrote Weedy was not all for nothing, but actually I still have the problem with the text + image (basically everything that is put in the text area) being too far down from the menu, as opposed to the featured image. I don't know why that is, I guess I have to control one of the DIV's, but I have no idea which one or how…

 

I've uploaded two pictures to show the difference in space between the menu and the image/text. "Standard way" is the way described above, with using the "Add media" button. FI-way is the featured image way. You can notice that the picture in the featured image way is bigger but it has nothing to do with the space between that image and the menu, it just happens to be bigger because I set it like that, so don't let that fool you.

 

 

 

Oh and as you can see I didn't manage to put the text next to the image when using the featured image option so… that makes it clear which one is which. Either way it isn't hard to notice the big gap on the first one. And as I said I'm using a child theme (slightly modified theme) of the "twentytwelve" theme, so I didn't mess up anything, it's 99.9% "stock" if you want

Edited February 2, 201412 yr by Revs

At a guess, it might be either padding or margin on whatever div has the image and text in it. But I'm not experienced enough to be able to tell without seeing the real thing and messing around with it.

 

I use plugins a lot btw - I'm not at the level where I can code everything from scratch.

If you can't get the magazine columns plugin to work properly, then there are various plugins around that include shortcodes for columns.

 

This one does, and graph paper press seem to be reasonable OK (well I have heard of them ) http://graphpaperpress.com/plugins/gpp-shortcodes/

 

Of course, it includes a whole load of other shortcodes too so that might be overkill.

 

I'm not at the level where I can code everything from scratch.

 

Neither am I haha!

 

 

Of course, it includes a whole load of other shortcodes too so that might be overkill.

 

Well, the magazine columns plugin works very well and I don't think I'll change it It had some bad reviews but I've read them and it was just people who didn't know how to use it. I've checked out other ones as well and like you say they're almost too complex for me, so the very simple magazine columns plugin sorted that out for me

 

 

As for the padding or margin… I guess I'll have to search for it, or perhaps I should open a new thread for this new problem to resolve. What I'm surprised is that apparently there's no way of displayed the text at the right of the featured image? I would think there must be one…

What I'm surprised is that apparently there's no way of displayed the text at the right of the featured image? I would think there must be one…

 

We kind of have a situation of the blind leading the blind (as my Nan used to say).

 

But I think it's because the featured image is added by php and I'm going to take a stab at it and say maybe by this bit in content.php

 

<header class="entry-header">

<?php the_post_thumbnail(); ?>

 

Although I'm not 100% sure that's used by pages as well as posts - but I think it is. Probably.

 

I have got twenty twelve on a local test site on my PC and it seems to me that the featured image is appearing in the header element of the page.

That content.php then goes on to display the page title and then the content that you have input for the page.

 

So to try to get some text to the right of the featured image you'd have to get it inserted in there somehow. I don't know how to do that

 

I do hope you are taking all this with a pinch of salt, as I am a bit vague about it as you can probably tell.

I don't use Wordpress as I have said before, but if you can edit the code then going by what Jane said if the featured image is within the <header> </header> tags then you need to move it into the content area for your main text to appear next to it. The

 <?php the_post_thumbnail(); ?>  

is unlikely to be the featured image, This is more likely to be a call to load the image ready for display.

 

However, with the smaller image resulting in the text being able to appear beside the image I would suspect that the minimum width of the text is wider than the remaining space beside your image at the larger image size. Check the class or id of the div that is holding the featured image and look it up in the css files. The statement you are looking for in the css is

min-width: xxxpx; 

 

If you can find this try reducing it by about half and refreshing the page, then once the text does move to where you want it simply increase the minimum width in small increments until it fails again. Finally set the minimum width back to the last width that worked to keep the template responsive and yet working for you.

Hmm... thanks, Weedy. It seemed to me it was not in the overall header but in a header section of the content area. But, based on what you said, I think I need to have another look at this - I am probably muddying the water, rather than helping. However, I do think the featured image is being output by php somewhere

 

 

The

 <?php the_post_thumbnail(); ?>  

is unlikely to be the featured image, This is more likely to be a call to load the image ready for display.

It may not have been content.php ; it may be content-page.php which has this in it

 

<header class="entry-header">
<?php if ( ! is_page_template( 'page-templates/front-page.php' ) ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
</header>

 

 

 

But from what Weedy said, that is not actually outputting the featured image, so I don't know. I still think it might be.

Edited February 3, 201412 yr by Jane B

This may be relevant - but I am way out of my depth and personally I wouldn't mess with it

 

https://codex.wordpress.org/Function_Reference/the_post_thumbnail

Alright this all looks quite complicated for my skills, so I'll have to look a bit deeper into this And don't worry Jane, you do help, so thanks for participating in this thread! I'll see what I can do now and then I'll be back with some news, might be useful to someone trying to do the same one day.

This may be relevant - but I am way out of my depth and personally I wouldn't mess with it

 

https://codex.wordpress.org/Function_Reference/the_post_thumbnail

 

It was the word thumbnail that threw me, but from the function reference page I see that the thumbnail is scaled for each use, so yes this is the featured image.

 

The header is a section header with a class of entry-header, then php checks to make sure that the page template is a template and applies the image (the_post_thumbnail()), and finally displays the <h1>head line.

 

To use the css I supplied the image can be placed inside a div by passing in the class name you wish to use according to the page from janes link thus-

<?php the_post_thumbnail('thumbnail', array('class' => 'featured')); ?>

However, I cannot see how the caption is being defined/displayed. Assuming the caption is the images alt text then both the image and it's caption are displayed by the same 'the_post_thumbnail()' method and that would imply that the caption will automatically get the same styling.

 

To find out which css file you need to update I believe you will need to look in the template.

 

You may need to experiment a little with the template to ensure this will not cause a conflict with other styling.

Something tells me it actually might be easier to just leave the featured image the way it is and try to get the text at the right of it? Because the featured image is already at the perfect position so it saves me from messing with this.

Something tells me it actually might be easier to just leave the featured image the way it is and try to get the text at the right of it? Because the featured image is already at the perfect position so it saves me from messing with this.

 

If you look at the css I listed earlier I applied the 'display: inline-block;' property to the featured class and to the content class while keeping the image and it's caption set to 'display: block;' This is as close to getting the text up beside the image as you will get if you don't move the php statement into the beginning of the content text. Without this simple move your text is unlikely to be positioned where you want it in all browsers.

It kind of worked but it isn't perfect yet With the inspector in Safari I first searched for both elements (the content box and the featured image).

The featured image is called:

<header class="entry-header"></header>
 

 

While the content box is called:

<div class="entry-content"></div>
 

(they come one after another)

 

This is very simplified as there's various stuff in both of these.

 

In my CSS I then added:

.entry-header {
      float: left;
    }
    
.entry-content {
    float: right;
    }    
 

 

The problem is that it still wraps around the featured image. So I added display: inline-block; to both, like you said, but nothing changes. Who finds the mistake?

Edited February 11, 201412 yr by Revs

As there is no 'wrapping' div that holds both elements being address you can drop the float from both and in most instances the display: inline-block; will work nicely. However, for backward compatibility the float may need to be kept in the class entry-header but can be dropped in the class entry content.

 

One last thing is that the next element down the page that you want to display normally may inherit the float and/or the float. To ensure things work the way you want them to the next element will need a clear: both; (or clear: left;) and display: block; for a block element like a div. If it is an inline element like a span or anchor then the display will be fine and only the clear will be needed.

 

For future reference:

If you wanted the content to wrap then you would actually set both classes to have a float: left; as they will line up one after the other instead of setting the class entry-content to float: right;

 

Although both ways will normally work you cannot guarantee the outcome in every browser setup.