To get it out of the way here is my code
<!-- Start Slider -->
<?php
// Get Data From Meta
$images = rwmb_meta( 'cam_slider_images', 'type=image_advanced' );
// Blank Variable To Append Too
$slider_image_output = "";
// Append Meta Value To Variable
foreach ( $images as $image )
{
$slider_image_output.= '[slide][image src="'.$image['url'].'" alt="'.$image['alt'].'"][/slide]';
}
// Echo The Shortcode With WordPress :)
echo (do_shortcode('[slider animation="fade, slide" slide_time="4000" slide_speed="500" slideshow="true" random="true" control_nav="false" prev_next_nav="true" no_container="true"]'. $slider_image_output . '[/slider]'));
?>
<!-- End Slider -->
I am attempting to display the images in the slider shortcode, now it works great however on the page the images only come out to be 150x150 pixels which is thumbnail size. So if you look at the image src url in firebug etc its -150x150.. so I was wondering how could I make WordPress export fullsize.
I am using the X theme and its shortcodes.
Thanks in advance.
EDIT
Also using the following plugin for my meta box
http://metabox.io/docs/get-meta-value/
I don't 100% get what exactly you are trying to achieve , but using documentation page you sent,
you can try change your line :
$slider_image_output.= '[slide][image src="'.$image['url'].'" alt="'.$image['alt'].'"][/slide]';
to this one:
$slider_image_output.= '[slide][image src="'.$image['full_url'].'" alt="'.$image['alt'].'"][/slide]';
Related
I am trying to run a function which is using a featured image as my header image on my webpage I want to include the options to also allow my end user to select between using the featured image or to select a slider instead if they wish to use that page depending here is the code I have for the featured image development.
add_action('neve_before_primary', 'getPageFeaturedImage', 5);
function getPageFeaturedImage() {
// These two variables will only be used if set
$pageTitle = get_field('page-title');
$pageSecondTitle = get_field('page_second_title');
if (has_post_thumbnail($post -> ID) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post -> ID ), 'single-post-thumbnail');
<div class="featured-image-container">
<img src="<?php echo $image[0]; ?>" class="featured-image">
</div>
</div>
This code when run is making the feadured image the main image on the page with a title container on top of it with some css which doesnt matter for this question below you will find the code I have for the slider.
function smartsliderheader() {
echo '<div class="smart-slider-header">';
$slider = get_field("smart_slider_header");
echo do_shortcode($slider);
}
This on its own does what I need it to do the featured image code works and so does the slider but getting them both to run toghether and have only one of them run if the other has no options used is where I could used some help.
Any help with this will be much apprechiated. I look forward to your questions if I have missed something out.
I would simply do this using an if statement checking if the $pageTitle and the $pageSecondTitle are empty
if(empty($pageTitle) && empty($pageSecondTitle)) {
// do stuff for when settings aren't filled in
}
else {
// do stuff for when settings are filled in.
}
I don't know if this answers your question. Let me know if this goes into the direction you want to go so I can build on it further.
I was actually able to solve this by myself by doing the following code we are using 2 variables one is for a featured image and the other is go a slider please look below for the code and an explanation.
if(!$checkFeaturedImage and !$slider) {
return null ;
}
This is checking to see if either of these variable's have a value assigned to them e.g. if a featured image is selected a value will be assigned to it and vice versa for a slider what this is doing if neither of these have a value it will stop the rest of the function running and save render time on the site.
if ($slider) {
echo '<div class="header-featured-image">' ;
echo do_shortcode($slider);
echo '</div>' ;
}
What this is doing is it is making a call to an advanced custom field set up to allow a slider to be selected and if a value is returned that value is then being directly echoed out onto the page.
else {
if (has_post_thumbnail($post -> ID) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post -> ID ), 'single-post-thumbnail'); }
?>
<div class="header-featured-image">
<div class="featured-image-container">
<img src="<?php echo $image[0]; ?>" class="featured-image">
</div>
</div>
}
<?php
}
What this is doing is this is displaying our featured image onto our page if a value is returned by our page editor.
The way this code has been set up is if a featured image and a slider have both been selected it will default back to a slider as that is the first call and due to the null statement at the beginning if nothing is selected nothing will run saving some rendering time.
I had some trouble with facebook pulling the wrong images from Wordpress links added to the FB news feed. I was able to correct it with the "if" snippet of code below. I added the "else" statement to provide for a fall-back image in case the user hasn't added a featured image to the linked WP post, but it doesn't seem to be working. Obviously I'm no php coder... any help?
<?php
if ( has_post_thumbnail())
{
$fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
else {
$fb_image = wp_get_attachment_image_src ("http://MY-IMAGE-URL"), 'full');
}
?>
I also tried the code below in the else statement, but to avail
wp_get_attachment_image_src( 732, $size, $icon )
Thanks in advance
The function wp_get_attachment_image_src is used to get the URL (src) for an image attachment.
However, you cannot directly pass on an URL like you do as it works based on an attachment ID.
In your else statement, replace the line with the following in order to work with a default image :
$fb_image = "http://MY-IMAGE-URL";
Hope this helps
I have a challenge with a wordpress theme I'm developing, but I think what I'm after is really just a general php/JS solution, nothing Wordpress specific.
So I have the below code with pulls in the thumbnail and description for an array of images I have uploaded. What I'd like to do is when a user clicks on the link the description and caption associated with that image is displayed in a div elsewhere on the page.
My issue is that so far the only way I can think of to do that is to set a javascript variable within my php foreach statement, but the problem with that is that this overwrites the variable value each time (as I can't change the variable name) so by the end of it all I don't have a different JS variable for each image, I just have one with the details from the last image in the array.
I know AJAX might be one way forward, but I know pretty much nothing about it. If anyone can help point me in the right direction I'd really appreciate it.
Thanks
<?php
$gallery_images = get_custom_field('galleryImages:to_array');
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
?>
link
<?php
}
?>
<div id="targetDiv"></div>
I think you're going about this the wrong way, personally. Using AJAX to interact with a WordPress site seems like overkill for the simple ability of showing some peripheral information about an image.
What I would do is have WordPress spit out the image, along with the caption info when the page is initially downloaded, but hide the caption info and then use client-side JavaScript to show/hide it when it's needed.
<?php
$button_html = "";
$caption_html = "";
$gallery_images = get_custom_field('galleryImages:to_array');
$gallery_images_count = 0;
foreach ($gallery_images as $galleryID) {
$description = $attachment->post_content; //get image description
$caption = $attachment->post_excerpt; //get image caption
$button_html .= '<div id="caption-button-' . $gallery_images_count . '" class="show-caption-button">Show Caption</div>';
$caption_html .= '<div id="caption-' . $gallery_images_count . '" style="display:none;">' . $caption . '</div>';
$gallery_images_count++;
}
echo '<div id="buttonDiv">' . $button_html . '</div>';
echo '<div id="targetDiv">' . $caption_html . '</div>';
?>
Then the JavaScript/jQuery:
$('.show-caption-button').click(function(){
var caption_id = $(this).prop('id').substring(15);
$('#caption-'+caption_id).eq(0).toggle();
});
It's hard to test without setting up a WordPress myself, but essentially what we're doing is adding caption divs with numbered id's to a string variable in PHP as we're looping through our images. Then, at the end of the loop, we echo that out to the page.
In JavaScript/jQuery, we're grabbing the corresponding id of the caption button and using it to toggle the relevant caption further down in the page.
I am trying to display some images in my wordpress site. I am trying to make the background div and image via style=""
So when I do this:
<?php
if(has_post_thumbnail($property->ID)){
$image_url = get_the_post_thumbnail($property->ID,array(300,220),array('class' => "post_thumbnail"));
}else{
$image = $image_url = '';
}
?>
<div class="property_photo" style="background-image:url('<?php echo $image_url;?>') no-repeat;">
</div>
The photo is not displaying anymore and it's printing ') no-repeat;"> where the image should display. When I use a variable without an "_" in the name, it doesn't print anything. So to avoid that I tried $image = $image_url = ''; to get around that.
Is this is a simple syntax problem or is there something in the php that is causes this? It doesn't seem like syntax because when I use other variable it does not do this.
Your get_the_post_thumbnail() function is returning HTML, not a URL. You need to either change the function to only return a URL (or use a different function which does that), or change your HTML to put the image inside the div instead of setting it as a background image.
Im trying to add a little code to an already made thumbnail plugin.
Basically i want to get the image src of an image and the just print it into the HTML, but everytime i run it, its just echoing 'Array'
This is what i have so far.
$testing = wp_get_attachment_image_src($post_thumbnail_id);
$html = '<a href="'.$testing.'">';
Any help would be greatly appreciated.
According to the Wordpress Documentation for wp_get_attachment_image_src the return value is:
An array containing:
$image[0] => url
$image[1] => width
$image[2] => height
Therefore, this is what you need:
$html = '<a href="'.$testing[0].'">';