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!
Related
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
I need to show the loop inside Advanced custom field. This code return only the first image.
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_field('colori'), 'full'); ?>
<img src="<?php echo $image; ?>" alt="<?php echo get_the_title(get_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>
Inside a ACF Repeater Field you must use get_sub_field(), not get_field(). So your code should look like this:
<?php if( have_rows('colors') ): ?>
<ul>
<?php while( have_rows('colors') ): the_row(); ?>
<?php $image = wp_get_attachment_image_src(get_sub_field('colori'), 'full'); ?>
<img src="<?php echo $image[0]; ?>" alt="<?php echo get_the_title(get_sub_field('colors')) ?>" />
<?php endwhile; ?>
</ul>
<?php endif; ?>
It is possible that it returns false values again because I don't know how you named your ACF (repeater) sub fields.
The sub field 'colori' must be an ACF image field that outputs an ID. Not an array or something else.
wp_get_attachment_image_src() returns an array. [0] => url , [1] => width, [2] => height
Read the doc for a repeater field here.
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>
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.
I want to use the plugin WP Smart Sort to sort my posts alphabetically, except I need the most recent posted first on the home page. The relevant existing code for the home page is below. Is there something I can add to it to force it to include the recent posts and go by date rather than by the alphabetical order I want everywhere else?
(In case it helps to see the context, the site is at http://mormonscholarstestify.org/)
<div id="homebox">
<?php if ($aOptions['homebox-id'] != '') { query_posts('showposts=5&cat=' . $aOptions['homebox-id']); } ?>
<?php if(have_posts()) : the_post() ?>
<div id="boxmain">
<img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title() ?>" />
<h3><?php the_title() ?></h3>
<?php $key="affiliation"; echo get_post_meta($post->ID, $key, true); ?><p>
<?php the_excerpt(); ?>
</div>
<?php endif; ?>
<?php while(have_posts()) : the_post() ?>
<div class="boxitem">
<img src="<?php $key="thumbnail"; echo get_post_meta($post->ID, $key, true); ?>" alt="<?php the_title() ?>" />
<h3><?php the_title() ?></h3>
<?php $key="affiliation"; echo get_post_meta($post->ID, $key, true); ?>
</div>
<?php endwhile; ?>
</div>
According to the Wordpress query_posts documentation you should be able to supply an orderby parameter to the querystring to change how the posts are ordered, like so:
query_posts('showposts=5&orderby=date&order=ASC&cat=' . $aOptions['homebox-id']);