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.
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'; ?>
<img> tag is not working in PHP Codeigniter
<img src="<?php echo $p_info['p_img']; ?>" alt="Product Image is not uploaded" height="700px" width="500px" />
Output of $p_info['p_img'] is giving correct path where image is saved.
and i uploaded the image now i want to show that image in edit process
<img src="<?php echo $p_info['p_img']; ?>"
alt="Product Image is not uploaded" height="700px" width="500px" />
<?php echo $p_info['p_img']; ?> should be a path which access images from the project directory not from a local path.
C:/xampp/htdocs/squadfreetry/assests/img/products_images/Acne Free (1).jpg this is wrong & will not show image.
You have to save image path starting from /assests/... and to access it by calling base_url() at first & followed by saved path in DB.
Code should be like:
<img src="<?=base_url().$p_info['p_img'];?>"
alt="Product Image is not uploaded" height="700px" width="500px" />
Where $p_info['p_img'] is a path starting from /assests/..
Sometimes if you view source using certain browsers (firefox, chrome), it omits the /> tag. Try view source using a notepad or something, it should display proper /> tag.
If you want a shorter tag, use this:
<?php echo img(array('src'=>'image/picture.jpg', 'alt'=> 'alt information')); ?>
Here is detailed information:
https://codeigniter.com/user_guide/helpers/html_helper.html#img
More examples:
<img src="<?php echo base_url('assets/uploads/' . $gambar)?>" alt=""/>
and
<img src='<?php echo base_url("assets/uploads/$gambar")?>' alt=""/>
Note: Unlike the double-quoted and heredoc syntaxes, variables and escape sequences for special characters will not be expanded when they occur in single quoted strings.
Please try the below way:
I am assuming that your project folder is Cart -> images/your desired image
when you do file uploading then you have to save the image in folder -> images
and the image name in database.
so to access it replace your image code like this:
<img src="<?php echo base_url(); ?>images/<?php echo $p_info['p_img']; ?>" alt="Product Image is not uploaded" height="700px" width="500px" />
On CodeIgniter 4 you can use the img function, from html helper.
Adds the helper on controller -> helper('html');
Generates the img tag on the view -> echo img('public/img.png').
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.
I uninstalled an extension and afterwards all of my product images displayed on category pages resized to 135x135 instead of 209x209. I checked the list.phtml and this is what I found:
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize(209); ?>" width="209" height="209" alt="<?php echo $this->stripTags($this->getImageLabel($_product, 'small_image'), null, true) ?>" />
Although this looks right to me I am also find a random css attribute that appears to be the culprit I just cannot find any source of the rule.
img[Attributes Style] {
width: 135px;
height: 135px;
}
You can see my problem here
An extension is overwriting the template for the product list, so the file you modified (list.phtml) isn't actually what's showing.
If you have any extensions affecting the product list pages, check to see if they have anything in the layout xml file that looks like this: <action method="setTemplate"><template>XXX.phtml</template></action>.
this is lazy trick..use a software has feature search text in file, then try search with search keyword "resize(135"
I've installed some theme, which has header logo defined in header.phtml like this:
<img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" />
I don't really want to alter this template, also in that .phtml file it says not to edit it. How can I override this getLogoSrc most efficiently?
In the web admin, go to System>Configuration>Design and scroll down to Header>Logo Image Src. Insert the filename that you have saved in /skin/frontend/default/new_theme/images/ and click Save.
Go to your template's images folder e.g.: /skin/frontend/default/new_theme/images/
and replace the logo image in that folder with your new Logo