Before you ask please READ THIS

Video and Still Images

edited December 2012 in Hypershot Posts: 20
2012DE30 Hello;

Like Berniblue, as I create my image and video files for the site I am wondering about this too because most of my videos are 1920x1080px and 1080p plus I will be using retina sizes still images/graphics. Not only that but also smaller images too.

I looked over the manual and the support topics but did not find answers to these questions. I hope I did not miss anything.

It is a lot of work to create and upload many videos so I need to be sure I use the maximum correct size to begin with.

The Main Questions:

1] What maximum size video can I upload to Vimeo and YouTube to insert into the A] slider B] any of the bricks layouts ?
I will likely use the mixed bricks layout.

2] Can the video size accepted by the theme now be changed if it is pre-set at some maximum?

3] If I can use 1920x1080px videos do my other still images or whatever that are inserted into the slider have to be the same size?

Discussion:

Will any video sizes mixture fit into the FlexSlider or the masonry bricks layouts/output? My videos are about 1920x1080px (which is the 1080p HD MP4 H.264 videos that I will use mostly) but may also be smaller videos from time to time such as 1280×720 (720p) or perhaps even 640×385 for some small 16:9 video. Is a mix of sizes going to look OK and work?

Does the video size I upload on Vimeo and YouTube matter and does the theme take care of fitting it in?

Responsive framework; the reason I also ask is I read this somewhere "Sometimes the main container is built for a responsive framework starting at smaller sizes like 1000 px and down. To modify that will require to calculate again all the spaced elements inside the layout. Images and video can scale to fit their containers and grids expand in some themes."

I searched everywhere to understand this and found related information but no specific answer, especially because it seems it all relates to specific theme coding plus the FlexSlider or other containers and tags.

In the manual you show a landscape size under Template image sizes but I do not know if it applies only to still images or if it can be changed? Under Album Appearance Optimal image resolution: Landscape – 1100 (width) x 750px (height) .
You write about this size again here but it says picture not video: http://apollo13.eu/docs/hypershot/#!/adding_album

For the bricks layout 320 x auto (can be changed ... but to what maximum or minimum?); I am not sure how the video or regular retina scale images would work in the bricks display page (popup is lightbox?) after the item link is clicked. Width is 320px but demo uses 326px (3 x 326 = 978px) but then what when making square images at say 1,500px wide for retina display plugin2X -- how many px for width then? It is hard to know exactly what the parameters are because such size changes could matter due to responsive design.
http://apollo13.eu/docs/hypershot/#!/image_sizes_video_support_and_others

I looked at your demo and the video there is a very small width="400" height="300"
I am not sure if the iframe adjusts to fit any sized content or not, nor do I know if the framework goes as large as 1920x1080px or 1,500px for images never mind the sidebar etc or exactly how this works. I attached what a 1500px X 1500px image as previously discussed looks like in the album page... it spills over the menu and obviously doesn't work.

Demo REF:


http://themeforest.net/item/hypershot-photography-portfolio-wordpress-theme/full_screen_preview/3391790

Under Album appearance you have an option "Fit always – regardless of pictures' height or width, it will always fit them in the height of the browser window so as the entire image is visible." http://apollo13.eu/docs/hypershot/#!/adding_album
and your "Note! The best and optimal results can be obtained by adding wide pictures ( landscape )."
Optimal image resolution is noted here too: Landscape – 1100 (width) x 750px (height) but again I am not sure if this applies to videos too or what would happen with retina sized images here.

It would be really helpful if there was a section under the albums specifically for video and specific to the slider as well as another section specific to the bricks layouts and related popup plus hyperlinks to any other place in the manual you discuss image/video sizes.

Thank you and Happy New Year to All.

Note: I am not using the WP Retina 2x plugin yet nor the Enable Media Replace recommended to use with it due to issues that need to be sorted out with WP 3.5
http://wordpress.org/extend/plugins/wp-retina-2x/
http://wordpress.org/extend/plugins/enable-media-replace/
Read the tutorial about the plugin http://www.totorotimes.com/news/retina-display-wordpress-plugin


http://support.apollo13.eu/discussion/574/when-displaying-a-video-would-it-be-possible-to-get-rid-of-the-black-marge-s-
http://support.apollo13.eu/discussion/comment/2139#Comment_2139

Perhaps some of my research is useful:
http://stackoverflow.com/questions/tagged/flexslider
http://stackoverflow.com/questions/10637280/flex-slider-how-to-make-it-responsive
http://stackoverflow.com/questions/11703948/flexslider-image-size-automatic-adjust-to-fluid-width
http://stackoverflow.com/questions/7041278/how-to-fit-an-image-to-borders-and-keep-aspect-ratio-in-html
http://www.concrete5.org/community/forums/chat/flexslider-responsive-layout-issue/#308952
http://stackoverflow.com/questions/12407473/wooslider-flexslider-respnsive-image-not-working
http://stackoverflow.com/questions/13837382/flexslider-image-limit
http://processwire.com/talk/topic/2283-solving-the-annoying-flexslider-fade-delay/
http://www.inkthemes.com/supportforum/topic/slider-dimensions

http://wordpress.org/extend/plugins/wp-fluid-images/

http://wordpress.org/extend/plugins/fitvids-for-wordpress/
http://kevindees.cc/2011/09/using-fitvids-js-with-wordpress-for-responsive-videos/
"unfortunately this is something that you would need to create a callback for with your Ajax call. FitVids only runs when the page is loaded. Anything added to the page with JS will need to be coded for within the theme."
http://stackoverflow.com/questions/8840257/jquery-ajax-handling-continue-responses-success-vs-done
Albums Page I OrigiCine_post_type-album.png
1001 x 790 - 412K
Post edited by sapere_aude on

