I'm am currently working on an Album Gallery and I am using this CMB2 plugin
https://github.com/WebDevStudios/CMB2
to create my custom fields. What I am using right now is the file_list field which allows me to upload multiple/bulk images.
But the problem is that I am not sure how to display each item. I would like to get the url of each item so I can use each as an image source.
What I am trying to achive is something like:
<li><img src="<?php echo $file_list; ?>" alt="" /></li>
Meaning, each item would be wrap in 'li img' and file link would be added as a src.
Your help would be much appreciated.
I hope this helps...
<?php $meta_values = get_post_meta(get_the_ID(), '_yourprefix_demo_file_list', true);
foreach($meta_values as $meta_value) {
echo '<li><img src="'. $meta_value . '"/></li>';
}
?>
actually I've made it worked with this:
<?php
$count=0;
if (is_array($album_files))
{
foreach ($album_files as $files)
{
$count++;
if (1 == $count) {
echo
'<figure>',
'<img ','src="', $files , '" ','>',
'</figure>';
}
}
}
?>
Hopefully this can help others as well.
Related
I'm using the information here http://ieg.wnet.org/2016/02/replacing-default-wordpress-gallery-shortcode/ as the basis for a custom gallery shortcode, and trying to create this carousel slider https://www.jssor.com/demos/image-gallery.slider. Problem is I don't know how exactly to implement it.
The images and everything up until then shows in the source code, but then nothing after it.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
}
return $gallery;
?>
</div>
It's probably something simple, this is just far past my base of knowledge when it comes to this.
You are returning the value instead of printing it to the web page. Use echo instead of return. Also make sure you echo it in each iteration of the loop so you don't just print one image, but all of them.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
echo $gallery;
}
?>
</div>
Short story:
I'm trying to get the ID of the Header Image in Wordpress.
All I found was this guide, which dosn't seem to work anymore:http://nickohrn.com/2013/09/get-attachment-id-wordpress-header-image/
Long Story
I'm trying to make the WP Header responsive with an srcset. so I don't want to use this code
<img id="masthead-bg" src="<?php header_image() ?>" alt="">
...but instead want to use the wp_get_attachment_image_srcset function to get the srcset of my header image. Only problem: I need an Image ID for this function -> The ID of my Header image.
<img id="masthead-bg"
src="<?php header_image() ?>"
srcset="<?php echo wp_get_attachment_image_srcset( image_id(), 'thumbnail' ); ?>"
sizes="100vw" alt="">
Any suggestions?
Try this...
// Get the header image data
$data = get_object_vars(get_theme_mod('header_image_data'));
// Now check to see if there is an id
$attachment_id = is_array($data) && isset($data['attachment_id']) ? $data['attachment_id'] : false;
if($attachment_id) {
// Put your image code here, user whatever function to get image by id you need
}
Note: if you use a proper WordPress function to get the image it should add in all the srcset etc stuff for you, to allow for responsive images.
To answer the original question, I've found the simplest way to get the ID while I was filtering the markup that gets outputted by <?php the_header_image_tag(); ?> (introduced in v4.4).
function header_img_markup( $html, $header, $attr) {
// we can get the image ID by passing its src url to this method
$header_img_id = attachment_url_to_postid($attr['src']);
// now we can get its metadata from the db
$header_img_data = wp_get_attachment_metadata($header_img_id);
// now we can use the data
$customSizeWidth = $header_img_data['sizes']['my-custom-size']['width'];
// ...your custom output here...
return $html;
}
add_filter('get_header_image_tag', 'header_img_markup', 20, 3);
Responsive Wordpress Header Image with fallback:
if (get_header_image() !== '') {
$attachment_id = attachment_url_to_postid(get_header_image());
echo wp_get_attachment_image($attachment_id, 'large');
}
if (get_header_image() == '') {
echo '<h1>'.get_bloginfo( "name" ).'</h1>';
echo '<h2>'.get_bloginfo( "description" ).'</h2>';
}
Hey guys i have this code
<?php $jthumb = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if ($jthumb> "0")
{
echo $jthumb;
}
else
{
echo "http://placehold.it/350x250&text= Jedcore";
}
?>);background-attachment:fixed;">
What i wanted to do is to replace the
http://placehold.it/350x250&text= Jedcore with an image inside my wordpress theme like
<?php bloginfo('template_url'); ?>/images/theimage.png
But i just cant replace it liek that i will prompt an error,
I'm no expert with php :)
try this:
echo '<img src="'. bloginfo('template_url') . '/images/img.jpg" alt="">';
try after this
change
echo "http://placehold.it/350x250&text= Jedcore";
to
echo get_bloginfo('template_url').'images/theimage.png';
i am trying to insert a link in an echoed line,
regular links work, but not this one, cant figure it out what's wrong
if($gallery_images != ''){
foreach ($gallery_images as $gallery_image){
$thumb = wp_get_attachment_image_src($gallery_image[SN.'gallery_post_image']['id'], 'post-thumb', false);
echo '<li><a <img src="'.$thumb[0].'" alt="'.$gallery_image[SN.'gallery_post_title'].'" /><p class="flex-caption">'.$gallery_image[SN.'gallery_post_title'].'</p></li>';
}
}
the_permalink() is a not a return function, it echoes the permalink. Replace it with get_permalink, which returns the permalink.
if($gallery_images != ''){
foreach ($gallery_images as $gallery_image){
$thumb = wp_get_attachment_image_src($gallery_image[SN.'gallery_post_image']['id'], 'post-thumb', false);
echo '<li><a <img src="'.$thumb[0].'" alt="'.$gallery_image[SN.'gallery_post_title'].'" /><p class="flex-caption">'.$gallery_image[SN.'gallery_post_title'].'</p></li>';
}
}
Your first problem is that. You don't include a function on a string that way.
echo '<li><a href="**<?php the_permalink(); ?>**">
Try this:
echo '<li><a href="'.the_permalink().'">
Then
.$gallery_image[SN.'gallery_post_title'].
You got a syntax error there.
SN.'gallery_post_title' // notice SN
It's fine if you define SN though.
Also, why do you have a close curly brace }?
Did you just copy and paste your code here sloppily or is that intentional? It's confusing if it is.
I've a function that will echo the URL of the image from the content of Wordpress.
I got the function work now no problem
// Get Image Attachments
function sa_get_image($postid=0, $size='thumbnail') { //it can be thumbnail or full
if ($postid<1)
$postid = get_the_ID();
$thumb = get_post_meta($postid, "thumb", TRUE); // Declare the custom field for the image
if ($thumb != null or $thumb != '') {
echo $thumb;
}
elseif ($images = get_children(array( //If you upload an image function gets first image
'post_parent' => $postid,
'post_type' => 'attachment',
'numberposts' => '5',
'post_mime_type' => 'image', )))
foreach($images as $image) {
$thumbnail=wp_get_attachment_image_src($image->ID, $size);
?>
<?php echo $thumbnail[0]; ?>
<?php }
else { //If you don't upload or declare as thumb custom field func. gets custom (default) image
echo get_bloginfo ( 'template_directory' ); //same as wp-content/themes/your-theme/
echo '/images/image-pending.gif'; // Put this image into your themes images folder and set the path here
}
}
The only problem now is that the <?php echo $thumbnail[0]; ?> if there are more than one image it will echo all of them something like this
<img src=" http://applesiam.com/wp-content/uploads/2555-05-02_19h14_34-150x150.png http://applesiam.com/wp-content/uploads/2555-05-02_19h14_11-150x150.png http://applesiam.com/wp-content/uploads/2555-05-02_19h13_43-150x123.png http://applesiam.com/wp-content/uploads/2555-05-02_19h13_20-150x150.png http://applesiam.com/wp-content/uploads/2555-05-02_19h13_17-150x150.png ">
As you can see it just separated by some spaces.
Now I just want to have the last image if there is more than one image in the $thumbnail
I'm not really expert with PHP as my semester for PHP course will start next week.
Thanks in advance for any suggestion going to be.
Try:
$imgSrc = end((explode(' ', trim($imgSrc)));
Where $imgSrc is the value you put into <img src="!!!==>>here<<==!!!">.
quickly typed, w/o any warranty. Should leave single URLs intact, and if multiple ones separated by space(s) will take the last.
Try this instead.
echo trim($thumbnail[sizeof($thumbnail)-1]);