Can Somebody Help how to pull alt text from wordpress images in the following code??
<?php $logos = get_field('upload_logos');
$size = 'full';
if( $logos ): ?>
<div>
<div>
<?php foreach( $logos as $logo ): ?>
<div>
<div class="ccrc-logo-box-inner"><img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt=""></div>
</div>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
You are using get_field() function, so I guess you have 'Advanced Custom Fields' plugin. You want to get the data of a field with type of image. So looking at the documentation:
https://www.advancedcustomfields.com/resources/image/
You can access the alt text from the field object, the same way you already did it with $logo['ID'] before.
<img src="<?php echo wp_get_attachment_url( $logo['ID'], $size ); ?>" alt="<?php echo $logo['alt']; ?>">
You are using the wp_get_attachment_image() function to output your url
Documentation of wordpress tells us you can pass the alt as a parameter to fetch and output it:
https://developer.wordpress.org/reference/functions/wp_get_attachment_image/#parameters
Related
Using the plugin ACF
I want to insert from an options page, the logo in the header of all pages
I can not get the image url
<?php $logo = get_field( 'logo', 'option' ); ?>
<?php if ( $logo ) : ?>
<img src="<?php echo $logo['url']; ?>" alt="<?php echo $logo['alt']; ?>" />
<?php endif; ?>
What is the right method?
thank you
This code works for me. Make sure the image "Return Value" is set to "Image Array" in ACF settings.
<?php
$website_logo = get_field('website_logo', 'option');
if( !empty($website_logo) ):
?>
<img src="<?php echo $website_logo['url']; ?>" alt="<?php echo $website_logo['alt']; ?>">
<?php
endif;
?>
I had the same problem but a fix it.
First I put the ACF "logo" in a page, then a use the ID of this page to put the logo in header, at last I call the logo in header.php like this:
<?php
$logo = get_field('logo', 5); // 5 is the ID of the page where I put the logo
$size = 'full';
?>
<div id="logo" style="padding-top:10px;"><?php echo wp_get_attachment_image( $logo, $size ); ?></div>
Enjoy!
I have ACF set up in WP with a Gallery field. Currently I am displaying my images as follows:
<p><?php echo get_the_content(); ?></p>
<?php $images = get_field('gallery_images');
if( $images ): ?>
<div>
<ul>
<?php foreach( $images as $image ): ?>
<li class="portrait float">
<img src="<?php echo $image['url']; ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
<?php endif;
?>
I have also installed the Simple Lightbox Plugin but have been unsuccessful so far. How do I add the URL link of my ACF Gallery images. I have tried wrapping my image tag in a link tag with rel="lightbox" and several other variations including:
<img rel="lightbox[gallery_images] src="<?php echo $image['url']; ?>" />
Is there any way I can enable Attachment Display Settings for my ACF Gallery images in my WP post. I think this might be handy to have?
Any help is much appreciated :)
I used the following which worked.
<img rel="lightbox[gallery_images]" src="<?php echo $image['url']; ?>" />
All my images are full size so didn't need the following at all:
echo $image_large[0];
For a portfolio page, I have created a custom post type for each reference called “referenzen”. Since I need more than one image per reference (displayed in different ways), I have created some custom post types.
Now, on the front page, I want to display the newest references in a slider (kind of this type, exmple 4: http://www.wpcue.com/wordpress-plugins/advanced-post-slider/template-one/).
I tried to use some plugins, but there just created for regular post thumbs.
For now, I’m having the following code to display the latest 3 references.
<section class="entry-content cf" itemprop="articleBody">
<?php query_posts( array (
'post_type' => 'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
Now I need to bring this into some slider/carousel…
Any help is much appreciated
If you need to show posts in the form of slider/carousel, please follow below steps
1. Please download bxslider.js & include it in header.php of your theme file like below -
<script src="your-theme-directory-path/js/jquery.bxslider.min.js"></script>
Make sure that field you have created to upload image is of image type with "Image Object" option.
Correct Your code as below -
'referenzen',
'posts_per_page' => 4 // minus 1
)); while ( have_posts() ) : the_post(); ?>
<?php
$image = get_field('bg');
if( !empty($image) ): ?>
<li> <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" /></li>
<?php endif; ?>
<?php endwhile; wp_reset_query(); ?>
</ul>
Add below Javascript code in the footer.php
jQuery('.slider2').bxSlider({
slideWidth: 350,
minSlides: 1,
maxSlides: 1,
slideMargin: 5
});
</script>
I created my own author.php template. I want to display author's custom meta fields Code samples is in this image : http://prntscr.com/wsdsa
But Wordpress doesnt display anything ? What should i do ?
<div class="BCol">
<?php echo keepAuthorImage(); ?>
</div>
<div class="ACol">
<div class="A1"><?php echo get_the_author_meta('first_name') ?> <?php echo get_the_author_meta('last_name') ?></div>
<div class="A2"><?php echo the_author_meta('job') ?></div>
<div class="A3"><?php echo get_the_author_meta('location') ?></div>
<div class="A5">
<img src="<?php echo THEME; ?>/_assets/_img/websiteicon.png" alt="">
<img src="<?php echo THEME; ?>/_assets/_img/twitteric.png" alt="">
<img src="<?php echo THEME; ?>/_assets/_img/instagramic.png" alt="">
</div>
<div class="A4"><?php echo get_the_author_meta('aboute') ?></div>
</div>
Any helps ? Thanks.
Wordpress have pre defined variables, as
$cat
$tag
etc.
you have to use
$author
to make your process.
what you are doing wrong is you are not using your get_the_author_meta() function in side the loop so you need to specify the author id.
either use the function in side your loop or use simple as below code
<?php
global $current_user;
$current_user = wp_get_current_user();
$uid=$current_user->ID;
?>
change your function author meta as
<?php echo get_the_author_meta('first_name',$uid) ?>
for all your author meta for more help you can check reference code http://codex.wordpress.org/Function_Reference/get_the_author_meta
Need to share a custom url which includes the image #ID, so that the url looks the following in addthis:
http://www.mywebsite.com/mygallery/#image-1
Take a look at the following gallery and click on an image:
http://www.starbasket.fr/photos-des-camps/camps-2011/la-baule-3/
Hoe do you include the #image-1 within the share link?
Which WP code echo's out the image ID?
I've tried the following code snippets, but it does not work:
<?php echo $post_thumbnail_id = get_post_thumbnail_id( $post_id ); ?>
<?php echo get_post_thumbnail_id() ?>
<?php echo wp_get_attachment_metadata( $attachment_id, $unfiltered ); ?>
Regards,
Charl
You have to edit gallery's files.
Look in /wp-content/plugins/nextgen-gallery/view/
You'll find several files, the one you want to edit is "gallery.php".
Replace the title which usually diplays the alternate text ($image->alttext).
As the gallery take the "title" of each thumbnail to diplay it bigger, you can put your html code here (you also have to encode it) :
Try mine (the one you want) :
<?php foreach ( $images as $image ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> >
<div class="ngg-gallery-thumbnail" >
<?php $url = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."%23".$image->pid;
$url2 = $image->imageURL;
$url3 = "http://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']."#".$image->pid; ?>
<a href="<?php echo $image->imageURL ?>" id="<?php echo $image->pid ?>" title="<?php //echo $image->alttext ?><?php
echo '<div class="nggfb" style="float:left;width:80px" class="share-custom" ><a class="share-custom sd-button" href="javascript:postToFeed(\''.$url3.'\',\''.$url2.'\');" style="float:left"><span style="background-image:url("http://www.starbasket.fr/wp-content/plugins/jetpack/modules/sharedaddy/images/facebook.png");">Partager</span></a></div>
<div class="tweets" style="width:100px;float:left">
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?url='.$url.'&counturl='.$url.'&hashtags=StarBasket&related=campstarbasket&via=campstarbasket&text=Une photo ! '.$url2.'" style="width:130px; height:20px;">Tweet</iframe>
</div>
<div style="float:left;width:80px;">
<iframe src="/wp-content/googleplus.php?url='.$url.'" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" style="border:0;width:100px;height:20px;"></iframe>
<meta itemprop="image" content="'.$url2.'">
</div>
<a class="small-button smallblack " style="height: 18px;padding-top: 0;" onClick=" return copy(\''.$url3.'\')" href="'.$url3.'">Copier</a>' ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>
</div>
<?php if ( $image->hidden ) continue; ?>
<?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
<br style="clear: both" />
<?php } ?>
<?php endforeach; ?>
I made different url because of facebook and the copie/paste function ("#" or is html code "%23") et I also get the file url in order to display on some twitter client without access the web page. And for Facebook, you can use the share function, because it takes the meta og:url of you whole page (without "#imageID"), so I choose the dialog function to do so.
Google+ takes the good one but not the thumbnail.