I have ACF set up to be called into a fancybox. It's pulling in the fields (because I can see the hardcoded header information) but nothing from the ACF. I've set the link to call an ID which is then assigned to the section I want to call when clicked.
I expect to click the image and open the fancy box with the ACF image and content displaying in the fancybox. What I get is header fields and no acf content.
I've tried removing the display none from the class.
I tried hard coding a basic a tag calling a p and that seemed to work, but when I put in the ACF information, it breaks.
I also removed all of the php and just hard coded in an image and content, and it works. It just doesn't like the php calling my ACF.
<a href="#popup" data-fancybox>
<img class="image" src="<?php the_field('project_image', get_the_ID()); ?>" />
</a>
<section id="popup">
<img src="<?php the_field('project_image', get_the_ID()); ?>">
<h3>About</h3>
<p><?php echo $about_content;?></p>
<hr class="hr-left">
<h3>Features</h3>
<p><?php echo $features_content; ?></p>
<a class="btn secondary-btn" href="<?php echo $code_reference_url; ?>"><?php echo $button_text; ?></a>
</section>
When the image is clicked, a fancy box will open and display the content within the "popup" div. What's happening is that it's opening the lightbox and populating with empty fields.
I was able to resolve this. I didn't have the information operating inside the loop. See solution below:
<?php while ($loop->have_posts()) : $loop->the_post();
$about_content = get_field('about_content');
$features_content = get_field('features_content');
$button_text = get_field('button_text');
?>
Related
I am quite new to creating websites with WordPress so I might ask a question which is quite straightforward but I could not find any suitable tutorials/answers to guide me.
I want to create dynamic text elements which I can edit within Wordpress. I have created a full website in HTML, CSS, and Javascript and I converted it to Wordpress pages.
Let's have a look for example to my about page:
about.php
<?php
get_header();
// Template Name: About
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<h2>Titel example</h2>
<p>A very long text.....</p>
<p>Another very long text</p>
Contact <i class="fa fa-chevron-circle-right" aria-hidden="true"></i>
</div>
</div>
<?php
get_footer();
?>
Now I want to be able to edit the title (<h2>) and text (<p>) and hyperlink (<a>) text in Wordpress. So that I can change the title etc.
I tried to use Advance custom fields by calling: the_field() or by using a shortcode but the text did not show up on my page.
So my question is: is Advanced custom fields the best way to do this because I can not make it work and are there other ways of achieving editing text within Wordpress.
For pages just use the WordPress loop: https://codex.wordpress.org/The_Loop
<?php
get_header();
if(have_posts()):
while(have_posts()): the_post();
?>
<div class="row fullwidth">
<div class="col-md-6 col-sm-6 about-section-right">
<?php the_content(); ?>
</div>
</div>
<?php
endwhile;
endif;
get_footer();
?>
You create a page "About" in the backend in "Pages" and here you go. All contents within the_content(); are created by the WYSIWYG editor of the page.
Custom fields are for adding any custom or specific information to a post or page.
Most probably you do not need an extra template file for your about page and you can use a page.php file for all pages.
You can conditionally include data depending on custom fields and/or the page you are on.
Read more about custom fields here:
https://codex.wordpress.org/Custom_Fields
... and about conditional tags here:
https://codex.wordpress.org/Conditional_Tags
It will help you understanding it.
There is a part in my website where the last 6 posts are reviewed and this is the HTML code for it:
<div class="latest-posts">
<div id="latest-posts-title">
<p>My Website's latest posts</p>
</div>
<div id="latest-posts-pictures"> <img src=""width="190px" height="190px" alt="latest-posts-pictures"> </div>
<ul>
<li>Post1</li>
<li>Post2</li>
<li>Post3</li>
<li>Post4</li>
<li>Post5</li>
<li>Post6</li>
</ul>
I want to add a feature to make the user able to see the post's picture when he/she hovers the post's link in the code above.
I've used this PHP code and it works well:
<ul>
<?php
$my_query = new WP_Query('showposts=6&cat=my_category');
while ($my_query->have_posts()):
$my_query->the_post();
$do_not_duplicate = $post->ID;?>
<li><?php the_title(); ?></li>
<?php endwhile; ?>
</ul>
But this code does not contain the picture part that I want.
Do you know how can I make this feature available for my users?
Please note that it is not important for me to use PHP or JavaScript, all I
want is to make it possible for the user to see the post's picture
when he hovers its link.
You can display featured image of the post using following code:
// Check if the post has a Post Thumbnail assigned to it.
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
You can check this link for more information.
https://developer.wordpress.org/reference/functions/the_post_thumbnail/
Firstly there are 101 questions similar to this one, however still unable to answer this question.
I am creating a similar interface to youtube, with video thumbnails on the right side and a pain playing pane.
My loop for displaying thumbnail images is as follows:
<?php function getVimeoThumb($id) {
$data = file_get_contents("http://vimeo.com/api/v2/video/$id.json");
$data = json_decode($data);
return $data[0]->thumbnail_medium;
} ?>
<div id="thumb">
<img src="<?php echo getVimeoThumb($id);?>" alt="">
<h4><?php the_sub_field('child_title'); ?></h4>
</div>
My main feature video is displayed as follows:
<div id="feature">
<h4 id="mainTitle"><?php the_sub_field('video_title'); ?></h4>
<iframe src="https://player.vimeo.com/video/<?php the_sub_field('video_id')?>" width="500" height="282"></iframe>
</div> <!-- end of feature Container -->
The initial load will be conducted by PHP, however the DOM manipulation should be achieved by javascript.
Questions
How can I swap just the ID and text between these two divs.
I would also like to hide the thumbnail that has been clicked as it is shown in the feature frame.
Many thanks
On your thumb, you could put the id on a rel on your div so you can retrieve it easily via jQuery:
`<div id="thumb" rel="your_id">...</div>`
And a $('#thumb').attr('rel') to get it.
Then you can create a JavaScript function that gives you the full URL from the ID and update your iframe src via $('#feature iframe').attr('src','your_url')
I've got a video upload for tinymce, which inserts some code into the editor like so:
var content2 = "<div class='playvideo' id='<?php echo $randomnumber;?>'>
<img class='posterimage' src='<?php echo $new_image_path; ?>'>
<a id='<?php echo $new_file; ?>' class='videoplaceholder'></a>
</div></div>";
parent.tinyMCE.execCommand('mceInsertContent', false,content2);
this works fine, and outputs this :
<p><div id="581827" class="playvideo">
<img class="posterimage" src="/uploads/videos/images/1097VID.jpg" alt="" />
<a class="videoplaceholder" id="1097VID.mp4"></a>
</div></p>
But after this content is inserted, ofcourse I would like to continue writing text. But when I do that, the text gets placed inside my inserted content after the img tag.
like so:
<p><div id="581827" class="playvideo">
<img class="posterimage" src="/uploads/videos/images/1097VID.jpg" alt="" />text i try to write goes here for some reason
<a class="videoplaceholder" id="1097VID.mp4"></a>
</div></p>
Fiddle example
When enter is clicked for new line, it creates a second div with the same class as what I inserted. It's a weird behavior.. I read that a div is illegal inside a paragraph, but it doesnt work with span either.
Does anyone have any pointers? Any help is greatly appreciated.
The problem of the text getting inserted after the img can be fixed by putting an as the link text i.e. instead of <a id='<?php echo $new_file; ?>' class='videoplaceholder'></a> you can use <a id='<?php echo $new_file; ?>' class='videoplaceholder'> </a>. I am not sure about the class though, may be there is a way to prevent TinyMCE from adding the class by default.
So I can't find myself an answer or explanation for a problem / question I have.
What I want to achieve is pretty complicated. For illustrating, here's a JSFiddle - http://jsfiddle.net/GXaeL/3/
Could someone explain me, is this even possible to show the content of first row posts in one div below them. Same thing for the second row of posts etc.
I myself have had in mind that:
To combine somehow Tabs and Accordions?
This is purely an CSS positioning problem?
This is far more complicated than just accordions and CSS?
Since now, I have a PHP code, that creates a grid of posts. .posts are floated left and the row cleared when it hits 3.
<div class="post">
<a href="<?php the_permalink() ?>" rel="bookmark">
<?php if ( has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/fallback_image.jpg" alt="<?php the_title(); ?>" />
<?php } ?>
</a>
</div>
<?php
if($c == $bpr) :
?>
<div class="clr"></div>
<?php
$c = 0;
endif;
?>
<?php
$c++;
endwhile;
?>
<div class="clr"></div>
May-be someone can push me to the right path on this?
I'm not exactly sure what your preferred implementation would be, so I'll offer a couple options.
The first option is similar to you put together on jsFiddle, except I wrapped the "trigger" <div> tags in a <div> of their own and added a "content" <div> tag to the single "content" <div> tag that you were sliding down and up... easier explained in code:
<div id="row1" class="item-info">
<div class="item">item-1</div>
<div class="item">item-2</div>
<div class="item">item-3</div>
<div class="item">item-4</div>
</div>
<div id="contentRow1" class="item-info" style="display:none;">
<div class="item-content">content div for item-1</div>
<div class="item-content">content div for item-2</div>
<div class="item-content">content div for item-3</div>
<div class="item-content">content div for item-4</div>
</div>
For this solution, the jQuery code you were using wouldn't need to change.
The second option is a bit more complex, but it allows each answer to be displayed individually rather than having to be displayed with all the other answers in the row.
Admittedly, there may be a more elegant, or jQuery UI-focused solution, but that's fine... I'll learn from that, too.
For now, I'll offer the details of Option 2 on jsFiddle, which I forked from what you offered in your question.
Let me know if you have questions, and I hope this helps.