I am trying to enable the function of images to show in a gallery in a post.
I have tried to just do a gallery the "normal" way in wordpress by uploading images, picking the ones I need and putting them into the post.
$post_id = 83;
$queried_post = get_post($post_id);
$title = $queried_post->post_title; ?>
<div id="gallery" class="section-top">
<h1 class="section-heading"> <?php echo $title; ?></h1>
<p class="center-find"><?php echo $queried_post->post_content;?></p>
</div>
I need to be able to show the gallery on the website. When I use the shortcode from the gallery of random pics I have checked off, I can see the images in the post, BUT when I enter my website on the front-page.php, all I get is the actually shortcode displayed and no images.
If I open the post as a "view post", the gallery is displayed, so I imagine that I am missing something in my code to get the images on the front page.
If I use the short code directly in front-page.php, I get the gallery as well, but then my users can't make the gallery like they want it to look like and would have to manually edit the template files themselves and they know nothing about coding.
You should apply a filter to the post content if you want it to pass the shortcode. You might also want to use get_the_title instead of the post object.
$post_id = 83;
$queried_post = get_post($post_id);
$content = apply_filters( 'the_content', $queried_post->post_content );
$title = get_the_title($post_id);
<div id="gallery" class="section-top">
<h1 class="section-heading"> <?php echo $title; ?></h1>
<p class="center-find"><?php echo $content; ?></p>
</div>
Related
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.
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.
I am trying to display an image caption for a wordpress Advanced Custom Fields (ACF) repeater field, and haven't had any luck with the follow three options:
<?php if($middle_image['image']): ?>
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
<?php $caption = $midimage->post_excerpt; ?>
<?php $captiontwo = $middle_image['image']['caption'] ?>
<?php $captionthree = $middle_image['image']->post_excerpt; ?>
<?php $alt = get_post_meta($middle_image['image'], '_wp_attachment_image_alt', true); ?>
<?php $main_image = wp_get_attachment_image_src($middle_image['image'], 'two-column-cropped' ); ?>
<div class="two-column-cropped"><img src="<?php echo $main_image[0]; ?>" alt="<?php echo $alt ?>" />
<?php if($caption) { ?>
<div class="image_caption"><?php echo $caption; ?></div>
<?php } ?>
</div>
<?php endif; ?>
Any suggestions would be appreciated. Thanks.
wp_get_attachment_src() does not fetch any data about an image besides the URL, height and width. You might want wp_get_attachment_metadata() however I think you would be better off changing your ACF field to return an Image Object (actually an array) instead of the Image ID (as I assume you have it now).
ACF can return any of three things for an image field: The image src URL, the Attachment ID (which can be passed to functions such as wp_get_attachment_image_src()), or the attachment information as an array.
You can check that you are receiving the correct response from ACF by using var_dump($middle_image) or var_dump($midimage)
I assume that $middle_image is your repeater field.
As long as ACF is configured correctly to return the image object (instead of the image URL or ID), you can simply remove this line:
<?php $midimage = wp_get_attachment_image_src($middle_image['image']); ?>
and then access the image caption using $middle_image['image']['caption']
Is it possible to use the_content() excluding the galleries? I want to make this because I need the gallery displayed with flexslider. I already integrate flexslider. If I want to show the content of the post, for example: some text, separated images and of course a gallery. It will display the gallery with flexslider and then the content with the text, images and the gallery again. I don't want the gallery duplicated.
<div class="entry-content">
<?php $gallery = get_post_gallery( get_the_ID(), false );?>
<div class="flexslider flexslider-gallery">
<ul class="slides slides-gallery">
<?php foreach( $gallery['src'] AS $src ){ ?>
<li>
<img alt="Gallery image" src="<?php echo $src; ?>" />
</li>
<?php } ?>
</ul> <!-- end .slides -->
</div> <!-- end .flexslider -->
<?php the_content(); ?>
</div><!-- .entry-content -->
Ok here is the solution:
Add to functions.php
function remove_shortcode_from($content) {
$content = strip_shortcodes( $content );
return $content;
}
and then call it when you need, in my case in content-gallery.php:
add_filter('the_content', 'remove_shortcode_from');
the_content();
remove_filter('the_content', 'remove_shortcode_from')
Two ways:
1) The WordPress Gallery is contained in a div with class .gallery. If flexsider does not also use that class, you could simply set your CSS to:
.gallery { display: none; }
2) You could get the content with get_the_content, parse it using a DOM parser and delete the Gallery.
Option #1 is less efficient, but avoids the complexity of parsing the DOM.
Neither method is guaranteed to work if the site is use a non-standard gallery plugin that is creating non-WP HTML.
I'm building a website for a good friend of mine and i'm stuck on this one.
I want an adaptable background image on the homepage so he can customize it on the customize page in the wordpress admin page.
My code now looks like this:
get_header(); ?>
<div id="slides">
<div class="slides-container">
<img src="<?php bloginfo('template_directory'); ?>/images/Home.jpg" alt="Cinelli">
</div>
<nav class="slides-navigation">
<img src="<?php bloginfo('template_directory'); ?>/images/right.png" alt="left">
<img src="<?php bloginfo('template_directory'); ?>/images/left.png"alt="right">
</nav>
</div>
<div class="welcometext">
<h1><?php echo get_bloginfo( 'name' );?></h1>
<?php echo bloginfo('description');?>
</div>
<?php get_footer(); ?>
now the image tag needs to be adaptable.
Is this possible?
It may be easier to pull the image from a WordPress Page's Featured Image than to use the Customize page.
To enable Featured Images, add this line to your theme's functions.php file: add_theme_support( 'post-thumbnails' );
Now upload an image to the Featured Image area of a WordPress page. This can be any page, you just need to take note of the Page's ID. To get the Page ID, go to the edit screen for the Page and look at the URL in your browser. It will end with something like post.php?post=34&action=edit where the number after post= is the Page's ID, in this example it's 34.
Now modify your image code:
<?php $feat_image = wp_get_attachment_url( get_post_thumbnail_id(34, 'full') ); // replace '34' with your Page's ID ?>
<img src="<?php echo $feat_image; ?>" alt="Cinelli">
Replace 34 with your Page's ID. If you are using this code within the Loop, you can replace 34 with $post->ID.
The 'full' in the first line tells it which size of the image to use. 'Full' will use the original image you upload, or you can use 'large', 'medium', 'thumbnail', or any custom image size you've set up.