I'm creating a custom image gallery shortcode that opens the images in a lightbox. The line that outputs the images is:
$image_output = "<a href='" . wp_get_attachment_url( $id ) . "' data-toggle='lightbox' data-gallery='$selector' data-footer='$attachment->post_excerpt'> " . wp_get_attachment_image($id, $atts['size'], false, $attr ) . "</a>";
Everything works great except this links to the original (and full size) image. I want it to instead link to a custom image size. I tried wp_get_attachment_url( $id ) with wp_get_attachment_image_src( $id, 'gallery-thumbnail', false ).
However, instead of getting the desired image url I get Array. Any ideas what I'm doing wrong? Should be using something else?
wp_get_attachment_image_src() returns an array (url, width, height) so use
wp_get_attachment_image_src(...)[0]
wp_get_attachment_image_src takes the post_id and required size as parameters, and returns an array containing:
[0] = url
[1] = width
[2] = height
[3] = is_intermediate (i.e. whether it is a resized image or the original)
Therefore to get the url for a custom size called gallery-thumbnail, you need to do the following:
$img_attrib = wp_get_attachment_image_src( $id, 'gallery-thumbnail');
if ($img_attrib)
$url = $img_attrib[0];
$image_output = "<a href='".$url."' [...rest of code...] </a>";
I've done it step-by-step so you can see what's happening but you can of course shorten this as follows - however this will have a broken link if the image can't be found.
<a href='".wp_get_attachment_image_src( $id, 'gallery-thumbnail')[0]."' [...rest of code...] </a>"
Note: This assumes you have defined your custom size in functions.php using add_image_size and regenerated your thumbnails so that version of all images has been created.
Ref: Developer Reference for wp_get_attachment_image_src
Related
I have a grid of thumbnails that when clicked on I want to load an overlay on the page showing the full size image and the contents of a text file as a caption.
Something like
<image src="thumbs/1001.jpg"> would just load the image, but I want to load the image in a light box sort of view and also load the contents to "desc/1001.txt" into a caption (not necessarily a <caption>) below the image.
I don't want it to reload the page if that can be avoided. If it helps, the images, thumbnails, and description all match the pattern above, or I also have a CSV file in the format of 1000,"Description of the picture" if that is simpler.
If you use something like https://lokeshdhakar.com/projects/lightbox2/#getting-started this should be fairly easy.
Your PHP code would look something like this:
<?php
$photos = [1000,1001];
foreach ($photos as $photo) {
$description = file_get_contents('desc/' . $photo . '.jpg');
echo '' . $photo . '';
}
?>
I am working on a project to help optimize the content of a site for search engines and all of the images and links within this plugin are not pulling the alt text and titles for the images and anchors within the portfolio.
I have looked through the waving-portfolio.php file to see where this issue might be originating and the lines that add the images and links for the modals and lightbox do not pull alt text or titles.
I am looking for a quick fix to add some lines of php to that file so that the hundreds of images and links have alt text and titles attributed to them.
Here is what that section of the file looks like currently on the site I am working on.
if($width != 0){
$image_code = '<img src="'.$image[0].'" style="width:'.$width.'px" />';
}else
{
$image_code = '<img src="'.$image[0].'" style="height:'.$height.'px" >';
}
So how do I add something to those lines of code to make it pull the alt text and title of the image from the media library?
https://wordpress.org/plugins/waving-portfolio/
$title = $alt = get_the_title();
if($width != 0){
$image_code = '<img title="'.$title.'" alt="'.$alt.'" src="'.$image[0].'" style="width:'.$width.'px" />';
}else
{
$image_code = '<img title="'.$title.'" alt="'.$alt.'" src="'.$image[0].'" style="height:'.$height.'px" >';
}
I fixed this lack of SEO problem in Waving Portfolio and submitted an update just now, all you have to do is remove and install your plugin again.
The fix added "img" meta information for all of the internal gallery as well.
For general benefits here is the code I have added to fetch the "alt" & "title" for an attachment (In our case a featured image). In Line 300 inside of "waving-portfolio.php" I added these lines of code to get the desired information:
$image = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID() ), 'single-post-thumbnail' );
// Get the featured image ID
$post_thumbnail_id = get_post_thumbnail_id(get_the_ID());
// Retrieve the title of the image
$title = get_the_title( $post_thumbnail_id );
// Retrieve the alternate text of the image
$alt = get_post_meta($post_thumbnail_id, '_wp_attachment_image_alt', true);
You can see the effect in the Demo page, although I haven't given any meaningful titles for the images so far, but soon I will do :)
Thanks
I am having trouble with using custom image size.
I have this in function.php:
//function to call first uploaded image in functions file
function main_image() {
$files = get_children('post_parent='.get_the_ID().'&post_type=attachment
&post_mime_type=image&order=desc');
if($files) :
$keys = array_reverse(array_keys($files));
$j=0;
$num = $keys[$j];
$image=wp_get_attachment_image($num, 'test', true);
$imagepieces = explode('"', $image);
$imagepath = $imagepieces[1];
$main=wp_get_attachment_url($num);
$template=get_template_directory();
$the_title=get_the_title();
print "<img src='$main' alt='$the_title' />";
endif;
}
add_image_size('test', 145, 145, true);
So what this does it check for the post's thumbnail, and if there is none, it searches to the first image in a post. So far so good, but I can't get it to display the image size that I want.
wp_get_attachment_image($num, 'test', true); should be displaying the 'test' size, which is created when uploaded (I also ran regenerate thumbnails, and all the images have been resized). But no matter what I enter instead of test (full, medium, thumbnail, etc), the code always call the full image (which gets squished to the 145x145 size instead of displaying the cropped thumbnail).
The code is from http://www.wpbeginner.com/wp-themes/how-to-set-a-default-fallback-image-for-wordpress-post-thumbnails/ (its old code, so probably some change in WP is making this fail).
Its the last thing I need to do to finish a site.
I have a slideshow set up with Magic fields like the code below, but
now I need each image to have a seperate link. How can I set this up?
I just can't think how I can add this to the code below, I appreciate
any help anyone can offer me.
<div id="slider">
<?php
$images = getFieldOrder('slideshow_slide');
if(is_array($images)){
foreach($images as $image){
echo get_image('slideshow_slide',1,$image);
}
}
?>
</div>
Hooray MagicFields! <3
There are two ways to get an image in MagicFields.
Method 1 will return a full image tag:
echo get_image('slideshow_slide');
Method 2 just returns the url of the image:
echo get_image('slideshow_slide',1,1,0);
In order to generate a link to your full-size image, you'll need to construct an anchor tag using the second method. Maybe something like this:
$image_path = get_image('slideshow_slide',1,1,0);
echo 'Insert link text or thumbnail here';
You might need to modify the above to work with your foreach loop, but that's the basic idea.
Update:
Here's what you need to do. Create another duplicateable text field, called image_url. This field will hold the link for your image. Each image will need a corresponding url. This loop should do what you want:
if(is_array($images)){
foreach($images as $image){
$image_url = get('image_url',1,$image);
echo "<a href='" . $image_url ."'>" . get_image('slideshow_slide',1,$image) . "</a>";
}
}
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].'">';