Comments

  • AirAir
    Posts: 10,970
    Hello

    I don't know if you see any logic in this way too long post but I really don't :-)
    I see million of small questions and doubts, but not real case.

    So I will just explain things shortly about youtube & vimeo. You can upload video in any resolution there. The higher you will upload, then they will provide more versions of your video depending on your users capacities. All the magic to video is done by them(YT & Vimeo), they will send video in resolution that user device will handle or which user will prefer, you don't have any power to force it here. And it is good:-)

    You say somewhere that we give guide lines for images but not for video - and above explanation is why:-)

    All layout decisions are made to give best possible experience to widest number of internet user according to our knowledge.

    I admire your very long post, but next time please ask short and detailed question cause this chaos is just impossible for me to understand what is the case finally. You touch so many aspects that I really don't know are you serious or just want to chat :-) Thanks in advance.

    With regards.
  • Thank you. I'm not intending to make a mess here or drive you crazy :/
    I can't even start to build the site without understanding these details.
    I have hundreds of images and videos. My flaw in this case was analysis paralysis.
    I know what to do now.

    My main question for you is: The 2X image I uploaded (no @2x plugin) here shows how the slider image covers over the menu -- how to limit the image display size? in slider, where? and in bricks (320px setting not working)? It seems that setting these in the theme admin, where that is possible, does not control 2x images or am I making a mistake somewhere? That is why I was concerned about video size.

    I found answers to my other questions about huge images/retina/print and will write about this subject in detail later on my website with links etc. where I can share my research and not make a mess here again.

    BTW: Retina MacBookPro is 1800 x 2880 thus 1500px is not quite enough so I thinking about browser friendly ways to use heavily compressed vector instead (png24/48) since svg and other methods don't work at present.

    All this depends on who you think your site users will be... I am probably an odd case with a MAC heavy media savvy audience with the latest gadgets. Any input is welcome. Thank you Air.
  • AirAir
    Posts: 10,970
    Don't worry about "mess". Previous post was just BIG and I couldn't "grab it" in good way.
    sapere_aude said:
    My main question for you is: The 2X image I uploaded (no @2x plugin) here shows how the slider image covers over the menu -- how to limit the image display size?
    You mean you would like to have image that don't hide under header and footer? Or you mean file size? You have to specify what kind of limit you wish(screen shot highly appreciated)
    sapere_aude said: (320px setting not working)?
    Setting width of brick is just setting "base" width, as all bricks are extended or shrank to fill space(width).
    sapere_aude said: It seems that setting these in the theme admin, where that is possible, does not control 2x images or am I making a mistake somewhere?
    We don't check anywhere what image you upload, we just use what is provided. In albums whatever picture you will upload it will be :
    -used in full size in slider album
    -thumbnail of it will be used in bricks album(thumbnails are made on image upload automatically)

    I see you have bigger expectations about all media in here then we ever imagined while creating theme, and I can even have smaller knowledge in this subject then you:-)

    Hope I still can help you somehow :-)

    With kindly regards.
  • Thank you. I apologize for my ignorance of these matters.
    I have no idea what is possible or what is not.
    Once I understand the structure and terminology that you need I will be more concise.

    Let's start here please, one image insert area at a time:

    In the image I uploaded you will see a red bracket. I uploaded this large bracket image as a test to WordPress with your image slider admin area; it is double the px by px size that you specify (2200px by 1500px instead of 1100px by 750px) .

    In the slider, I do not want this (or any) image (or the words the foot) to be in the area of the top menu area? (transparent bar) or under the transparent bar at the bottom (footer?); can the inserted slider image be contained somehow?

    What do I need to do or set to keep my double (or larger) sized images from doing this?
    Thank you.

    PS/ I did not use the retina plugin for @2x.
  • AirAir
    Posts: 10,970
    Hello again.

    I think you mean this http://support.apollo13.eu/discussion/740/fitting-full-screen-album-view-within-the-layout#Item_4

    Coming in next update :-)

    If again I didn't understand you, then please try explain with real screen shot :-)

    With regards.
  • edited January 2013 Posts: 20
    Thank you, I think I understand better now :)

    To do this needs the CSS (from the post you link here) added with the custom CSS plugin. Then I won't see my large images or videos outside the top/bottom area and using large images will fit inside there.

    One question though, which is correct in general, putting such code in the child theme or using the plugin? I am using the child theme.

    BTW: The upload was a real screenshot from the theme webpage;
    I used FireShot plugin in FireFox to grab it so I am not sure what you are saying exactly.
    Post edited by sapere_aude on
  • AirAir
    Posts: 10,970
    I don't know about what screen shot you talk cause I don't see any nowhere :-)
    EDIT:
    Ehhh, now I see screen shot in your first post, sorry for mistake.

    If you are using child theme, you can use it there, such solution is even better.
    Solution from that linked topic is not perfect, it is just temporary. Today I have finished this part of update, so you will be able to fit slides without any fancy CSS. Still it will take some time to finish other part of update, but I am doing my best ;-)

    With regards.
  • Thank you. No Worries :-) I know what I can make for image sizes now.

    I have many images/videos to process and don't need to work on the site until the update is done. I discovered lossless! jpeg crop/resizer software to keep me busy.

    In this new update are you adding an admin option like kev_deg for grey scale image? That would be good for my uses, but if not I really would like it later as a child theme when you have a chance.

    Best Regards :-)
  • AirAir
    Posts: 10,970
    sapere_aude said: In this new update are you adding an admin option like kev_deg for grey scale image? That would be good for my uses, but if not I really would like it later as a child theme when you have a chance.
    Nope. I wanted to add it in first version but when I saw how big lag images gained(while animating) even in fastest browser(Chrome) I decided to left such effects in users hands.

    With regards.
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!