Jump to content

Archived

This topic is now archived and is closed to further replies.

davidcosgrove

Flyp image issues

Recommended Posts

davidcosgrove

Hi,

We are developing a new website with Flyp on the home page and we are running into some issues with the images.

Images are getting cut off when the screen size changes and are not displaying consistently between Chrome and Firefox all the time.

We've tried viewing this while logged in and also logged out of WP admin - here is a brief demo clip, we get iframe-like scroll bars instead of the images/grid responsively adjusting -

http://www.conventionsetc.info/flyp.mp4

You can see the page in action live here -

http://www.conventionsetc.info/index/

Not sure what to do - need your help.

Thank you!

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

Hi David. Thanks for your purchase and the detailed info.

Having an img tag inside the front or back content area for a card is sort of a hack. That's why I had to create a way to calculate some max-height styling (and added an option to disable it). And, yes, it is in effect at the link you provided.

I think for what you're wanting to do, you should use it as a CSS background.

Please reference this thread: http://forum.pagelines.com/topic/37345-full-size-images/#comment-220814

Let me know if you get along just fine with that or if you need additional assistance.

Share this post


Link to post
Share on other sites
davidcosgrove

Hi Clifford,

Thank you for getting back to me so quickly!

I see what you're saying - I applied this approach with the CSS background and gave it a quick test with the first flyp card - the only thing that still seems a bit out of place is when it becomes rectangular vs. square -

http://www.conventionsetc.info/flyp2.mp4

I can Photoshop the specific pixel dimensions and embed the actors' names in the square images, so that will work.  My only concern is, is there a screen resolution where the viewer will only see rectangles instead of the square?

Thanks again for your help :-)

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

I believe your "photos of faces" implementation was a bit different than the other forum thread's.

Try this instead:

background: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/john-noble.jpg');
background-repeat: no-repeat;
background-position: top center;
background-size: contain;

Or, consolidated:

background: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/john-noble.jpg') no-repeat top center;
background-size: contain;

 

So, if you want to do this same thing for ALL the Flyp cards in this section (notice the section ID in the code), you could do something like this:

#flypuc1l2i8 .flyp_front {
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
}

And then you would only need to do this for each custom image (notice the .flypcard1 code):

#flypuc1l2i8 .flypcard1 .flyp_front {
    background-image: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/john-noble.jpg');
}
#flypuc1l2i8 .flypcard2 .flyp_front {
    background-image: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/ksenia-solo.jpg');
}
#flypuc1l2i8 .flypcard3 .flyp_front {
    background-image: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/rachel-skarsten.jpg');
}
etc...

 

I think that'll get you there.

The only downside to this "background image" approach vs an HTML img tag (Flyp default behavior) is if you want to add text to the front side of the card as well. You could still do it, just would need more attention to detail (e.g. white font color instead of default black and positioned with custom code).

 

Good luck! :-)

Share this post


Link to post
Share on other sites
davidcosgrove

Hi Clifford,

Thank you so much for your help with this!!  I've gone ahead and updated the entire Flyp section and now it looks stellar -

http://www.conventionsetc.info/index/

Thanks again :-)!!

Share this post


Link to post
Share on other sites
TourKick (Clifford P)

You're welcome. Good job!

P.S. I also wanted to make you aware of the "Card Drop Shadow (Default: ON)" option, in case you wanted them not to have a shadow below each one (visible on your site at smaller screen width)

And you're welcome to leave a review at http://www.pagelines.com/shop/sections/flyp/#pl-shop-reviews or check out my other products at http://www.pagelines.com/author/tourkick/?post_type=product

Thanks again for your purchase. I hope you and your site do very well.

Share this post


Link to post
Share on other sites

  • Similar Content

    • davidcosgrove
      By davidcosgrove
      Hello,
      We are working on finishing up our development website here - http://www.conventionsetc.info/index/
      Instead of having all of the Flyp cards on the home page, we are splitting them up, 16 on the home page, 14 on the new page called "More Celebrities".
      Below is a sample of the CSS that you helped us with back over the summer - this works perfectly on the home page.
      .flypcard1 .flyp_front { background: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/john-noble-275.jpg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
      .flypcard2 .flyp_front { background: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/KSENIA-SOLO-275.jpg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
      .flypcard3 .flyp_front { background: url('http://www.conventionsetc.info/index/wp-content/uploads/2015/07/RACHEL-SKARSTEN-275.jpg'); background-repeat: no-repeat; background-position: top center; background-size: contain; }
      However, when we try to change the photos on the new "More Celebrities" page, it's still pulling the same images from the CSS on the home page.
      So, we need to know how to set the Flyp cards CSS for the new "More Celebrities" page so we can load up different images there specific to that page.
      I hope this all makes sense.
      Thank you for your help!
      David
    • nadielp
      By nadielp+
      Hi Cliff,
      I love Flyp. Thanks for creating it.
      I am curious if there would be a way to set opacity for the background on Flyp. It would be of use to me on a site I am working on.
      Thanks,
      Daniel
    • alisamski
      By alisamski+
      Having a problem with flyp working correctly on the site..
       
      http://bit.ly/1yHIJ05
       
      Not sure if there is a conflict...
       
      Please advise... its an advent calendar which is a timely matter.
       
      Thank you
       
      [attachment=2520:flypview.png]
    • JasonLA
      By JasonLA+
      Hi Clifford, 
      I just bought your Flyp app but am having some trouble making it look good. Can you please explain to me how I would go about adding images to each box that take up the entire box all together rather than just being placed in the middle of it? I'm trying to make a sort of collage and am not too familiar with HTML you suggested someone review in a previous question. 
       
      Thanks!
      Jason
    • arlomiller
      By arlomiller
      I'd love to have photos in Flyp that would also have a line or two of text below them that would serve as a caption. I've been able to put in text, but there seems to be very little control over the formatting of it.
×