accessing images - php

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 :)

Related

Lightbox can't show large images because I'm supplying to the wrapping <a> elements image paths that are behind PHP page with parameters

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?

Wordpress generates some weird links for images

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.

Icon usage in HTML with PHP

I have started learning html and php. I know very little coding of it. I am confused for using png icons in my action buttons. I have currently text button with css. I want use png icons instead that text buttons. I have used it like below
<td>
Edit
Activate
Delete
</td>
Now I want use png icons there instead of text. What should I do for it ?
I have icons located in directory called icons.
Sorry for my little knowledge.
Thanks
You can add icon as image in your code, check below snippet
<td><img src="https://dummyimage.com/20x20/000/fff.png&text=E" alt="Edit"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=A" alt="Activate"/>
<img src="https://dummyimage.com/20x20/000/fff.png&text=D" alt="Delete"/></td>
It depends on the structure of your web folder, where icons directory is in your web folder.
If you have icon directory in your root folder and php file is also in root then you can simply use below syntax :
<img src="icon/image_name.jpg" alt="" />
Or you can use complete path for icon folder relative to your website url as shown below :
<img src="http://localhost:8080/websitename/icon/image_name.jpg" alt="" />

Wordpress : How to set image source while creating page

how can i set image url in page ?
In image you can see I have tried by three ways but it not work.
Images are located under image folder of active theme.
You have three image tags all pointing to different urls of which two appear malformed.
The middle image tag in your screenshot seems the most accurate but you may want to add a semicolon after the right paranthesis.
If all three files are supposed to refer to the same image, then replace the first and last image tags with the middle one.
Then if it still doesnt work then replace bloginfo('template_directory') with the actual location to the images relative to document root on the server but put the value in quotes. For example, if your images are in the subfolder images in folder imageset on your site, then you could use
"http://www.whatever.com/imageset/images" or "/imageset/images".
which results in the code:
<img src="<?php echo "/imageset/images"; ?>/images/banner1.jpg" alt="">
or even better:
<img src="/imageset/images/images/banner1.jpg" alt="">
Try as follows <img src="../images/banner1.jpg" alt="">

1 Image URL saved on database (but different versions available on the main server): how to replace a letter on the fly to avoid image scaling?

this is the situation: i have a supplier who gives me 1 URL image only for the catalogue...for example the large version
that is: http://www.domain.com/dev/1/1/08973911/l_08973911.jpg
This image URL on database is saved into the field: supplier_reference ...
so i can call the img src with:
<img src="{$product.supplier_reference|escape:'htmlall':'UTF-8'}" width="150" height="133" />
and all is ok 'cause it scales... but i don't want it to scale.
Sometimes, as in this case, i don't need the large version but this kind of small 150x133...
the correct URL i need will be:
http://www.domain.com/dev/1/1/08973911/s_08973911.jpg that is the s version.
How can i do to replace only that letter for the URL taken from the DB?
Thank you very much.
It seems that you are using Smarty. If so, you can use Smarty's replace variable modifier:
<img src="{$product.supplier_reference|replace:'/l_':'/s_'|escape:'htmlall':'UTF-8'}"
width="150" height="133" />
$url = preg_replace('#l(_\w+\.jpg)#', 's\1', $url);

Categories