WordPress.org

Ready to get started?Download WordPress

Forums

Help creating a custom slideshow (25 posts)

  1. mortalwombat
    Member
    Posted 2 years ago #

    I am building a custom theme for a photography company, and have hit a complete block here. Mainly, I don't know what my options are. The design calls for a slideshow of images on several of the pages. Each instance of the slideshow is designed the same, but the photos will be unique to each. The design is really simple. It's just a large photo, dots below to represent each image in the stack, and left/right arrows.

    I can build this in javascript or something like that, but I'm not sure what my options are for integrating that. I could use a plugin, but I have two problems with plugins: 1 - They can break if the user upgrades WP, and 2 - They are hard to style to fit the design you need and the styling may not survive an upgrade of the plugin.

    I would think integrating it into WP would be a great way to go, but I don't know where to start on that. Ideally, the user can add and change photos in the galleries through the WP admin panel, so this would be nice as well.

    I dunno, I just don't really know where to start on this one, so if someone could point me in the right direction, that would be great!

    Thanks!

  2. Jose Castaneda
    Member
    Posted 2 years ago #

    It sounds like you know what you have to do but don't want to. The quick solution would of course be using a plugin and styling it. There are a few that allow for custom styling but I couldn't tell you which ones are good. The second option would be creating your own slider from scratch or modifying a pre-existing jQuery slider to suit your site's theme. I guess it would really depend on how complex you want your slider to be when it comes to transitions.
    I personally would use a plugin for the meantime as a quick solution all the while create my own with a jQuery slider plugin modified and styled.

  3. mortalwombat
    Member
    Posted 2 years ago #

    Thanks so much for the prompt reply.

    It's not so much that I don't want to do this (I love this stuff), but I don't know how to best integrate it so it's easy for the client to update it. I have zero experience with integrating that sort of thing with WordPress, but I do look forward to learning it.

  4. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

  5. mortalwombat
    Member
    Posted 2 years ago #

    Thanks Esmi, but as I mentioned above, I don't really want to use plugins if I can avoid it, and that doesn't really give the client the easy control I am looking for.

  6. Digital Raindrops
    Member
    Posted 2 years ago #

    Thanks Esmi, but as I mentioned above, I don't really want to use plugins if I can avoid it.

    Most plugins are opensource so you could make the plugin code part of your theme, just find a lightweight plugin or JQuery and build it in!

    I am looking at Flex Slider, Woo Themes have the IP on it now, but you are allowed to use the code, I am using two sliders here, and will be releasing this free child theme, once I have ironed out any isues.

    HTH

    David

  7. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    that doesn't really give the client the easy control I am looking for.

    Did you even try the plugin I mentioned? It allows you (or your client) to set up & manage as many different configurations as required.

  8. mortalwombat
    Member
    Posted 2 years ago #

    @DigitalRaindrops: Thanks! If I go the plugin route, I will look into that.

    @esmi: No. I simply looked at it with the limited information and screenshots that was there. But again, I would like to avoid plugins in the first place. I am toying with custom building something right now. If that proves too difficult, I will look into plugins, and I will look at yours.

  9. Digital Raindrops
    Member
    Posted 2 years ago #

    Hi,
    You should be able to adapt this child theme to do what you want, it has a setup page and a function where you pass in a couple of arguments.

    It would be easy to modify the code to return different data sets, and wp-super-cache would limit the database reads.

    HTH

    David

  10. mortalwombat
    Member
    Posted 2 years ago #

    Thanks David! That looks like an awesome option. But now I am really curious how to start integrating my own JQUERY slideshow into the control panel. Any recommendations where I can start looking to learn how to do that myself?

  11. Digital Raindrops
    Member
    Posted 2 years ago #

    The best way is to look at themes that have the code you need, then study the code and try to "do it yourself", if that fails then there are plenty of reasonable code jockey's at places like people per hour.

    Looking at your first post, I would look at the Flex Slider and a Page of posts template, you would not need a slider admin page, if you look at this one, it uses metaboxes to display posts from a category in a page, use some of that or shortcodes to load the slider.

    This is 80% of the solution, you just need to merge the two!

    HTH

    David

  12. mortalwombat
    Member
    Posted 2 years ago #

    OK. Thanks. I think that gives me some direction. I really really appreciate it.

  13. mortalwombat
    Member
    Posted 2 years ago #

    Thanks so much for that help. I got it all working last night, and it's working phenominally. I ended up creating a shortcode that pulls the attached images and prints them in the apropriate HTML.

    Now, the only thing I would like to do is add a button in the "Add Media" Window next to the "Insert Gallery" Button. It would simply say "Insert Slideshow", and it would just attach the shortcode for the slideshow. Any direction on that one?

  14. Digital Raindrops
    Member
    Posted 2 years ago #

    There are a few premium themes that add an icon in the editor which can insert pre-defined shortcodes in the page, I do not have an example.

    As you are using attached images, I would use a custom post type, that is not searchable and cannot be added to the menus, use the title slug in the shortcode and retrieve the images.

    Here is the code for an Advert Custom Post Type that you can modify.

    Then use Query Post to find the post->ID by {slug}, you already have code for the attachments.

    So if the attached images were attached to a custom post with the Title London by Night and slug, london-by-night, the shortcode may look like:

    [gallery london-by-night]

    If you have a test site and don't mind, it would be great to see it in action!

    HTH

    David

  15. mortalwombat
    Member
    Posted 2 years ago #

    That's a really good idea! Unfortunately, I have taken this a completely different direction. I just us wp_get_attachment_image() to get the images that are attached to the pages, then display them on the page with the custom shortcode [start_slideshow] I styled that to be semi-pretty and accessible, then fancied it up more with jquery.

    What I would love is to have a simple button in the add media window that lets me customize and place the shortcode, but I am unsure at this point if that's necessary now. The client and I are deciding if we will need these slideshows in blog posts, or just the pages. If they stay only on the pages, there will be no need for the client to add shortcode for it. So for now, we wait.

    Here is the test site. It's got a long ways to go, so don't judge too harshly :p Test-Site

  16. j3ddesign
    Member
    Posted 2 years ago #

    im not as experienced as some users here, but a method i have used in the past for a similar effect was to use custom posts types, with an "album" taxonomy. giving you the ability to create multiple loops each pulling a different "album", leaving you the full freedom of css and scripting etc.

    if thats not the sort of thing you were thinking then sorry xD

  17. Digital Raindrops
    Member
    Posted 2 years ago #

    The client and I are deciding if we will need these slideshows in blog posts, or just the pages.

    I could not see the slideshow on the page!

    To make it slick and on pages or posts, you could use a custom field or better still a metabox, with a checkbox to enable slideshow, then all you need to do is check the page or post metadata to see if the slideshow is active.

    HTH

    David

  18. cindywang123
    Member
    Posted 2 years ago #

    i am so haapy that,Thanks so much for the prompt reply.now i think i know something,i will try my best

  19. mortalwombat
    Member
    Posted 2 years ago #

    Try again. I was working on the slideshow from work when I posted this, then last night I pulled the functions.php file from the ftp and started working on it from home. When I re-uploaded, something happened and I corrupted my functions.php on the host, and through a series of stupid events, lost my local copy as well. So my functions.php was completely blank until I got back to work this morning to re-upload. It's all better now.

  20. Digital Raindrops
    Member
    Posted 2 years ago #

    Nice!

    Lost the top menu in IE9 Compatibilty (IE7) view (css issue).

    Shame it is not responsive like twenty eleven when you resize the browser, so will you have a mobile option?

    David

  21. mortalwombat
    Member
    Posted 2 years ago #

    Thanks for the heads up on the IE7 view. I will probably have some custom CSS for mobile, just to keep things pretty, but I won't have a full mobile site. I tend to think that's a silly requirement for a lot of sites. Mobile sites are great for sites that have a content people want to keep up to date with - News, shopping, etc. But sites for business like photographers are very much about the visual aspect. I would rather them see the site on the phone the same way they would on the computer.

  22. Digital Raindrops
    Member
    Posted 2 years ago #

    I have four daughters in their twenties with kids and most of their viewing is done on small devices (net books or smart pads) or mobiles (iphone or blackberry) now for ebay, facebook etc:

    I.M.H.O. I would say a mobile presence is getting more and more a requirement for a service business aimed at a young market.

    The website concepts looks to be weddings, one of my daughters is planning hers and sends links to my mobile (HTC), if the page does not have a mobile view or is hard to read it will frustrate me, and it is unlikely I will view it at work or home.

    Regards

    David

  23. esmi
    Theme Diva & Forum Moderator
    Posted 2 years ago #

    I would rather them see the site on the phone the same way they would on the computer.

    Apple would agree with you. They deliberately configured the iPhone & iPad to ignore mobile stylesheets on the grounds that their users wanted "the rich-media experience". And from what I've seen, most sites render just fine on modern mobile devices. When carrying out my own small, ad hoc, user surveys, I was told that most people shunned mobile sites because they were "boring" or "clunky" and would only use them if they absolutely had to (eg didn't have a nearby wireless connection, so needed a low-bandwidth version).

  24. mortalwombat
    Member
    Posted 2 years ago #

    Thanks for the input on the mobile stuff. I will definitely have to take those into consideration.

  25. mortalwombat
    Member
    Posted 2 years ago #

    BTW Digital Raindrops - If you guys are looking for a good wedding photographer, I know some! :p

Topic Closed

This topic has been closed to new replies.

About this Topic