[Resolved] Caption for repeatable images field

[Author]

Posts

[Angele]

I am trying to:
Get the caption of the image set in media library

I visited this URL:
I read several threads here but this did not help in my case

How I can display the captions for the images, I inserted this code in a content template:

	<div class="newsimggallery">
				[wpv-for-each field="wpcf-newsimage"]
					<a href="[types field='newsimage' raw='true' link='false'][/types]" class="thickbox" rel="gallery">  [types field='newsimage' size='thumbnail' align='left' resize='crop' title='Zum Vergrößern bitte klicken'][/types]                    
					</a>
				[/wpv-for-each]
	</div>

[Beda]

You can not fall back to the WordPress Media meta in case of a Views Loop where you display the Media uploaded.

This will work only if you insert the Image with the Types Upload button for a Image Field and the Field isn't repeatable.

In a Loop, as also a repeatable Field is, Types and Views will either display for all Images the same meta as you set in the Toolset GUI/Wizard, or nothing.

This was reported here, and I asked the DEV to look int this:
https://toolset.com/forums/topic/display-the-title-and-alt-of-an-image-in-content-template/

This (Media attributes) will only be inherited from WordPress if the field is single and not in a Views Loop.

Please do not hesitate to open a new thread if other issues or problems arise

Thank you for your patience.

[Angele]

Thank you Beda.

I leave this thread open, since I will try to solve it with repeatable group fields=
Upload image, write the "caption" to the second field of the group (single line) and bring this together. Probably I will need help or I will post this workaround here.

[Angele]

Hi Beda,

I found a wonderful way to achieve captions and beautiful popup for repeatable images. I was not happy with thickbox, since it is hard to use on mobile devices. So I searched for an alternative.

The workaround:
First of all I installed the plugin "WF Magnific Lightbox" from plugin author "wunderfarm"
https://wordpress.org/plugins/wf-magnific-lightbox/

With this plugin you can popup every single image (must link to media) , WordPress Galleries (images must link to media) and also the repeatable images in a loop of Views (link to media is set in content template see below).

Then I built a content template:

<div id="gallery-1" class="gallery">
	[wpv-for-each field="wpcf-newsimage"]
		<a href="[types field='newsimage' raw='true' link='false'][/types]">
			[types field='newsimage' size='thumbnail' align='left' resize="crop" title='Zum Vergrößern bitte klicken' alt='[wpv-post-title]'][/types]
		</a>
	[/wpv-for-each]
</div>

Next I inserted the content template in my post or cpt (in my case I use Layouts with genesis and the cpt "news" where I put the content template in a row of the Layouts Layout).

Notice: Important is the ---- class="gallery" ---
Notice2: If you want to have more than 1 gallery use additionally --- id="gallery-1" ---
If you decide to use the ID you must start with -1.
Notice3: With the plugin you can also popup images of the WordPress build-in gallery. WordPress starts with the ID -1 (and so on) and does not recognize the ID of the gallery of the content template.

(Probably it would work to add an additional text field with Types named "galid" (however) and use this for the ID number. I must test this). Otherwise use only the --- class="gallery" --- and no ID in the content template, this will work

The caption of every image is displayed in the popup below its image and is fetched via the plugin from the meta.

Beda, do you have any addintional (improvment) suggestions?

[Beda]

This is a nice solution.

It goes along with what I usually suggest, to populate the "alt" or any other Media meta with ShortCodes (either fields or Posts data)
https://toolset.com/forums/topic/display-the-title-and-alt-of-an-image-in-content-template/#post-364532

Only one thing you must keep in mind.

WordPress is not suggesting ShortCodes in HTML, and ShortCodes in ShortCodes (nested) can be problematic too.

This will work with Views.
As long you pay attention to the apostrophes of the Nested ShortCodes

Below a example.

Working (but only with Views)

<a href="[wpv-post-url]">[wpv-post-title]</a>

Not working (even if with Views)

<a href="[wpv-user field="user_url" id="1"]">[wpv-post-title]</a>

Working (but only with Views)

<a href="[wpv-user field='user_url' id='1']">[wpv-post-title]</a>

As you see the inner apostrophes are single, not double.

