0
Welcome Guest! Login
0 items Join Now

ROCKETTHEME IS CLOSING ON JUNE 30, 2025. As a thank-you to our community, enjoy 50% off all themes with the promo code THANKYOU before we shut down. Read our Farewell Blog Post for more details.

SOLVED LF: BEST PRACTICE for making GRAPHICS for particle: SWIPER - (Responsive)

Last Post
Search Topic

  • SOLVED LF: BEST PRACTICE for making GRAPHICS for particle: SWIPER - (Responsive)

    Posted 3 years 3 months ago
    • BEST PRACTICE for making GRAPHICS for particle: SWIPER - (Responsive)

      been looking at the docs : rockettheme.com/docs/joomla/templates/ph...x/particle_swiper.md
      and seaching the forum (tried) - but didnt find any...

      My Question is:

      Is there some Best practice guidelines here (Maybe some shared an awesome timesaving photoshop template?)
      - do's and dont's on DESIGNING Graphics for the SWIPER particle (and other carousel particles in general?)

      If someone know of a nice Template, tutorial, docs, that be awesome!!

      Can never make the responsive carousels graphics look good enough across platforms and devices (its hard)...

      Any help, direction is much aprechiated!
      Have an awesome day!! :-)
    • Stian Skaget
    #1444873
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13484
    • Web Designer/Developer

    Re: SOLVED LF: BEST PRACTICE for making GRAPHICS for particle: SWIPER - (Responsive)

    Posted 3 years 3 months ago
    • Swiper has a couple of way of displaying the image - as an IMG which means it scales up and down and always fits the area in which is resides and BACKGROUND which means the image is used as a background under the text and gets clipped to suit that. The IMG has the disadvantage that the text can often be bigger than the image as you scale down. The BACKGROUND disadvantage is that you might not always see all the image. So, making the right choice to start with is key.

      Next, generally don't put textual content in images - it doesn't scale well and if you can either end up with unreadable text or clipped text.

      Next, think about who your audience is - if they are likely to be using 5k monitors then you will have to make the images superwide to accommodate them and this will mean larger downloads - so it's always a trade-off.

      Sometime there's just no getting around the fact that you will need to use custom CSS to make tweaks to how the swiper is presented in different viewports. Or, alternately you could use a different swiper for mobile vs desktop by using the responsive support classes (e.g. "visible-phone" and "hidden-phone").

      For images used only on a monitor you don't need to go higher than 72ppi and you should use an image optimisation tool (either online or photoshop) too compress your images into the smallest file size. Use jpg for images - use png for graphics.

      I hope those tips help you.

      Regards, Mark.

    • The following users have thanked you: Stian Skaget

    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    #1444875

  • Re: SOLVED LF: BEST PRACTICE for making GRAPHICS for particle: SWIPER - (Responsive)

    Posted 3 years 3 months ago
    • Thank you!

      Very helpful! - I'm sure others will benefit from this too ;)
    • Stian Skaget
    #1444881

Time to create page: 0.087 seconds