Posted 2 years ago #
Hello,
I am trying to place the 'the_title()' inside the 'the_content()' but I can't figure it out for the life of me.
I currently have:
<h2>Post Title</h2>
<div class="entry">
<p><img src="example" />The post text</p>
</div>
I would like to have:
<div class="entry">
<p><img src="example" /><h2>Post Title</h2>The post text</p>
</div>
any help would be greatly appreciated
Posted 2 years ago #
I think what I'm really trying to do is put the image before the title and text, for instance:
<div class="entry">
<img src="example" />
<p><h2>Post Title</h2>The post text</p>
</div>
I'm currently looking into writing an add_filter, but I don't see how it will help.
Adding a shortcode is one way to to it. Add the code below to your theme's functions.php. Then, place the shortcode [mm-insert-title] in your post where you want the title to appear. You can use the before and after parameters to put code before and after the title. For example, [mm-insert-title before='<h2>' after='</h2>'] will place the title inside h2 tags.
function mm_insert_title_func($atts) {
// Insert the post title, with optional before and after strings.
// [mm-insert-title before='<h3>' after='</h3>']
global $post;
extract(shortcode_atts(array('before' => '', 'after' => '' ), $atts));
$output = "{$before}{$post->post_title}{$after}";
return $output;
}
add_shortcode('mm-insert-title', 'mm_insert_title_func');
?>
Posted 2 years ago #
thanks vtxyzzy.
but i dont think that will solve my problem. The <img> tag is inserted inside of the <p> tag. i.e. <p><img>some text</p>
is it possible to define the 'some text' part. to make myself clear, i would like to place my post title next to / below my picture just like on playgrounder.com and uncrate.com. if this is possible with only the use of css, that would be great,but i dont think that is possible either.
please help!
Posted 2 years ago #
The code above will allow you to place the title within the post content (which is what you asked for), please read the reply again.
If that's not exactly what you mean, please clarify in more detail so vtxyzzy is able to understand better what it is you mean.
With vtxyzzy's code, you'd write your post as normal but then add this inside the content of the post where you want the title..
[mm-insert-title before='<h2>' after='</h2>']What t31os_ said.
Following your example, you would code:
<p><img>[mm-insert-title]some text</p>
Posted 2 years ago #
No, t310s_ thats not what I asked for, please reread MY post. I am trying to rearrange the tags, not find some hack.
Thanks vtxyzzy for your answer. I find it completely ridiculous that one cannot cleanly edit the layout of the post (one of the biggest parts of the blog itself).
My guess is that you CANNOT cleanly edit the post and instead of saying something like "not possible, you have to find a workaround", you get little a-hole moderators.
Example:
http://wordpress.org/support/topic/307410?replies=2
Did I hear a 9er in there?
Does the <img src="example" /> is an image uploaded with the edit post in wordpress?
S.
Posted 2 years ago #
Simon,
When you insert an image in your post, it places the <img src="example" /> tag inside you post.
Regular Post:
<p>The post text</p>
Post with Image:
<p><img src="example" />The post text</p>
Yes yes yes... Ok... So basically you want to put the image before the title and the text.... (the title of this thread is not clear about that :-))
To do this, you should use a function to make a custom template tag and edit the loop in the template files (index.php/single.php/etc.)
[1] Edit / create a function.php in your theme directory.
[2] paste this function in function.php :
function my_image_tag() {
global $wpdb;
global $post;
$my_post_image = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and post_type = 'attachment'");
if ($my_post_image == 0) {
echo "";
}
else {
echo wp_get_attachment_image()($my_post_image, $size='large', $icon = false);
}
}This function retreive the first image attached to a post. Look at the last line and change $size='large' for the format you want to use (large/medium/thumbnail).
[3] Save your function.php and upload it in your theme directory.
[4] Now, you have a custom template tag you can use in your loop : <?php my_image_tag(); ?>
[5] When you upload your first image in your post, DO NOT insert it in the post itself. It is "attached" to the post in the database. Juste upload the image and that's all...
[6] Then, in you loop, you go that way :
<div class="entry">
<?php my_image_tag(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(''); ?>
</div>
Of course, you can wrap my_image_tag in a div if you like to do so...
It should do the trick. Edit the loop in all the template file where you want the image to be displayed : single.php, index.php, category.php...
You can even make multiple functions (my_thumbnail_tag, my_medium_tag, etc) with different format... All you have to do is to edit the size in the function as I explained...
Hope this help.
@+
S.
Oh... And I forgot...
This function will display nothing if there is no image attached to a post...
And if you want to wrap the picture in a div, it's better to do it in the function itself to prevent an empty div if there is no image...
Like this
else {
echo '<div class="my_picture_div">';
echo wp_get_attachment_image()($photo, $size='large', $icon = false);
echo '</div>';
}@+
S.
Posted 2 years ago #
I am trying to place the 'the_title()' inside the 'the_content()' but I can't figure it out for the life of me.
I can't see how that can be read any other way.. that's exactly what the example code would have done..
No, t310s_ thats not what I asked for, please reread MY post. I am trying to rearrange the tags, not find some hack.
I can't see how tags are related, so i can only assume when you say tags you mean.. the_title() and the_content() , which although could be called tags, are in PHP terms, function calls. It's not essential you use those particular function calls(tags) if you have needs that require a custom layout ...
Sorry if i misunderstood, Simon knew what you meant though so i'll leave you to it ... ;)
He he... You did'nt misunderstood t31os_... :-) As I said, the title of the thread is really not clear.
But in his second message : "I think what I'm really trying to do is put the image before the title and text"
So I guess this is what he want to do... :-)
S.
Posted 2 years ago #
yes "place the_title inside the_content" is not clear at all (Gay Smiley Face). Functions and tags are the same thing when the functions PRODUCE those tags, but thanks for unwittingly pointing that out.
Am I supposed to tell a client to insert [mm-insert-title before='<h2>' after='</h2>'] everytime they post??
A custom layout? Because a BLOG cms will not let you change the layout of the BLOG's post. Thats a joke. I'm just going to do what I should have done in the first place, use CI.
Thanks WordPress.
Posted 2 years ago #
I was actually trying to be polite before, obviously my posts failed to come across as friendly.... i even apologised in my second response, yet you seemed to take it personally.
We misunderstood each other ... so what, let's move on and solve your problem, yes? ... or have you had enough?
:)
mtokoly... We explain how to do what you want...
If you're not able to do it, don't blame wordpress, blame you skills.
With the solution I gave you, you should manage to do what you want.
And of course, you can change the layout of a blog post... Just edit the template files... (!?)
I really don't understad your point.
Did you try my solution?
@
S.
Posted 2 years ago #
im sorry, im just getting very frustrated.
sorry t31os_
sorry simonj, ill try your solution
Posted 2 years ago #
SimonJ told me how to do EXACTLY what I needed and for that I fell very ashamed. I'm self-taught programmer and 90% of the time when you ask a question in a forum, you either get no answers at all or very rude ones.
I was on the defensive and was blinded by my anger, for that I am very sorry to all you guys.
SimonJ, your solution works like a dream, but the only problem I have now is that I do not know how to define whether the image should be aligned left/right/bottom/top.
uncrate.com & playgrounder.com have they style that I am going for.
Is there a way that I am not seeing on how to put it into an if/else statement??
example:
if (image is to be placed on the left side of the post) {
echo 'class=alignleft';
}
Posted 2 years ago #
for the HTML
<img src="example.jpg" class="alignleft">
<h2>Post Title</h2>
<p>Post Content</p>for the PHP
if (image is to be aligned left) {
echo '<img src="example.jpg" class="alignleft">';
} elseif (image is to be aligned right) {
echo '<img src="example.jpg" class="alignright">';
}and so on...
is there a way to use SimonJ's function but at the same time distinguish between images that are to be aligned left/right/top/bottom??
my hair is now grey
Posted 2 years ago #
You should be able to set the alignment when you insert the image into the post, however if you're not placing the images in the post then you need another way to determine how that image will be aligned..
So what will determine alignment, a custom field? The time? Random guess? ...
To conditionalise a piece of code you will need something to conditionalise the data against, be it a custom field or whatever else, so how do you want to tackle it?
NOTE: In terms of image display, there's not really any such thing as top or bottom alignment. Floats can be used for left and right, margins for centering, top and bottom don't really apply in the same way... webpages naturally flow from top to bottom, if you want it further up, you generally just move the code upward, as appose to declaring some form of top alignment..
Although vertical alignment declarations exist (in CSS and HTML), they don't necessarily operate how you'd expect and only work for particular element types, they're going to be of little use when it comes to images.
To do so with my solution, I would do it with a custom field...
I don't have the time right now to explain exactly how to do it, but the principle should be to create a custom field, let's say "image-position"... Then, when you write a post, you define a class in the field (for instance : left, right).
Then, you define these classes in your css and you tweek my function to echo the class in the div...
I agree with t31os_... I don't see how you can "vertical align" an img in a post...
I'll try to give you more input later today.
@+
S.
Posted 1 year ago #
Worked a treat... just had to change the code to remove the extra () after echo wp_get_attachment_image
function my_image_tag() {
global $wpdb;
global $post;
$my_post_image = $wpdb->get_var("SELECT ID FROM $wpdb->posts where post_parent= $post->ID and post_type = 'attachment'");
if ($my_post_image == 0) {
echo "";
}
else {
echo wp_get_attachment_image()($my_post_image, $size='large', $icon = false);
}
}Line should read:
echo wp_get_attachment_image($my_post_image, $size='large', $icon = false);
Thanks for the help guys!
This topic has been closed to new replies.
