Support Forum - Topic: Iconbox Retina Image Replacement

Support Forum - Topic: Iconbox Retina Image Replacement http://www.kriesi.at/support/topic/iconbox-retina-image-replacement Support Forum - Topic: Iconbox Retina Image Replacement en-US Sun, 26 May 2013 01:59:27 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99966 Thu, 07 Mar 2013 04:04:13 +0000 Nick 99966@http://www.kriesi.at/support/ Hi, Ahh. I am sorry, thought this was about the main page. Now that we are on the same page, On the recipes page you showed above, the image of the icon itself is in the html which is not as favorable to the media query approach to doing this. Need either a jquery solution or to detect retina via php where the short-code is executed. I looked for some jquery for retina replace ( <a href="https://github.com/leonsmith/retina-replace-js" rel="nofollow">https://github.com/leonsmith/retina-replace-js</a> ) but all i find assumes that both the retina image and the normal image are defined inside css so the classes can be switched. Also there are no distinguishing classes to grab an individual icon, since the code is same for all of them. Here is actually a good solution <pre><code><html> <head> <style type="text/css"> .image_1_5x, .image_2x{ display: none; } @media only screen and (min--moz-device-pixel-ratio: 1.5 ), only screen and (-webkit-min-device-pixel-ratio: 1.5 ), only screen and (min-device-pixel-ratio: 1.5 ), only screen and (-o-min-device-pixel-ratio: 3/2){ .image_1x, .image_2x{ display: none; } .image_1.5x{ display: block; } } @media only screen and (min--moz-device-pixel-ratio: 2 ), only screen and (-webkit-min-device-pixel-ratio: 2 ), only screen and (min-device-pixel-ratio:2 ), only screen and (-o-min-device-pixel-ratio: 2/1){ .image_1x, .image_1_5x{ display: none; } .image_2x{ display: block; } } </style> </head> <body> <img src="kinkakuji.jpg" width="320px" class="image_1x"/> <img src="kinkakuji@1.5x.jpg" width="320px" class="image_1_5x"/> <img src="kinkakuji@2x.jpg" width="320px" class="image_2x"/> </body> </html></code></pre> Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99917 Wed, 06 Mar 2013 22:50:41 +0000 Lindsey 99917@http://www.kriesi.at/support/ Hi Nick, Thank you for your patience with me! :) This is actually the smoothie page that I'm referring to - not on the homepage - : <a href="http://www.toxicfreechallenge.com/recipes/strawberry-festival-smoothie/" rel="nofollow">http://www.toxicfreechallenge.com/recipes/strawberry-festival-smoothie/</a> The icons are coded differently than the home page where I didn't use the iconbox shortcodes. The icons on this page are shortcodes and the span class I see in Google Chrome is "iconbox_icon", not "smoothie". <pre><code>[iconbox title="Fruits:" icon="fruits.png"] <ul> <li>1 teaspoon lemon zest, grated</li> <li>3 cups strawberries</li> </ul> [/iconbox]</code></pre> Just to clarify, are you saying I should replace this shortcode (as well as the other shortcodes) [iconbox title="Fruits:" icon="fruits.png"] on each of my 125 pages with this? <code></code> Thanks for your patience!! - Lindsey Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99864 Wed, 06 Mar 2013 18:49:17 +0000 Nick 99864@http://www.kriesi.at/support/ Hi, Try this <pre><code>#top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits.png") no-repeat scroll 0 0 transparent; display: inline; height: 149px; left: 0; padding-left: 60px; padding-top: 20px; padding-bottom: 10px; width: 48px; } @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { #top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits@2x.png")no-repeat scroll 0 0 transparent; } }</code></pre> and you would call it from your pages like this. h6 is not relevant here. I tested this on your site with google dev tools, and I am seeing the icon. Just make sure you have the retina icon where the url points and change the names for your icons. Iconbox is just a name of a folder , if you like you can change it to foobar, there is no need to get fixated with that name. <pre><code></code></pre> Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99717 Wed, 06 Mar 2013 00:45:53 +0000 Lindsey 99717@http://www.kriesi.at/support/ Thank you, Dude! He wrote back that he decided not to provide support via email, except if it is paid. He also said: "iconbox" seems to be a shortcode of your theme. Not sure if the images (icons) are from you, but if they aren't there are probably shipped with the theme and if they don't provide bigger version, well, you will have to use new ones, and probably to modify your theme code a bit. To which I wrote that I understood not providing unpaid support, as his plugin was free, and I noted that I designed my shortcode iconbox icons and they're in vector format. He replied that if they are in vector formats, I can use SVG versions of them for the website and it will work automatically in Retina. If they are part of the theme, we shouldn't have them in the Media, they should actually be "outside" WordPress, with the @2x generated manually by you. Then in the CSS (device-pixel-ratio: 2), you specify the @2x files. He also said his plugin should cover the posts and all, not the images related to the themes. The themes should handle Retina themselves (since they often provides the icons and main images). I've never added SVG files to CSS although I have added @2x in media queries so I have to figure this next step out. - Lindsey Dude on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99557 Tue, 05 Mar 2013 09:40:19 +0000 Dude 99557@http://www.kriesi.at/support/ Hi! Please report back if the plugin author provided a solution (or not). Best regards, Peter Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99479 Mon, 04 Mar 2013 21:36:24 +0000 Lindsey 99479@http://www.kriesi.at/support/ Thanks for helping, Nick! I tried your suggestion and to no avail. Then realized the .smoothie is actually coded in HTML as a class of the H6 tag, not an iconbox shortcode. I had setup WP Retina 2x when you suggested it previously and it is a wonderful plugin but doesn't show my shortcodes in the dashboard. I have emailed the creator, Jordy Meow to see if he can advise a solution or a reason as to why I don't see the images in the WP Retina 2x dashboard. I will update you as soon as I hear from him. Thanks so much for always kindly helping me! - Lindsey Nick on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99182 Sun, 03 Mar 2013 00:44:35 +0000 Nick 99182@http://www.kriesi.at/support/ Hi, There is a plugin that does that quite easily with shortcodes <a href="http://wordpress.org/extend/plugins/wp-retina-2x/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/</a> Your media query looks alright to me but I don't like how you are targeting , please try this instead as it has the same styling as the smoothie icon on your home page. <pre><code>#top span.smoothie{ background: url("http://www.toxicfreechallenge.com/wp-content/themes/propulsion/images/icons/iconbox/fruits@2x.png") no-repeat scroll 0 0 transparent; display: inline; height: 149px; left: 0; padding-left: 60px; padding-top: 20px; padding-bottom: 10px; width: 48px; }</code></pre> Thanks, Nick Lindsey on "Iconbox Retina Image Replacement" http://www.kriesi.at/support/topic/iconbox-retina-image-replacement#post-99068 Fri, 01 Mar 2013 20:30:00 +0000 Lindsey 99068@http://www.kriesi.at/support/ Hi Team! I'm trying to target an icon box to replace it's image with retina in my media query. I've tried targeting an icon box a few different ways: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { .iconbox_icon.fruits{ background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox.iconbox_icon.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox.iconbox_icon span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } .iconbox_icon span.fruits { background:url("../images/icons/iconbox/fruits@2x.png") no-repeat; background-size: 50%; padding-top: 20px !important; } } I have even tried .iconbox span.fruits[icon="fruits.png"] (just an idea) but to no avail. I'd really like to have retina for each icon box, as I have several icons, not just a fruits icon but several others. How do you suggest to target these? Thank you kindly!! - Lindsey