Skip Navigation

[Resolved] inserting slider

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 6 replies, has 3 voices.

Last updated by andrisD 5 years, 2 months ago.

Assigned support staff: selenas.

Author
Posts
#277632

I am trying to create a photo portfolio. That features a slider of different views of a home renovation project. This will take up two thirds of the page. The rest will include title, body and some other information pulled from custom fields that I used Types to create.

I created a custom post type for projects and have already built a content template to place the information where I want it. But I understand to create a photo slideshow I have to use another plugin that builds jquery sliders. That is no problem but how do I insert that into the content template? Just place some shortcode the plugin will generate? Do you recommend a slider plugin? Does it use the multiple custom field images ( I am assuming not, because I see no place to add captions for these photos. ),. Do I create a WordPress gallery for each project and have it pull from that?

Basically I am just wondering if you can give me a path to get started with this. I am aiming to create something that can be easily updated by people not familiar with Views (or that familiar with WordPress for that matter). Something that people can drag and drop some photos, write up a description, and publish. What are your recommendations?

(Another issue I have is having the content template use a full-page template. I am using Genesis with uses a two column layout by default. I want to keep that as defualt but use full-page template for the projects portfolio.)

#277693

Hi Tom,

you can create a content slider by following this instruction:
https://toolset.com/documentation/user-guides/slider-cell/
and you can use Views:
https://toolset.com/documentation/user-guides/creating-sliders-with-types-and-views/

You can set a different Layout for all posts of a certain type:
https://toolset.com/documentation/user-guides/layouts-getting-started-guide/

Let me know if this helped.

#277761

Selenas
Thank you for your reply. We might be talking about different things though. With Views you can only create sliders that pull images from posts. See this forum discussion for information on that: https://toolset.com/forums/topic/show-slide-show-of-images-of-custom-field-in-custom-post-type-view/. I am trying to create sliders that pull from multiple images attached to one post. These images would either as multi-instance custom field images or as a WordPress gallery connected to that page. Is Layout able to do that? I don't own Layout and would prefer not to buy it. I was hoping to take a slider plugin and integrate that with View's custom template if possible.

#278493

Hi,
sorry for the late reply.

I have misunderstood your previous question, sorry for this too. You can do it with Views and Types, but you need to add some code.

I would like to suggest you the solution reported here:
https://toolset.com/forums/topic/jquery-slider-flex-slider/

I will also suggest to save the flex-slider files in your theme folder, you can download it here:
hidden link
you need to add this lines to the header.php of the theme that you use:

<!-- JS Flexslider -- Place somewhere in the <head> of your document -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/woothemes-FlexSlider-ce5441b/flexslider.css" type="text/css">
<script src="<em><u>hidden link</u></em>"></script>
<script src="<?php echo get_template_directory_uri(); ?>/woothemes-FlexSlider-ce5441b/jquery.flexslider.js"></script>

then:
1. To show the field of a single post, create a Content Template by
Views >> Content Templates >> Add new Content Template
2. Define the field you want to show;
3. Add something like this code to show the images:

<div class="flexslider">
  <ul class="slides">
    [wpv-for-each field="wpcf-the-image"]
    <li>
      [types field="the-image" ][/types]
    </li>
    [/wpv-for-each]
  </ul>
</div>

4. Add to JS section:

$(window).load(function() {
    $('.flexslider').flexslider();
  });

5. Hit Save/Update

In order to properly use Flex-Slider, you can refer to:
hidden link
scroll down to the "Get Started section"

To use a WordPress Gallery as an element of the slider, you may need to use the post body for the WP Gallery and add this:

<li>[wpv-post-body view_template="None"]</li>

Just before closing the

I hope this time I gave you the right way to follow. Let me know if the solution provided here satisfies your request and any questions you have about this.

#414748
Screenshot 2016-07-10 at 09.52.19.jpg

Hi Selenas,

Great but any ideas how I could create the unordered list of images taken from images 'Uploaded to this post' ie. as in those in the Media library?

Your example seems exactly like what I need but using [wpv-post-body] will of course only show the content of the post body.

Help much appreciated,
Andris

#414750
Screenshot 2016-07-10 at 10.09.26.jpg

... The reason why I need to use images from the Media library that have been 'Uploaded to this post' is because the posts are being populated with images automatically from an external source via XML files using All Import Pro and a cron schedule.

In the Loop Wizard for example, we can choose 'Post Featured image'. It would be ideal if we could choose 'Post images - uploaded to this post'. A feature request perhaps?

#415664

You can ignore my question above. I see now that Toolset is designed around Toolset managed fields alone and the logic behind that. I've found a script thanks to the support at All Import Pro that puts the imported images from an xml file into the Toolset repeating image field 'wpcf-property-gallery'.

Here it is if it helps anyone... put it in the Function Editor of All Import Pro:

add_action('pmxi_saved_post', 'update_gallery_ids', 10, 3);

function update_gallery_ids($id) {
	$media = get_attached_media( 'image', $id );;
	foreach($media as $item){
		$gallery_img = wp_get_attachment_url($item->ID);
		add_post_meta( $id, 'wpcf-property-gallery', $gallery_img );
	}
}