Wordpress image caption doesn't display correctly - php

I have a Wordpress page, in which my images appears on left and my text appears on right. The images fall down under the text when the page is loaded on mobile screen. I have a PHP code to achieve all of that, basically it switchs image and text places, and attributes left or right to each.
But since this is in place, I have trouble adding images' captions. When I want to add images' captions in my Wordpress admin, the caption doesn't come under the image but it comes up my text article (so, on the right part of the page). I guess my PHP code attributes automaticaly this place to every text.
I need the images' captions to be under my images, and I guess this has a lot to do with that PHP code you can see below. But I don't know how to fix that.
Here is my PHP:
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div id="content_post">
<div class="col-lg-push-5 col-lg-6 col-md-push-6 col-md-6 col-sm-12 col-xs-12 ">
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
</div>
</div>
<div class="col-lg-pull-6 col-lg-5 col-md-pull-6 col-md-6">
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img; } ?>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>

To appropriately handle the caption you need to get the attachment post object and then look at the post_excerpt.
There's a function in WordPress get_attached_media, which will list all of the images within a posts content. This be easier to iterate over then using regex to find the images.

Related

Random Testimonial in Between each Blog Post on home.php - Wordpress

I have the normal WP loop for showing blog posts on home.php. Im trying to get a random div to populate after each blog post. So it will be:
BLOG POST -> RANDOM DIV -> BLOG POST -> RANDOM DIV
and so on...I've tried to create "testimonials" post type and randomize them with WP_Query, but it still will only pull one PER PAGE. I need multiple to display, but differently below each post. I am also using ACF, so I created testimonial custom field blocks, but I still cant them to randomize display multiple items.
PHP (within loop):
<a class="row blogRoll"href="<?php the_permalink(); ?>">
<div class="blogImg col-sm-3">
<?php the_post_thumbnail(); ?>
</div>
<div class="col-md-9 blogBlack">
<h2 class="entry-title"><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div><!-- .entry-content -->
</a>
<div class="testimonial">
<?php the_field('testimonial_content1', 'option');
the_field('testimonial_author1','option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content2', 'option');
the_field('testimonial_author2', 'option'); ?>
</div>
<div class="testimonial">
<?php the_field('testimonial_content3', 'option');
the_field('testimonial_author3', 'option'); ?>
</div>
</div>
JS:
var elems = $(".testimonial");
if (elems.length) {
var keep = Math.floor(Math.random() * elems.length);
for (var i = 0; i < elems.length; ++i) {
if (i !== keep) {
$(elems[i]).hide();
}
}
}
Obviously, the loop is causing me the headache, because it will pull most recent posts and I just need to pull and not DUPLICATE the testimonial divs below a blog post. Any ideas will be appreciated.
Instead of shuffling and outputing the result straight away, you could shuffled an array (pool of testimonials) and then apply the first value to a first .testimonial class for example, and a second value from the shuffled array to the second .testimonial class, ... etc.
That article might be of some help, Randomly iterate through array without pulling duplicate values. You could replace numbers by testimonials... Regards.

php detects types of content in Wordpress post

I would like that my php detects seperatly images (media) and text, from a same wordpress post, in regard to display them in different columns. I am using Bootstrap, and I would like different display of each (text and image) according to the screen size.
Here is a code I have that displays all of the content of my post (image and text) at once, it works perfectly :
<div class="container">
<?php if (have_posts()): ?>
<div class="container">
<?php while(have_posts()): the_post(); ?>
<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<?php the_content(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
</div>
I would like the same way of loading content but instead of having just
<?php the_content(); ?>
I would like something like this to place text and image (of same post) in different div class:
<?php the_image(); ?>
AND
<?php the_text(); ?>
I know this is wrong code but I am trying to be clear in my explanation. I need that my client does not touch any of code, also shortcode in Wordpress post. Any input or advice would be very appreciated!
Many thanks!
Thank you for your answer! Lars Beck, you solved my problem!
Here is the code I was looking for:
<?php
//get content from back office , filter imgs except featured img to place them later in <div id='img_content_right'>
$content2 = get_the_content();
$removed_imgs = array();
$content2 = preg_replace_callback('#(?!<img.+?id="featured_img".*?\/>)(<img.+? />)#',function($r) {
global $removed_imgs;
$removed_imgs[] = $r[1];
return '';
},$content2);
//add filter to the_content to strip images except img_menu et featured_img
add_filter('the_content', 'strip_images',2);
function strip_images($content){
$content=preg_replace('/(?!<img.+?id="img_menu".*?\/>)(?!<img.+?id="featured_img".*?\/>)<img.+?\/>/','',$content);
return $content;
}
the_content();
?>
<div id='img_content_right'>
<?php
//append the images stripped from content
foreach($removed_imgs as $img){
echo $img;
}
?>
</div>
There is no way, to separate out images from the content section if they have just been included as part of the content.
Wordpress has featured image functionality built in for you. so you can use the_post_thumbnail() to echo out the image. Maybe this question can help you Wordpress featured image code
If this isn't enough for you and you need more flexibility you might want to look at advanced custom fields plugin - https://www.advancedcustomfields.com/ it makes it easy for you to add your own fields of any type you want.

Show images from TEXT section on PAGE wordpress

I am trying to show all images on a Page in wordpress. My wordpress page is set up like you see in the image below.
What I want to do is show each of these images on a custom page I have made, called Portrait Album. See code below. I guess it is the opposite of this that i want to implement.
I am not sure how I can show each image in the Text section. Does anyone out there know how to do this? should be obvious but I cannot find an answer anywhere.
I know get_content() will show the content, but how can I specifically show the images, so I can show these in a loop enabling me to make a grid using css and create a photo gallery.
currently this is the code I have:
<?php /* Template Name: Portrait Album */ ?>
<?php get_header(); ?>
<div class="portrait-page" style="background-color: black;">
<?php if (have_posts()) : while (have_posts()) : the_post();?>
<?php the_content(); ?>
echo "<img src='".wp_get_attachment_url( $the_post->ID )."' />";
<?php endwhile; endif; ?>
</div>
</div>
</div>
What I want to do is something like this, where col-1-3 is one-third of the width of the page
<div class="row">
<div class="col-1-3">
echo "<img src='"RELEVANT PHP CODE HERE"' />"
</div>
</div>

Hide section if there is no featured image

I made a custom template for the team I'm working on. I used this code for the template (along with the parts that get the header and footer ofc)
<div class="main-container">
<?php
the_post();
$thumbnail = has_post_thumbnail();
?>
<section class="section-header overlay preserve3d">
<div class="background-image-holder parallax-background">
<?php the_post_thumbnail('full', array('class' => 'background-image')); ?>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="article-body">
<?php
if(!( $thumbnail ))
the_title('<h1>','</h1>');
the_content();
wp_link_pages();
?>
</div><!--end of article snippet-->
</div>
</div>
</div>
</section>
But if there's no featured image, a gray box will appear. I'd rather just have the whole section be hidden if there is no featured image, because it will look much better.
I'm a php rookie so I have no idea how to do this. What I think I need to do: Have an if/else statement check for the featured image. If there is no image, add a class to said section and define 'display none' in my css file for that class.
So this is the code I tried to pair with that, but it did not work:
<?php
// Must be inside a loop.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
$("section:first").addClass("noshow");
}
?>
Is this code incorrect? Where do I need to place this in my document for it to work?
While PHP is executed on the server, jquery is executed on the user end. You could always echo that jquery statement and that way it would be sent to the user.
You could follow the path Martin E. said on his comment (which in my opinion is a much cleaner version) or you could pursue the way you were working on by adding jquery on your header if you haven't and trying something like this:
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
else {
echo '<script>$("section:first").addClass("noshow");</script>';
}
?>

