Please let me know below code is correct to fetch the image style in drupal
$image = theme(
'image_style',
array(
'path' => 'public://my_example_image.jpg',
'style_name' => 'my_custom_image_style',
'alt' => 'Alternate Text',
'title' => 'Title Text',
)
);
You can fetch image url in specific style with:
https://api.drupal.org/api/drupal/modules!image!image.module/function/image_style_url/7
One parameter is image style name and other is image URI (not the path!). You can manually define image tag content and for href attribute print out value image_style_url() returned.
Try this function
$img_url = $node->field_image['und'][0]['uri'];
<img src="<?php print image_style_url("thumbnail", $img_url); ?>" />
You can change 'thumbnail' to your image style name,and replace $img_url with your image field machine name.
Related
How can I make the user change any image on my wp theme just from the theme editor?
For example: I have a background image on my theme footer that i hard-coded, I want to give the user(admin) the ability to change it from the theme editor, and thanks on advanced
I don't want to use something like this:
<div class="footer-background background-image" style="background-image: url(<?php echo get_theme_file_uri( 'assets/images/bg.jpg' ) ?>)" >
If you can just give me a wp codex on this, it would be more than helpful, because I couldn't find any thing related to my problem on Google.
So, you could do something like that (in functions.php) :
add_action( 'customize_register', function( $wp_customize ) {
$wp_customize->add_section(
'section_img',
array(
'title' => 'Images',
'priority' => 35,
)
);
$wp_customize->add_setting(
'footer_image'
);
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'footer_image',
array(
'label' => 'Footer image',
'section' => 'section_img',
'settings' => 'footer_image'
)
)
);
});
And you get the value by doing (in footer.php) :
get_theme_mod('footer_image');
If I were you, I do followings
Install ACF plugin
Create an option Page
Create new custom field (image field) and assign it to previously created options page.
Update footer template to show the image from back end like this
Update footer image src to get back end ACF field value.
https://www.advancedcustomfields.com/resources/options-page/
https://www.advancedcustomfields.com/resources/image/
I am new in Wordpress. I want to know. Why some of the Wordpress themes don't have header image section in Theme customize? How to add this section to the theme customizer? Is there any way to do it
And one question. How can I modify the upload file image in the theme customizer?
I want to add more field and change the crop size
this depends on the WordPress theme developer how they design and develop themes but you can achieve this by adding your own option like (image, textarea , input) fields in the customizer area.
Here is the example add this code in a function.php file
// Header Logo
function add_logo_customizer($wp_customize) {
$wp_customize->add_section(
'logo_image',
array(
'title' => 'Logo Image',
'priority' => 45,
)
);
$wp_customize->add_setting( 'Logo-upload' );
$wp_customize->add_control(
new WP_Customize_Image_Control(
$wp_customize,
'lp-image_selector',
array(
'label' => 'Logo Image',
'section' => 'logo_image',
'settings' => 'Logo-upload'
)
)
);
}
add_action('customize_register', 'add_logo_customizer');
and you can call it as <?php echo get_theme_mod( 'Logo-upload' ); ?>
The above code is tested and it works
For the first you need to add support to custom-header.
See the codex:
https://developer.wordpress.org/themes/functionality/custom-headers/
Obviously, you need to create a php file with the code and include in the functions.php or add the code directly to your functions.php file.
function themename_custom_header_setup() {
$defaults = array(
// Default Header Image to display
'default-image' => get_template_directory_uri() . '/images/headers/default.jpg',
// Display the header text along with the image
'header-text' => false,
// Header text color default
'default-text-color' => '000',
// Header image width (in pixels)
'width' => 1000,
// Header image height (in pixels)
'height' => 198,
// Header image random rotation default
'random-default' => false,
// Enable upload of image file in admin
'uploads' => false,
// function to be called in theme head section
'wp-head-callback' => 'wphead_cb',
// function to be called in preview page head section
'admin-head-callback' => 'adminhead_cb',
// function to produce preview markup in the admin screen
'admin-preview-callback' => 'adminpreview_cb',
);
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );
Then on your header.php get the image and put in where you want it.
<?php if ( get_header_image() ) : ?>
<div id="site-header">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
</a>
</div>
*functions.php is on the root of your theme folder, if your theme uses a "child-theme" please use this folder to do the changes.
And answering your question, when you upload the image you can crop and resize the image. Wordpress cannot edit photos as an editor, only resize and crop.
I'm displaying the child pages of the current page. With the featured image, title pulling through. I also want to pull through a custom field I've added. I'm outputting this at html so it looks like each child page has its own box, with the featured image filling the box, the title on top of the image and the the custom field value sitting under the title.
But I can't get the custom field to display properly, I just get the value 1, not sure if I've converted the array properly?
Could you help me out to output the custom field 'PageTag'
https://i.stack.imgur.com/vzCBU.png
https://i.stack.imgur.com/BwfuV.png
Wordpress template code
<div class="childPages">
<?php
$subs = new WP_Query(
array(
'post_parent' => $post->ID,
'post_type' => 'page',
'meta_key' => '_thumbnail_id'
)
);
if( $subs->have_posts() ) :
while( $subs->have_posts() ) :
$subs->the_post();
$pageTag = get_post_meta($post->ID, '_PageTag' , true);
echo '<div class="childPageBlock"> '.get_the_post_thumbnail().'<div class="childPageBlockText"><h3>'.get_the_title().'</h3><span>'.print_r( $pageTag ).'</span></div></div>';
endwhile;
endif;
wp_reset_postdata(); ?>
</div>
Removing the print_r() and leaving its as
'.$pageTag.'
Worked!
I want to make it possible for users of my theme to replace the banner through Theme Customization API. I have got it working, however, the default image appears blank and when I click "view page source" I get the following:
<img src=" " alt="banner" />
The default image shows up in the preview inside the API window, but not in the browser. The moment I upload a banner to replace the default banner with, it works perfectly. But I just can't get the default image to appear. Am I doing something wrong?
This is in my functions.php:
// Start New Section for Images
$wp_customize->add_section('customtheme_images', array(
'title' => _('Images'),
'description' => 'Change Images'
));
$wp_customize->add_setting('banner_image', array(
'default' => 'http://mywebsite.com/banner.jpg',
));
$wp_customize->add_control( new WP_Customize_Image_Control ($wp_customize, 'banner_image', array(
'label' => _('Change Banner'),
'section' => 'customtheme_images',
'settings' => 'banner_image'
) ));
And, this is inside my header.php:
<img src="<?php echo get_theme_mod('banner_image'); ?>" alt="banner">
And yes I have tripple checked the path of the default image, and it is corrent. Please help!
When using $wp_customize->add_setting('banner_image', array(
'default' => 'http://mywebsite.com/banner.jpg',
)); the default value is not saved into the database (until you save).
So you will have to use: <img src="<?php echo get_theme_mod('banner_image','http://mywebsite.com/banner.jpg'); ?>" alt="banner">
The problem you describe is some kind related to: https://wordpress.stackexchange.com/questions/129479/alternatives-to-handle-customizer-settings
I have the same situation here. The problem with the solution below:
<?php echo get_theme_mod('banner_image','http://mywebsite.com/banner.jpg'); ?>
I need the user to be able to delete the default image. This default image will only be used for the initial display of the theme. So I need a solution that when activating the theme, is already saved in the database.
Trying to add a JS data attribute to a Wordpress thumbnail. I need the absolute URL of the image, not the post it's attached to.
Got this far:
<?php the_post_thumbnail('thumbnail-full', array('class' => 'addthis_shareable', 'addthis:url' => $src)); ?>
I thouhgt from the docs that $src would hold the URL, but it doesn't. All I get in the code is addthis:url at the end of the image tag, but no URL with it.
Any help? PHP is not my thing.
This should work
<?php
$src = wp_get_attachment_image_src(get_post_thumbnail_id(), 'thumbnail-full');
the_post_thumbnail('thumbnail-full', array(
'class' => 'addthis_shareable',
'addthis:url' => $src
));?>