[Resolved] carousel using repeater field not working

[Author]

Posts

[davidm-13]

hi,
I have the following code:

  <!-- carousel start -->  
	<div id="carouselExampleControls" class="pic carousel slide" data-ride="carousel">
    	<div class="carousel-inner">
          [wpv-for-each field="wpcf-plant-images" start="1" end="1"]
              <div class="carousel-item active">
                 <img src="<em><u>hidden link</u></em> field='plant-images' output='raw'][/types]" alt="No picture currently available">
              </div>
          [/wpv-for-each]
          [wpv-for-each field="wpcf-plant-images" start="2"]
              <div class="carousel-item">
                  <img src="<em><u>hidden link</u></em> field='plant-images' output='raw'][/types]" alt="No picture currently available">
              </div>
          [/wpv-for-each]
	    </div>
    <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
  </div>
<!-- carousel end -->

This was working ok when the image included the path.
I'm now adding the path manually , but it's returning "No picture currently available" .
What am I doing wrong?
Thanks for your help

[Jamal]

Hello and thank you for contacting the Toolset support.

I'll need to take a closer look at this to better assist with it. It seems that your website is on localhost, can you provide an online site?

In the meantime, I think that the image src URL is wrong, try this instead:

<img src="[types field='plant-images' output='raw'][/types]" alt="No picture currently available">

If you can't provide an online version of your site, would you like to provide a Duplicator copy?
https://wordpress.org/plugins/duplicator/

[davidm-13]

Hi Jamal,
Thanks for your reply.
As I said the problem is I've uploaded the image names without their url - so I'm trying to prefix (concatenate) the url to the image name - is this be possible?
Thanks

[Jamal]

If you have uploaded the images, they will have the full URL. Unless you are using a different field type than the image field. In that case, make sure they are inside the correct folder "uploads/2020/12".

[davidm-13]

I've uploaded the images to the url I specified in the uploaded code - if I specify that url and the image name without the shortcode the image loads correctly, but when I try to combine the url path with [types field='plant-images' output='raw'][/types] it doesn't work.
The field "plant-images" in the custom post contains only the .jpg name not the whole url , so instead of reloading all the custom posts I would like to concatenate the media library path with the .jpg name to create the whole url. Or maybe I should specify it as a text field and not an image.

[Jamal]

Exactly, you need to specify the field as a text field instead of an image field.
If it is an Image field, it will always store the whole URL of the image. And it will return the whole URL when you use output='raw', otherwise it will return HTML markup for the image.

I am afraid, I can't help you further if I don't see this closely. I need to know several details:
- Field type.
- Result of the shortcode. You can check it in the generated page's HTML source, or in the browser dev tools.
Maybe something more. That's why, I asked for an online website or a Duplicator package. Otherwise, I can only guess.

[davidm-13]

Thanks very much Jamal,
I'll try changing it to a text field - what would be the format if I want to attach the url path to the text field to form the complete url.
I've specified it as a repeater field and as far as I can see its returning a comma separated list of all the image names.
If I don't succeed to display the images I'll send you access details of the site.
Thanks for your help

[Jamal]

You need to use the wpv-post-field shortcode instead of the types shortcode. Try this:

<ol>[wpv-for-each field="my-field"]<li>[wpv-post-field name="my-field"]</li>[/wpv-for-each]</ol>
          [wpv-for-each field="wpcf-plant-images" start="1" end="1"]
              <div class="carousel-item active">
                 <img src="<em><u>hidden link</u></em> name='plant-images']" alt="No picture currently available">
              </div>
          [/wpv-for-each]
          [wpv-for-each field="wpcf-plant-images" start="2"]
              <div class="carousel-item">
                  <img src="<em><u>hidden link</u></em> name='plant-images']" alt="No picture currently available">
              </div>
          [/wpv-for-each]

https://toolset.com/documentation/programmer-reference/views/views-shortcodes/#vf-153482

Your next message will be private to let you share credentials safely. Take a database backup before sharing credentials.

Please share the URL of the view or content template that you are working on.

[Jamal]

You entered both images' names as only ONE image. hidden link
You need to click on the "Add New" and enter each image name on its own field. hidden link

Then, I admit to making a mistake. When using the wpv-post-field shortcode we need to add the "wpcf-" prefix to Toolset fields.

The image is now correctly rendered. hidden link

[davidm-13]

Hi Jamal,
Thanks very much for this, as you say this works for the page I gave.
But for some strange reason if I change the url path the images that exist in this path don't appear, have a look at this page:

<em><u>hidden link</u></em>

which also has a couple of images in the Media Library.

Thanks

[Jamal]

In this post too, the images' names were added in a single field instead of being added in two fields. Check this screenshot hidden link

After splitting the names into two instances it worked.
- hidden link
- hidden link

[davidm-13]

Thanks Jamal, I missed that point.
So all my images are loaded as comma separated text fields, is there any way to process each

item separately or do I need to reload all the image names?
Thanks

[Jamal]

What do you mean by "all my images are loaded as comma-separated text fields"? Are you using any plugins to import this field?

I don't see any way to process this automatically, you will have to do it manually. Unless you are importing the images with a plugin, there may be a way to configure the import to overcome this.

[davidm-13]

Hi Jamal,
What I mean is all the image names are stored like the attached screen shot, and I'll upload all the images to the Media Library. Would it be possible to take each comma separated value, prefix the url path to it and then display the image?
Thanks

[Jamal]

It won't be possible, because repeatable fields are not stored as so in the database. Each item of a repeatable field is stored on its own line in the database, instead of one line that stores all items(separated).

You will need to manually split the values into multiple instances of the field. Each instance will hold the name of one image.