How to place Bootstrap Carousel image captions outside the carousel div?

apologies if this has been covered anywhere here. I tried searching, but only found topics related to styling and positioning captions within the carousel code…
So, I have a layout that contains three columns:
The left column contains general information related to each page/project.
The center column contains a Bootstrap 3 carousel with images.
The right column is where I was planning on displaying all the captions related to the images in the center Carousel.
I can't quite figure out how to get the captions working in the right column. To clarify, the captions will change with each carousel slide, just as they do in the default carousel setting. I basically want to move the captions off the image, and into the right column.
I am using Kirby (www.getkirby.com) as my CMS and I am using a foreach loop to get the code for the images, etc. in the carousel. Here is my current code, including the caption section (which I am trying to move…)
<div id="center" class="col-xs-12 col-sm-6 col-md-8">
<?php $imagepage = $page->children()->first() ?>
<?php if($imagepage->hasImages()): ?>
<div id="merry-go-round" class="carousel slide">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<?php $n=0; foreach($imagepage->images() as $image): $n++; ?>
<div class="item<?php if($n==1) echo ' active' ?>">
<img style="display:block; margin-left: auto; margin-right: auto;" src="<?php echo $image->url() ?>" alt="<?php echo html($image->title()) ?>" class="img-responsive">
<div class="carousel-caption"><?php echo $image->img_title() ?></div>
</div>
<?php endforeach ?>
<?php endif ?>
</div><!-- /carousel-inner -->
<!-- Controls -->
<a class="left carousel-control" href="#merry-go-round" data-slide="prev"></a>
<a class="right carousel-control" href="#merry-go-round" data-slide="next"></a>
</div><!-- /merry-go-round -->
</div><!-- /#center -->
<div id="right" class="col-xs-12 col-sm-3 col-md-2">
<p>THIS IS WHERE I AM TRYING TO PUT THE CAROUSEL CAPTIONS…</p>
</div><!-- /#right -->
I've tried by best but I am all out of ideas. I thought maybe I could do something like make the caption a variable:
<?php $test_caption = $image->img_title() ?><?php echo $test_caption ?>
but this doesn't work outside the carousel area. I'm guessing it's that it won't work outside of the foreach loop?
Anyway, if anyone has any suggestions I would really appreciate it. I'm learning PHP as I go along, but I don't know any javascript so I'm hoping there's a solution outside that. And again, I'm using Bootstrap 3.
Here is a link to a fiddle I made (without all the php stuff…):
http://jsfiddle.net/4tMfJ/2/
Based on Twitter Bootstrap Carousel - access current index
You can add the code below to your javascript (after loading jquery / bootstrap)
$(function() {
$('.carousel').carousel();
var caption = $('div.item:nth-child(1) .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
$(".carousel").on('slide.bs.carousel', function(evt) {
var caption = $('div.item:nth-child(' + ($(evt.relatedTarget).index()+1) + ') .carousel-caption');
$('#right h1').html(caption.html());
caption.css('display','none');
});
});
also see: http://jsfiddle.net/4tMfJ/3/
Thanks Bass for your answer it worked for me !
But i did not want to have replicated content so i did it my way ;)
$("#slider").on('slide.bs.carousel', function(evt) {
var step = $(evt.relatedTarget).index();
$('#slider_captions .carousel-caption:not(#caption-'+step+')').fadeOut('fast', function() {
$('#caption-'+step).fadeIn();
});
});
http://jsfiddle.net/4fBVV/3/

Categories