As for the WordPress ShortCode API rules, and restrictions, read more here:
https://make.wordpress.org/core/2015/07/23/changes-to-the-shortcode-api/

I like your solution, and I am sure I will link other Users to this Thread often, as it represents a nice workaround with a single 3rd Party add-on

Thank you for sharing it.

[Angele]

Thanks Beda.

And I have increased the gallery with additonal textfields as captions. The above solution is based on repeatable image fields. The following solution is based on a repeatable group field. Both solutions make use of the "WF Magnific Lightbox"

Workaround:

The Parent is the custom post type "News". I want to write several news and want to have the option to insert a separated gallery (not only WordPress Galleries) with caption-text and popup (Lightbox) effect.

1.) Build a new CUSTOM POST TYPE "News Caption". Retain all options default, save. Edit again and choose "NEWS" as "PARENT POST TYPE". Save.

2.) Build a new "POST FIELD GROUP" -> "CAPTIONS". Add 2 news fields: "CAPTIONIMAGE" (image field) and "CAPTIONTEXT" (single line field). Enter Names and slugs and retain the default options. Save. Edit again and choose "POST TYPE(S): NEWS CAPTION" as "Where to include these Fields".

See attached Screenshot 1: 01_post_field_group_for_post_type_news-captions.png

3.) Now add a new "VIEW", choose "Display all results". Next choose "NEWS CAPTION" under "Content Selection". In the Loop Output field insert the code. For the code see ->

attached Screenshot 2: 02_views_for_caption.png

4.) Now write a new News. Below the textfield you can insert "captionimage" and "captiontext".
See attached Screenshot 3: 03_edit_cpt_news_insert_images_and_captions.png

5.) Look at frontend. You'll see the images and the text. With a bit love of CSS it looks like so:
See attached Screenshot 4: 04_gallery_with_textfield_as_caption.png

6.) To receive a caption in the popup image you must input text in the alt (alternative text) field of the image in the WordPress Media library. And the next screenshot shows the popup (lightbox) with alt-text as caption.
See attached Screenshot 5: 05_popup_image_with_caption.png

@Beda:
please could you take a look to the mentioned code, if the double/single apostrophes are okay (only) in Views? (Oh I detected one mistake in the code= it should be 'crop' and not "crop")

I post the (hopefully) correkt code below:

[wpv-layout-start]
	[wpv-items-found]
<div class="newsimggallery">
  <div class="gallery">
	<!-- wpv-loop-start -->
	<wpv-loop>
			<a href="[types field='captionimage' raw='true' link='false'][/types]">
			[types field='captionimage' size='thumbnail' align='left' resize='crop' title='Zum Vergrößern bitte klicken' alt='[wpv-post-title]'][/types]
           		<span>[types field='captiontext' output='raw'][/types]
         		</span>
       		</a>
	</wpv-loop>
	<!-- wpv-loop-end -->
  </div>
</div>

	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]Keinen Eintrag gefunden[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

After your reply I wil close the thread.

[Beda]

Thank you very much to share your solutions here!

This is very useful and I am happy that you allow other Users to profit from your knowledge and experience on this.

The apostrophes look great.
A little trick to do that check is the following:

1. Copy paste your code into any Content Template or Views Loop editor

2. If you see any red ShortCode attributes or any other non-defautll color of brackets and text in ShortCodes, you know there is a "bug" somewhere, usually caused by:

- false apostrophes
- missing apostrophes
- not closed ShortCodes
- any other HTML error

I attached 2 Screenshots illustrating that.

Note that in the Views ShortCode "[wpv-item index=1/other/pad/pad-last/]" this is the case by design.

This is the ONLY shortCode in Views that does not use apostrophes and will "mess" your HTML (colors)
But that is not a error, it's by design.

I also added a Screenshot of that.

Keep also in mind that this is still not what WordPress suggests.

WordPress has very strict "rules" on nested ShortCodes, but Views makes this possible.
https://make.wordpress.org/core/2015/07/23/changes-to-the-shortcode-api/

Thank you for your patience.

[Angele]

You are welcome.

Yeah, code highlighting is helpful. But not always. The code above on my Screenshot 2 does not highlight the wrong Apostrophes around "crop".

Have a nice day!