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>
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 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>';
}
?>
What's the best way to make multiply-page menu?
For example Category1 -> Article -> Full article text?
Not dropdown menu.
There's site example: http://fl.jetcode.lv/service.html
There are on page "Услуги" (Services), list with point's (Обслуживание windows, Подключение интернета, Сборка компьютеров, Чистка вирусов, ...)
When i click one of them (for example 'Обслуживание windows'('Maintenance windows')), i need to get page with points of that category like Установка Windows XP /Vista /7 /8 / W.S 2003,2008 (Installing Windows), Установка Linux (Installing Linux). And each Category have their own list of that text. So what's the best way to make that?
By steps:
1. I'm here: http://fl.jetcode.lv/index.html
2. I click on 'Обслуживание windows', and go to that page http://fl.jetcode.lv/service.html
3. Now i see a list with services on that category
4. Click on 'Полное описание', under 'Установка Windows XP /Vista /7 /8 / W.S 2003,2008'
5. And get to that page http://fl.jetcode.lv/service_inside.html
So how i can structure that's menu with WordPress ?
I've created a Posts with first categories (Category1), then i added it to Appearance->Menus, and get that list on page. Now i can manage their content in post, but it will be hard for end-user. So i trying to make list with second-category in post, and stucked. So can somebody please advice how it correctly/better to do ?
Thanks!
To put this simply,
You won't be needed to change anything to header but in category.php.
Instead of including the <section id="menu"> in the header put it on categories.php then to the usual get post contents and you are done.
The logic isn't in the menu but the flow of how you call each file/element.
This is the sample structure in category.php
<h1 class="post-title"><?php single_cat_title(); ?></h1>
<!-- Display all posts under specific Category -->
<?php while(have_posts()): the_post(); ?>
<hr />
<div id="category-post">
<!-- Display the Post Title -->
<h1><?php the_title(); ?></h1>
<!-- Display the Date & Time of Post -->
<p class="post-date">Posted on <span><?php the_time('F j, Y'); ?></span></p>
<!-- Checks if the post has Featured Image, else will load
the default thumbnail called post-thumb.jpg.
Delete ELSE CLAUSE to remove default thumbnail feature.
-->
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( add_image_size( 'post-thumbnail'), array( 'class' => "post-thumb" ) );
}
else {
echo '<img class="post-thumb wp-post-image" src="';
echo bloginfo( 'stylesheet_directory' );
echo '/_/img/post-thumb.jpg" />';
}
?>
<!-- Display the excerpt if specified IF NOT, will display the
first 20 words in the actual content.
See functions.php for the excerpt lenght setting.
-->
<div class="category-content">
<?php the_excerpt();?>
</div>
<!-- Displays a link to the actual post -->
<a class= "category-read" href="<?php echo get_permalink() ?>">Read</a>
</div>
<?php endwhile; ?>
<!-- Displays the link for NEXT and PREVIOUS entries.
By default, only 10 posts per page can be loaded.
See [Settings > Reading] in Wordpress Panel to configure
-->
<div id='paging'>
<?php next_posts_link('« Older Entries ') ?>
|
<?php previous_posts_link(' Newer Entries »') ?>
</div>
Hello and thanks for reading. I am a .NET developer and don't know PHP (Although I am working on learning on the job) and what I am working on was made my consultants that we dont have contact with anymore. When a news post is clicked it appears to display using a template single.php. Followed is the code for this page:
<div id="marketBanner">
<div id="banner">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/services-banner.jpg" alt="" />
</div>
<div id="breadcrumbWrap">
<div id="breadcrumbs">
<?php
if(function_exists('bcn_display'))
{
bcn_display();
}
?>
</div>
</div>
</div>
<div id="content">
<div class="left">
<h2><?php the_title(); ?></h2><br />
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="the_details">
Posted: <?php the_date(); ?> | View All News
</div>
<?php the_content(''); ?>
<?php endwhile; endif; ?>
</div>
Why does this page get used when a post is chosen? I want only a certain category of post to use this page and another category of post to use a different template. How do I achieve this?
You need to study the Wordpress Template Hierarchy # https://codex.wordpress.org/Template_Hierarchy#Single_Post_display
A template (PHP file) is looked for in this order (only on wordpress).
1 - single-{post_type}.php - If the post type were product, WordPress would look for single-
2 - product.php
3 - single.php
4 - index.php
In your case I would use single.php to create a template for the average post then specifically create a template for the one you want different using single-'post_type'.php
You can change the post type when creating a post.
Take a look at the Wordpress Template Hierarchy. It explains which templates get used and will probably be super helpful if you're just starting out with WP. You can use WP syntax to create category pages - but at the archive level - not the single post level.
To create separate pages based on post categories see here and below:
<?php
$post = $wp_query->post;
if (in_category(9)) {
include (TEMPLATEPATH.'/single-specific9.php');
return;
}
if (in_category(8)) {
include (TEMPLATEPATH.'/single-specific8.php');
return;
}
if (in_category(11)) {
include (TEMPLATEPATH.'/single-specific11.php');
return;
}