[Resolved] Making image url show on frontend as image

[Author]

Posts

[travisK-3]

I am trying to:
- Turn a image url to a real image on frontend
See; hidden link Under "opdrachtgever"

I visited this URL: hidden link

I expected to see: hidden link (nice image)

Instead, I got: hard url

Also:
- Turn a youtube url to link to youtube video.
See; hidden link Under "Product images (left)"

I visited this URL: hidden link

I expected to see: hidden link CLickable link to youtube

Instead, I got: hard url

I hope you can help!

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

Thank you for contacting our support.

Actually the links should be converted to their appropriate formats automatically.

Could you let me know the field type that you are using for the image and the video?

The video field should be an embedded media field and the image field should be an image specific field.

Please let me know.

Thanks,
Shane

[travisK-3]

Hi Shane,

Thanks for your reply! I will try and clarify it for you.

We are using woocommerce + wp all import for the "products". Client needs/wants a fully automatic filled custom single product page with certain data from the .csv product (feed).

I managed to do 90%, just 2 fields I just dont understand.

I have made some screenshots:
1) The custom fields I connected within .csv and wp types
2) The video shortcode I am using (field in import .csv is _video_me with value (as example) hidden link
3) The image shortcode I am using (field in import .csv is _resultaat with value (as example) http:
//xxxxx.nl/content/xxxx.jpg

I have read the documentation but i cant find what i am doing wrong.

Hope you can help! If you need logins I am happy to share.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

So I see the issue is that your fields are not created using Types thats why it is just showing the value straight from the database.

What you can do is to wrap it in the correct html tags and see if that helps.

<a href ="[myshortcode]">My Link</a>
<iframe src="[myshortcode]"></iframe>

Please try this and let me know if it helps.

Thanks,
Shane

[travisK-3]

HI,

I have tried your solution.

1) For the link to youtube; Youtube Video
But how can i get the link to open an new screen?

2) For the images in did this:
<img src="[wpv-post-field name='_resultaat']" alt="Opdracht via Mooi Echt!" style="width:width;height:height;">

Can I add a pop up lightbox to enlarged image? (under "Opdrachten via Mooi Echt")

Example: hidden link

This helps so much!!

[travisK-3]

Hi Shane,

DO you maybe have time to check my last request?

Thanks

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

For the link you can actually add target='_blank' to the a tag so that it opens the link in a new tab.

If you want images to open in a lightbox you will need a plugin like this https://wordpress.org/plugins/simple-lightbox/ in order for it to work.

Please let me know if this helps.

Thanks,
Shane

[travisK-3]

Hi,

I am using this tag now:

Youtube Video

But its not working?

What do i do wrong?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

Would you mind providing me with admin access to the website so that I can have a look.

I noticed something in the HTML code that I would like to have a look at to see why it is being rendered like that.

The private fields will be enabled for your next response.

Thanks,
Shane

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

I took a look at the post but was unable to find the custom field called __video_me on the edit product page.

Could you let me know where this custom field is located because the data on the field is rendering the youtube link with these on it "<>" which could be causing the issue.

Please let me know.

Thanks,
Shane

[travisK-3]

Hi,

I changed the .csv for the youtube video and now its working, there was a <> tag around the hard youtube url.

Youtube Video

But now the final question, how can i only SHOW this field when there is a youtube url? If not I dont want to show that field.

[travisK-3]

Hi,

Question, have there been any mods within the 2 hours? We cant acces our site anymore.

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

Thanks for checking this for me and no I haven't accessed the site since my last comment yesterday but what you can do regarding not having the item display if there is no youtube url is use our [wpv-conditional] shortcode.

For more information on this you can check this link below.
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/checking-fields-and-other-elements-for-emptynon-empty-values/

Please let me know if this helps.
Thanks,
Shane

[travisK-3]

Hi Shane,

A bit more help:

I would like to hide the part in strong when there is nog image (

[wpv-conditional if="( empty($(wpcf-post-field)) )"]
[vc_text_separator title="Opdrachten via Mooi Echt" color="custom" border_width="3" accent_color="#e8318a"][vc_row_inner text_align="left"][vc_column_inner column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" width="1/4"]<img src="[wpv-post-field name='_resultaat']" alt="Opdracht via Mooi Echt!" style="width:width;height:height;">[/vc_column_inner][vc_column_inner column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" width="1/4"][/vc_column_inner][vc_column_inner column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" width="1/4"][/vc_column_inner][vc_column_inner column_padding="no-extra-padding" column_padding_position="all" background_color_opacity="1" width="1/4"][/vc_column_inner][/vc_row_inner][/wpcf-conditional]

What code do i place here: ( empty($(wpcf-post-field)) )"]

Manny thanks

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Travis,

I'm assuming that what you have now will display if the field is empty.

In a case like that you will need to compare it to false.

So your statement should look like this.

[wpv-conditional if="( empty($(wpcf-post-field)) )" evaluate="false"]

Thanks,
Shane