1. Hello Guest!

    Thank you for visiting the ClubRunner Community website, you can login using your ClubRunner account information by clicking the login link on the top of every page.
    Dismiss Notice

Imported Photos are being "Auto Turned"

Discussion in 'Website Customization' started by Barb McG on Dec 28, 2020.

  1. Barb McG

    By:Barb McGDec 28, 2020
    Community Member

    Joined:
    Aug 28, 2020
    Messages:
    44
    Likes Received:
    5
    Gender:
    Female
    Location:
    Walnut Grove, CA, United States of America
    Good Morning Community:

    I am working on a Dynamic Carousel slide show. Many of the photos are importing and Clubrunner is automatically turning the photos making how they are displayed wrong.

    I can not find any simple photo editing tools. Are there any? If not, how can I get the photos to display correctly?

    The slide show is on shown at https://walnutgroverotary.org/

    Thank you,
    Barb
     
  2. Barb McG

    By:Barb McGDec 28, 2020
    Community Member

    Joined:
    Aug 28, 2020
    Messages:
    44
    Likes Received:
    5
    Gender:
    Female
    Location:
    Walnut Grove, CA, United States of America
    PS:

    I'm finding the time involved to edit photos prior to uploading extremely time consuming and so 'untechy'. Please have a solution.
    Thanks,
    Barb
     
  3. John Borst

    By:John BorstDec 28, 2020
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    210
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Barb, I see what you mean. I think you are correct, the photos need editing in size and shape. I have found that Photoshop, although not "simple" is indispensable to creating carousels. Ideally, they should be set to the standard that ClubRunner has established.
     
  4. John Borst

    By:John BorstDec 28, 2020
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    210
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    Yes, it is time-consuming, however, the quality of the finished product is well worth it.
     
  5. Barb McG

    By:Barb McGDec 28, 2020
    Community Member

    Joined:
    Aug 28, 2020
    Messages:
    44
    Likes Received:
    5
    Gender:
    Female
    Location:
    Walnut Grove, CA, United States of America

    Thanks for the support and information John. Unfortunately, I'm not a photoshop user honestly, it should be a function to easily set in Clubrunner.

    Do you know what the clubrunner standard is (so I don't have to go find it)?
    Cheers,
    Barb
     
  6. John Borst

    By:John BorstDec 28, 2020
    Well-Known Community Member
    Beta Tester

    Joined:
    Jun 25, 2018
    Messages:
    210
    Likes Received:
    52
    Gender:
    Male
    Occupation:
    Retired Education Administration and Teacher
    Location:
    Education - retired
    I did a quick analysis of your carousel. I am not an expert just a practising junkie on ClubRunner. My first instinct is to switch from the dynamic carousel to the older version (non-dynamic) The standard width for the latter, I think, is 960 pixels, while the standard for the dc version is 1920 pixels. But do a search on ClubRunner to confirm my conclusion as I just checked my own work examples.

    In fact, I might even suggest that you use a photo album instead of a carousel. Your pictures have a wide variety of heights and by using the dynamic carousel they are bigger than a screen so you have to scroll to see them all. I did three full-page screenshots using the Edge Browser. There is white space under the short pictures because the height of the longest photo establishes the size of the entire carousel.

    Also, check out the difference of the view on the Edge Browser and Chrome Browser. It is startlingly different. I haven't a theory on why some photos flip sideways but my guess is it has something to do with size.

    I really recommend checking your design and posts on a lap/desktop, tablet and phone plus the different browsers. There is a reason header graphics are so big today on desktops. Most people view sites on browsers on cellphones. For example, the full width 1920 banners/graphics at the drydenrotary.org site are not really one 1920 banner, they are really two pictures. On a cellphone, the print was not legible so I made two photos side by side with the identical white borders and now on the cellphone they appear as one photo on top of the other and are legible. ClubRunner staff told me the code to do that but I do not know code and got the same effect using photoshop and a two photo widget.
     
    Barb McG likes this.
  7. Barb McG

    By:Barb McGDec 28, 2020
    Community Member

    Joined:
    Aug 28, 2020
    Messages:
    44
    Likes Received:
    5
    Gender:
    Female
    Location:
    Walnut Grove, CA, United States of America
    Hi John,

    I have been changing the dynamic carousel all morning. I'm now into this 4.5 hours and it is tedious. A problem that can be solved by Clubrunner. But alas, I'm working through it.

    I just went to my cell phone and it looks terrible. I use Chrome and it does look different on Edge. At my expertise level, that is at the bottom of my list to try and make it an average on both.

    Just changed the 8th photo, made a frame and 'bottom' section to show the title. Still too big and I'm not nearly at the 1600 x 400 pixels recommended by Clubrunner (As a recommendation, we use an image size of 1600 pixels wide x 400 pixels tall when setting up new carousels for clubs.) Way too big for my eyes.

    Still at my desk working on this. Our auction begins soon and I have a huge technology learning curve to have a successful auction. Hope my boss doesn't mind! :)
     
  8. Jacqueline Grant

    By:Jacqueline GrantOct 17, 2021
    New Community Member

    Joined:
    Oct 17, 2021
    Messages:
    1
    Likes Received:
    0
    Gender:
    Female
    Location:
    York, ME, United States of America
    Did you ever find a solution for this issue? I'm not using the carousel, just trying to update stories and several are shown correctly on my laptop, but once uploaded to Clubrunner library, it "flips" on it's side. Seems like there should be a relative easy fix..... thanks for any help you can provide!
     
  9. Omar S.

    By:Omar S.Oct 20, 2021
    Moderator
    ClubRunner Team

    Joined:
    Oct 22, 2019
    Messages:
    28
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Product Specialist
    Location:
    ClubRunner
    Hello,

    Thank you for posting about this photo and image rotating issue.

    We can confirm this photo rotating issue is caused by the browser reading the photo or image files orientation 'Meta-data' (Also known as EXIF image orientation orientation data).

    In some cases, when photos are taken on a mobile device, the photo is saved with this data to rotate the picture on software and browsers to maintain it's orientation.

    When the browser reads the original image file with this EXIF data, the browser will rotate the image, sometimes erroneously.

    To work-around this, we suggest opening the image in an image editing software, such as Paint for Microsoft devices, or Preview for Apple devices and save a new copy of the image while it is upright, using the 'Save' option.

    Using this 'Save' option will remove the meta-data associated with the image file, and ensure the browser does not rotate the image after being uploaded to the club website Image Library, or Photo Album.

    You can also work-around this meta-data issue by rotating the batch of images clockwise or counter-clockwise, by using a free or subscription-based third party website image editing tools.

    You can find a free image editing tool to rotate a batch of images, here on this page on the 'OnlineImageTool' website:
    https://www.onlineimagetool.com/en/rotate-png-jpg-webp-gif

    Please note, ClubRunner is not affiliated with, or connected to the OnlineImageTool website company.

    Below the rotate tool at the top of the website page, the page goes into more detail about the EXIF image orientation data, and how the meta data is saved to images and read by devices, software, and browsers.

    I would like to also share, we are hoping to include functionality in the website widget and content editors to include options to rotate images after uploading the images to the website. At this time, we cannot offer any timelines for when the additional image editor features will become available.

    I hope this helps with learning more about this photo 'Meta-data' browser issue, and with saving copies of the images without the meta-data, or by using an online image editor tool, free or subscription-based to rotate the images upright.

    Please let us know if you have any questions.
     
  10. ClarkNK

    By:ClarkNKOct 28, 2021
    Community Member

    Joined:
    Sep 8, 2021
    Messages:
    24
    Likes Received:
    1
    Gender:
    Male
    Occupation:
    Retired
    Location:
    Canandaigua, NY, United States of America
    A pretty good (free) image editing software for a pc is Irfanview .

    It takes a bit of working thru their help menu, but it can be used for basic image editing / resizing.
     
  11. Neil Lang

    By:Neil LangDec 25, 2021
    New Community Member

    Joined:
    Dec 25, 2021
    Messages:
    1
    Likes Received:
    0
    Gender:
    Male
    Location:
    Polytechnic - Administration
    Omar gave a good explanation which I will simplify to:
    1. Open the Paint software app
    2. Open your jpeg or other errant picture
    3. SaveAs a PNG file
    4. Exit and pull the PNG file into CR as desired

    NO Need to do any funny turning rotation of your image.
    Wish I had known this years ago.
     
Top