Hy.
After uploading an image to Wordpress it shows some weird link instead of "link-to-project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg"
I noticed it shows some info from the database. For example the ID and the date, the size etc. But idk why wordpress is doing this.
When I inspect the source I get this weird link:
<a class="logo" href="http://localhost/project/"><img src="22, 22, IMG_20171129_125745, IMG_20171129_125745.jpg, 667317, http://localhost/project/wp-content/uploads/2019/04/IMG_20171129_125745.jpg, http://localhost/project/img_20171129_125745/, , 1, , , img_20171129_125745, inherit, 0, 2019-04-07 10:54:26, 2019-04-07 10:54:26, 0, image/jpeg, image, jpeg, http://localhost/project/wp-includes/images/media/default.png, 1700, 1000, Array" alt="logo"></a>
Here is the PHP code
<a class = "logo" href="<?php echo get_home_url(); ?>/"><img src="<?php the_field('website_logo','options'); ?>" alt="logo" /></a>
Note I'm using advanced custom fields here.
Just to add to your answer for people having issues in the future, the problem was the ACF Image field you was calling was set to image object and you was expecting it to return just the url. There are 2 ways to fix this:
Option 1: Edit the image field to only return the Image URL
Pros
Easy and simple to do, fastest solution
Good for inline background css
Cons
Unable to control the image size that is returned
Unable to display the image alt tag which can impact SEO
Option 2: Use the correct ACF Image code to display what you're looking for
The better way to display the image will be to use the Image object field as it allows a much better approach as you have access to all image attributes not just the URL. In order to display these see below:
$image = get_field('website_logo','options');
<a class="logo" href="<?php echo get_home_url(); ?>/">
<img src="<?php echo $image['url'];?>" alt="<?php echo $image['alt'];?>" />
</a>
More information on using the image object when using ACF Image fields can be found by clicking here.
Pros
Equally as easy and simple to do
Allows you to make use of the alt, sizes, title, caption etc. of the image
Allows you to use the same image with easy further down in the code by not needing to type out the field function again
Cons
Not the ideal solution when inlining background image css, use image url for this reason instead
*Fixed
I just had to use Image url as Return Value here, I accidentally used array for the return value.
Thanks.
Related
So, a single item looks like this:
$img = "http://example.com/gallery/main.php?g2_view=core.DownloadItem&g2_itemId=12345";
<a href="<?php echo $img ?>">
<img src="<?php echo $img ?>" loading="lazy" class="rounded" />
</a
So, I'm supplying the same thing to both <a> and `' elements. While the latter is able to render thumbnails from it, the lightbox itself is not opening the (large, or better said, same image) in place, as expected, but it rather displays the image in a regular PHP page.
I've been able to pinpoint the cause by testing with a "real" image URL (ie. with .jpg or .png extension at the end). In that case, large image will be loaded in lightbox.
So my question is how to get a temp (real) image to be used in <a> element from what I'm trying to use currently?
I'm using ACF plugin for my wordpress website https://www.advancedcustomfields.com
I created fields for page, and use the_field("field_name") and get_field("field_name") in page.php file in theme, but it show value of field, not html render.
For example field type is image, I want it display as <img src="$field_value"> not $field_value string.
Thanks
In ACF use this code.
<img src="<?php the_field('ACF filed name') ?>" alt="image">
Use image filed in ACF backed and select the Image URL. Check the screenshot for more details. https://prnt.sc/nauf26.
Check this link for more details https://www.advancedcustomfields.com/resources/image/
I would recommend using an image object when dealing with images in ACF unless you’re using it for a background image therefore only using the URL.
This is because it gives you access to limiting sizes, providing an accurate alt tag etc.
Please see the below:
<?php
$image = get_field('field_name');
?>
<img alt="<?php echo $image['alt'];>" src="<?php echo $image['url'];>">
For more information on the image field and how to use it within repeater and flexible fields click here.
I've registered several custom thumbnail sizes for a site I've been given control over, and want to be able to call on them in the template code, which is set up like this
<img id="product_thumb" class="border--round" alt="Image" src="<?php echo $vehiclepods->field('featured_image')['guid']; ?>">
Where do I pass the thumbnail parameter, or even force a size?
Sample template here
Functions here
Found the missing bit between the field and the thumbnail.
featured_image._src.speedmaster_front
Depending on your settings and pod configuration
$vehiclepods->field('featured_image.speedmaster_front')
should output the Full Image!
More details about how to get just the link or more in the Pods Documentation:
field()
display()
Magic Tags
I'm working on an image-heavy wordpress project. I use the following code to set the image width and height for the medium and large image sizes, and set both to hard crop mode. These values are the same as the current values for Settings>Media: (code based on this documentation)
update_option('medium_size_w', 335);
update_option('medium_size_h', 400);
update_option('medium_crop', 1);
update_option('large_size_w', 690);
update_option('large_size_h', 400);
update_option('large_crop', 1);
When I upload and insert an image using the in-post insert media button with the medium size option, everything works as expected. However, when I upload and insert a large image, I get the following markup:
<a href="http://saltdesignpdx.com/wp-content/uploads/2013/04/TCK7765.jpg">
<img src="http://saltdesignpdx.com/wp-content/uploads/2013/04/TCK7765-690x400.jpg"
alt="_TCK7765" width="540" height="313" class="alignnone size-large wp-image-53" />
</a>
Note the width="540" height="313" part of that markup. It should be width="690" height="400".
Does anyone know what's going on here, or some steps I could take to diagnose it?
Edit: I just tried switching the theme to twenty-eleven, uploading a new image, and inserting it into a post. This was the result:
<a href="http://saltdesignpdx.com/wp-content/uploads/2013/04/IMG_0729.jpg">
<img src="http://saltdesignpdx.com/wp-content/uploads/2013/04/IMG_0729-690x400.jpg"
alt="IMG_0729" width="584" height="338" class="alignnone size-large wp-image-57" />
</a>
Weird. Changing the theme changed the dimensions specified in the img tag, but they still don't match the actual size of the image.
The problem was content_width. Thanks, Fred, for the suggestion to search for 540 also.
After setting content_width to match my actual maximum content width, the size attributes wordpress provides in the <img> tag are now correct.
I am new to Symfony.
I created a layout page in which I have this :
<img src="images/header.jpg" width="790" height="228" alt="" />
but the image isn't displayed in the page when accessed from the browser.
I put the file header.jpg in the web/images/ folder.
I thought I could learn Symfony in a week while working on a small project. is it possible ?
Use slash at the beginning like
<img src="/images/header.jpg" width="790" height="228" alt="" />
You can also use image_tag (which is better for routing)
image_tag('/images/header.jpg', array('alt' => __("My image")))
In the array with parameters you can add all HTML attributes like width, height, alt etc.
P.S. IT's not easy to learn Symfony. You need much more time
If you don't want a fully PHP generated image tag but just want the correct path to your image, you can do :
<img src="<?php echo image_path('header.jpg'); ?>"> width="700" height="228" alt="" />
Notice that the path passed to image_path excludes the /images part as this is automatically determined and created for you by Symfony, all you need to supply is the path to the file relative to the image directory.
You can also get to your image directory a little more crudely using
sfConfig::get('sf_web_dir')."/images/path/to/your/image.jpg"
It should be noted that using image_tag has a much larger performance cost attached to it than using image_path as noted on thirtyseven's blog
Hope that helps :)