{"id":9028,"date":"2015-01-01T17:58:31","date_gmt":"2015-01-01T22:58:31","guid":{"rendered":"http:\/\/www.jbaker.info\/?p=7189"},"modified":"2015-01-01T17:58:31","modified_gmt":"2015-01-01T22:58:31","slug":"working-with-aspect-ratio-and-different-sized-images-2","status":"publish","type":"post","link":"https:\/\/www.jbaker.info\/demo05\/working-with-aspect-ratio-and-different-sized-images-2\/","title":{"rendered":"Working With Aspect Ratio and Different Sized Images"},"content":{"rendered":"<p>The EZC Multi Caption Slider works best when it is displaying images that are all the same size or have the same aspect ratio (width\/height).<\/p>\n<p>Here are three images uploaded using the built in WordPress Media library. They are three different sizes, but the aspect ratio is the same for all of them.<\/p>\n<div class=\"xp_clear\"><\/div>\nActual size 300px wide X 100px high. (Aspect ratio = 3.0)\n<div class=\"xp_clear\"><\/div>\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/2012\/10\/little_monkey.jpg\" alt=\"Alt text: little_monkey\" width=\"300\" height=\"100\" class=\"alignleft size-full wp-image-193 border1\" \/>\n<div class=\"xp_clear\"><\/div><\/p>\n<p>Actual size 450px wide X 150px high. (Aspect ratio = 3.0)\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/tiger_450x150.jpg\" alt=\"tiger_450x150\" width=\"450\" height=\"150\" class=\"alignleft size-full wp-image-223 border1\" \/>\n<div class=\"xp_clear\"><\/div><\/p>\n<p>Actual size 600px wide X 200px high. (Aspect ratio = 3.0)\n<img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/2013\/01\/elephant_large.jpg\" alt=\"Alt text for elephant_large\" width=\"600\" height=\"200\" class=\"size-full wp-image-201 border1\" \/>\n<div class=\"xp_clear\"><\/div><\/p>\n<p>The slider plugin automatically fills the area you allow for it and sizes the images to fit. Due to the fact that these three images are proportionally the same size, they can be combined in the same set of images for the slider.<\/p>\n<div id=\"slider_multi_pause_time\" style=\"display: none;\">6000<\/div><div id=\"slider_plugin_url\" style=\"display: none;\">https:\/\/www.jbaker.info\/demo05\/wp-content\/plugins\/!slider_multi_caption<\/div><div class=\"theme-multi-caption\" style=\"margin: 8px 0px 20px 0px; \"><div id=\"slider_multi_cap\" class=\"nivoSlider\"><img decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/2012\/10\/little_monkey.jpg\" alt=\"\" class=\"xpNivoSlider\" title=\"#htmlcaption1\" \/><img decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/tiger_450x150.jpg\" alt=\"\" class=\"xpNivoSlider\" title=\"#htmlcaption2\" \/><img decoding=\"async\" src=\"http:\/\/www.jbaker.info\/demo04\/wp-content\/uploads\/2013\/01\/elephant_large.jpg\" alt=\"\" class=\"xpNivoSlider\" title=\"#htmlcaption3\" \/><\/div><div id=\"htmlcaption1\" class=\"nivo-html-caption\"><div class=\"relative_div_inside_nivo_caption\" ><div class=\"color_wrap\" style=\"background-color: rgba(18,86,135, 0.85); width: 100%; position:absolute; bottom:20%;\"><h4 style=\"color: #ffffff; font-size: 24px; \">Small original image (300px X 100px)<\/h4><p class='link_note' style='font-size:13px'>This size is too small for showing a quality image in the slider.&nbsp;&nbsp;<\/p><\/div><\/div><\/div><div id=\"htmlcaption2\" class=\"nivo-html-caption\"><div class=\"relative_div_inside_nivo_caption\" ><div class=\"color_wrap\" style=\"background-color: rgba(18,135,43, 0.85); width: 100%; position:absolute; bottom:20%;\"><h4 style=\"color: #ffffff; font-size: 24px; \">Medium original image (450px X 150px)<\/h4><p class='no_link_note'><\/p><\/div><\/div><\/div><div id=\"htmlcaption3\" class=\"nivo-html-caption\"><div class=\"relative_div_inside_nivo_caption\" ><div class=\"color_wrap\" style=\"background-color: rgba(0,0,0, 0.85); width: 100%; position:absolute; bottom:20%;\"><h4 style=\"color: #ffffff; font-size: 24px; \">Larger original image (600px X 200px)<\/h4><p class='no_link_note'><\/p><\/div><\/div><\/div><div id=\"pause_play\"><img decoding=\"async\" id=\"pp_img\" src=\"https:\/\/www.jbaker.info\/demo05\/wp-content\/plugins\/!slider_multi_caption\/nivo\/img\/pause1.png\"><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The EZC Multi Caption Slider works best when it is displaying images that are all the same size or have the same aspect ratio (width\/height). Here are three images uploaded using the built in WordPress Media library. They are three different sizes, but the aspect ratio is the same for all of them. Actual size&#8230;  <a href=\"https:\/\/www.jbaker.info\/demo05\/working-with-aspect-ratio-and-different-sized-images-2\/\" class=\"more-link\" title=\"Read Working With Aspect Ratio and Different Sized Images\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":7209,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16,3],"tags":[],"class_list":["post-9028","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-super-list-posts","category-unvetted"],"_links":{"self":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts\/9028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/comments?post=9028"}],"version-history":[{"count":0,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/posts\/9028\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/media\/7209"}],"wp:attachment":[{"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/media?parent=9028"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/categories?post=9028"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jbaker.info\/demo05\/wp-json\/wp\/v2\/tags?post=9028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}