I am using Advanced custom fields in my WordPress theme to manage my slider images of Flexslider. I upload the images high quality in the backend, but I only want to show the images with a size of 960px width.
In the documentation is mentioned that the size is stored in the [sizes] array.
https://www.advancedcustomfields.com/resources/gallery/
Does anyone know if the custom sizes that are created in the functions.php file will exist also in the stored array?
And my second question is to get access of a specific size class, should you still use [url] to get the image url or is it automatically stored in the array of sizes?
So is this the correct markup:
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['url']['sizes']['slider-image']; ?>" alt="<?php echo $image['alt']; ?>">
</li>
<?php endforeach; ?>
or:
<?php foreach( $images as $image ): ?>
<li>
<img src="<?php echo $image['slider-image']; ?>" alt="<?php echo $image['alt']; ?>">
</li>
<?php endforeach; ?>
Yes, the custom sizes you define will be returned in the ['sizes'] array.
The URL for each is returned separately, as the name of the size. For example, if your custom size is called "slider-image", you'll find the URL to the image at ['sizes']['slider-image'].
If you need it, you can also access the dimensions of the image at ['sizes']['slider-image-width'] and['sizes']['slider-image-height'] (this can be useful when the image didn't fit the exact aspect ratio you were expecting, which would mean the smaller axis of the resized image would not exactly match your custom size dimensions).
You may find the PHP function print_r() handy in future for discovering what data is available to you.
Related
I am converting Html Template to WordPress, I have done 90% of the work.
In my Template, I have some <a> which are href to the images path as
<a href="img/elements/g7.jpg" class="img-pop-up">
Now i want to link this path in wordpress using any funtion,like i have done for img tag as
<img src="<?php bloginfo('template_url'); ?>/img/logo.png" alt="">
May you help me,how can i give the path to image using <a>tag.
There are several ways to get an image in Wordpress.
1) If you image is the thumbnail image of the page or post, you can simply use echo of get_the_post_thumbnail_url().
<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
2) If your image is in the media library, you can use the function wp_get_attachment_image( $attachment_id, $size, $icon, $attr );. You must know the image ID.
<?php echo wp_get_attachment_image(300, array('800', '600'), "", array("class" => "image")); ?>
300 is the ID of the image in the library (you can discover it looking at the number in the url when opening the image there).
800 and 600 is the size.
An attribute was added: class="image".
By default, it will output this:
<img width="700" height="466" src="example.com/wp-content/uploads/2020/02/image.png" class="image attachment-700x600 size-700x600" alt="" srcset="example.com/wp-content/uploads/2020/02/image.png 800w, example.com/wp-content/uploads/2020/02/image-png-1-300x200.png 300w" sizes="(max-width: 700px) 100vw, 700px">
3) If you want the image from media library as well, but just the url, you can use wp_get_attachment_image_url( $attachment_id ) function. Like this:
<?php echo wp_get_attachment_image_url(1286); ?>
4) If you image is in a custom field, created using the Advanced Custom Fields plugin, for example. Then, you call the_field using like this:
<?php the_field('image_field_name'); ?>
5) If the image is not in the media library, but in the theme folder, you can use the get_stylesheet_directory() to find the theme folder and render the image. For example, if the image is inside the theme folder, inside another folder called img.
<?php echo get_stylesheet_directory().'/img/image.png'; ?>
I have two arrays. One array is a list of image file paths and the other is a list of image titles matched with the array of image files.The code generates a display of images accompanied by the appropriate image title.
What I want to be able to do is to select one of the displayed images which will then act as a link to a different page. I wish also to generate a session variable based on the file path of the clicked image.
I've researched quite a lot but am beginning to wonder if this can be done, or should I be working on a completely different approach. I am a beginner.
Here is my code.
<ul>
<?php
foreach (array_combine($filepaths, $titles) as $filepath => $title) { ?>
<li><img src=<?php echo "$filepath";? ></li>
<li><?php echo $title; ?></li>
<li></li>
<?php }?>
</ul>
For some reason when uploading a product image, magento is adding some spacing to the top and bottom of the image.
This is an example image. Because Stackoverflow has a white background, if you save this image you will see the white spacing along the top and bottom.
This is a link to the site if you'd like to have a look in the store environment.
Any help will be much appreciated.
Regards
This is caused by your theme's aspect ratio set on the thumbnail images. Since the image size is set to 232 x 280, and the image you are uploading is square, Magneto automatically generates a version of the image at the size it's called.
To modify the size and set it to a square aspect ratio, you can simply modify your theme's template file.
Open app/design/frontend/default/celebrity/templates/catalog/product/list.phtml
Look for your image tag(s), it will look something like this:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232,280); ?>" width="232" height="280" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
Modify the height and width values to be the same, like this:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(232); ?>" width="232" height="232" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
Save the file, and refresh your Magento caches.
Alright so I looked through here and tried to find a solution to this, and I found some php that came up twice as an answer, but it isn't working for me, so here's the problem.
I have a custom wordpress theme. Under the navbar, I want to put a dynamic image based on that page's featured image. The image needs to be responsive and spread across the width of the page, much like you'd imagine a responsive header image to function. I can handle the responsive css bit and put the image in a div when I get to pulling it, but the image isn't even pulling.
Here's the code that came up twice as an answer on Stack Overflow:
<img src="<?php $img=wp_get_attachment_thumb_url(get_post_thumbnail_id($post->ID)); echo $img[0]; ?>" alt="<?php the_title(); ?>"/>
It isn't working. The php string is not pulling the thumbnail url and the only output in the console is the alt information wrapped in an img tag. I don't know if it has to do with the code being in the header.php, but any advice would be great.
Use this to show post thumbnails within the loop. You can also pass an elseif statement to show nothing if no image is uploaded or show a placeholder image. Hope that helps!
<?php if ( has_post_thumbnail()) : ?>
<?php the_post_thumbnail('PLACE-CUSTOM-SIZE-HERE-OR-OMIT-TO-USE-ORIGINAL-SIZE'); ?>
<?php endif; ?>
<?php
if ( has_post_thumbnail()) {
$featureImage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'feature' );
$featureImage = $featureImage[0];
?>
<div id="feature" style="background-image: url('<?php echo $featureImage; ?>')">
<? } else { ?>
<div id="feature">
<? } ?>
This is how I have accomplished this in the past.
I'm just going to leave this here in case this is causing your issue.
From the doc page: get_post_thumbnail_id()
Note: To enable featured images, see post thumbnails, the current
theme must include add_theme_support( 'post-thumbnails' );
I'm having trouble trying to figure out how to code this, I've researched like crazy (an hour and a half), and I finally decided to sign up for Stack Overflow to see if anyone can help, soo....
In my wordpress theme, I have a section for banners (images that are attached to posts). This is what I currently have:
<?php
$headline = new WP_Query();
$headline->query('posts_per_page=2&tag=review&orderby=date');
?>
<div id="headline">
<?php if(get_post_meta($post->ID, "image_value", $single = true) != "") : ?>
<img src="<?php echo get_post_meta($post->ID, "image_value", $single = true); ?>" alt="<?php the_title(); ?>" />
<?php endif; ?>
</div>
The problem is that the width of the content area is 960px, and the banners I upload are sizes (width): 728px, 960px, and 232px. So does anyone know some PHP code that would find the width of the banners of the two posts, see if they would fit, and if they dont, just use one banner (either the 728px or the 960px), and then if the 728px is used also add the 232px image to the div so it fills in nicely?
And the selection of the images used by the code is kind of supposed to be random, I can handle that though.
Any help?
You must get the width through eg. GD. Then bother with some ifs.
Hint: getimagesize();