WordPress.org

Ready to get started?Download WordPress

Forums

WP Photo Album Plus
[resolved] Is WPPA compatible with responsive themes (24 posts)

  1. Marcus Tibesar
    Member
    Posted 2 years ago #

    Is there a way to make the albums and thumbnails responsive?

    I would like to activate a new responsive theme (responsive themes allow the site to work properly on smartphones and tablets (smaller screens).

    I noticed that when I activate a responsive theme the Photo Albums and the thumbnails do not get smaller and they run off the screen.

    Thank you so much,

    Marcus

    http://wordpress.org/extend/plugins/wp-photo-album-plus/

  2. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    Is there some kind of 'standard' documentation to this?

  3. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    There's no standard documentation to "Responsive Design" however it should be pretty straight forward change. All* fixed DIVs should be "converted" to fluid DIVs and that will turn fixed "layout" to fluid one.

    Please see: http://www.alistapart.com/articles/responsive-web-design/ and also feel free to peak at my http://wordpress.org/extend/themes/responsive if needed.

    Thanks,
    Emil

  4. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    Thanx! I've got homework so to see...

  5. Marcus Tibesar
    Member
    Posted 2 years ago #

    Thank you opajaap and Emil.

    I see you two know one another.

    "The best plugin developer (opajaap) working with the best Responsive theme developer." How cool is that!

    Take your time opajaap. I will not activate Emil's Responsive theme until the WP Photo Album Plus plugin is responsive as well.

  6. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    This was more like giving a hand that's all. On one developer to another basis with single goal and that's making our users happy :)

    Thanks,
    Emil

  7. Marcus Tibesar
    Member
    Posted 2 years ago #

    Thanks a bunch Emil :-)

    Opajaap - the URL below is a great example of Responsive photos. Drag the right side of the webpage towards the left and, witness the changes of the page and photos layout. Absolutely cool!

    http://www.alistapart.com/d/responsive-web-design/ex/ex-site-larger.html

  8. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    I think a lot of the technology required is already in wppa+.

    I have an auto setting for the wppa-container width (system-wide), and a corresponding scipt token (%%size=auto%%) for individual wppa+ invocation occurrencies.

    This looks at the contanier's parent width:

    w = document.getElementById('wppa-container-1').parentNode.clientWidth;

    So it relies upon the fideability of the parent node's client width.

    and recalculates all required items. Currently this still needs a timed loop, but i want change it into an event driven action.

    At which events should i trigger?

    You can see what wppa+ already can do here

    Yes, i am definitely going to examin your responsive theme

  9. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    @emil:

    A question. Please visit this test site

    When hoovering over the thumbnails, the popup appears in the left top corner of the thumnail area. This is in the Responsive theme. In other themes the popup lays on top of the thumb.
    The reason is that offsetTop and offsetLeft are 0 or a too small value. The same software shows the correct values in other themes.
    What did you do, or, better, what can i do to get the proper location of the popup inside the surrounding div?

    This seems to be the only big problem in making wppa+ compatible with the Resposnsive theme at the moment.

  10. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Hi,

    I am looking at the demo, however cannot really point where the issue is. Responsive does not control images with JavaScripts, maybe this is in conflict with something else rather than the plugin and/or Theme. Can you disable all other plugins and go from there?

    P.S. Few other thing: please check the install as well, your dates don't work the way they should:

    Posted on %A %B %e%q, %Y by admin — No Comments ↓

    and when I mouse-over the image entire DIV layer shows up instead of regular alt text please see: http://cl.ly/000l3k0x0k05160q280z

    Thanks,
    Emil

  11. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    All other plugins disabled: makes no difference.
    I have a similar same problem with IE6, that i could not fix.
    I have been playing around with absolute and relative positioning, but nothing helps...

    The alt text contains the html for the description below the popup.
    You would not see it if the popup were on the right place.

    I put in a diagnostic line below the thumbnail area, see the green line of text.

  12. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    I would not worry about IE6, the browser is dead and even WordPress dropped the IE6 support last year. IE7+ is acceptable.

    I'm no JavaScript expert, however I did notice few things. Is there a way to reduce the number of inline styles and try moving them into external JS and CSS as well?

    Also when I tested this in Firefox, with their new browser developer tool .wppa-popup is being "pushed" all the way to the left, not being anywhere near the actual thumbs http://pix.am/uQwH/ and also no styles are showing in any of the windows, HTML and right side where the actual elements should be.

    Lastly please see the Markup Validation, that usually can help a lot too.

    32 and 64 is from the Theme, but that will not hurt anything HTML5 does not recognize them yet, however the rest it might, not 100% sure but it's definitely worth a try.

    P.S. Run your JS with http://www.jslint.com/ too just in case, you never know :)

    Emil

  13. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    The problem is in your css.

    I installed Toolbar Theme switcher. If you register and log in, you can change to: Twentyten, Twentyeleven, simpleX (responsive), Fluid Blogging (also responsive) and of course Responsive.

    All themes work well, except Responsive.

    I took the source of the page (firefox), saved it and commented the link to responsive-style-css out. Than the popups come up at the right place.

    Sorry, but it is a little too simple to point to a possible violation of standards in wppa+ code.

  14. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    Hi,

    If you didn't realize I was actually trying to help you. None of the above was me saying hey dude, it's you.

    Anyways good developer fixes the "issue" and never blames on the next guy in line:

    http://themeid.com/demo/test/wp-photo-album-plus/?wppa-album=1&wppa-cover=0&wppa-occur=1

    It took me about 5 minutes :)

    Emil

  15. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    @emil:

    I did not want to 'blame' you, i just wanted to share the results of my analisis so far.

    Thanx for your help, no change in Responsive is required as i fixed it with element style position:static;

    @mtibesar:

    Still need some testing and a few horizontal alignment things to fix.
    Please have patiance for another few days.

  16. Emil Uzelac
    Theme Review Admin
    Posted 2 years ago #

    It's all good :)

    Emil

  17. Marcus Tibesar
    Member
    Posted 2 years ago #

    No hurry - real good things come to those who are patient :-)

  18. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    It looks i'm there.

    Do you care for a prerelease to test it yourself?

    If so, and if you are capable to ftp a few files to the wppa plugin dir,
    please mail me at; opajaap at opajaap dot nl, i will send you a zip with the modified files.

  19. Marcus Tibesar
    Member
    Posted 2 years ago #

    That would be great!

    I will email you.

    Marcus

  20. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    Fixed in wppa+ 4.6.5

  21. Marcus Tibesar
    Member
    Posted 2 years ago #

    Hello OpaJaap,

    Hee, hee! Yes OpaJaap it is "fixed". Such an understatement!

    You making WPPA+ responsive was a HUGE accomplishment.

    More importantly, you have future proofed this photo management system in that the plugin now works correctly on iPhones, iPads, Androids and Windows smartphones.

    WPPA+ is now device agnostic!

    Lastly, users of this plugin are now able to select and activate Responsive themes with the assurance that WPPA+ appears correctly on any platform. This opens up a wealth of new choices when it comes to theme selection.

    Bravo!

    Marcus Tibesar
    [ Signature moderated. Could you please stop doing that? ]

  22. Jacob N. Breetvelt
    Member
    Plugin Author

    Posted 2 years ago #

    the plugin now works correctly on iPhones, iPads, Androids and Windows smartphones.

    Did you test that? Can i document it works? (I don't have one of these modern expensive toys, you know, i only have an analytical brain to create working software, and a windows 7 multicore laptop).

    Thanx for your compliments

  23. Marcus Tibesar
    Member
    Posted 2 years ago #

    I have an iPhone 3gs and iphone 4. I also have an iPad 1.

    I don't have an iPhone 4s and, I don't have an iPad 2 or the "new iPad".

    I don't have a Android.

    It works on my iPhones and iPad. I believe there is one formatting issue with the album titles and, I will address this soon (I have been busy configuring the free Responsive theme).

  24. Marcus Tibesar
    Member
    Posted 2 years ago #

    You may "test" responsive themes and plugins at this URL:

    http://www.studiopress.com/responsive/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic