Tagged: ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20808

    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(“.. (Email address hidden if logged out) “) no-repeat; background-size: 50%; padding-top: 20px !important; }

    .iconbox span.fruits { background:url(“.. (Email address hidden if logged out) “) no-repeat; background-size: 50%; padding-top: 20px !important; }

    .iconbox.iconbox_icon.fruits { background:url(“.. (Email address hidden if logged out) “) no-repeat; background-size: 50%; padding-top: 20px !important; }

    .iconbox.iconbox_icon span.fruits { background:url(“.. (Email address hidden if logged out) “) no-repeat; background-size: 50%; padding-top: 20px !important; }

    .iconbox span.fruits { background:url(“.. (Email address hidden if logged out) “) no-repeat; background-size: 50%; padding-top: 20px !important; }

    .iconbox_icon span.fruits { background:url(“.. (Email address hidden if logged out) “) 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

    #109129

    Hi,

    There is a plugin that does that quite easily with shortcodes http://wordpress.org/extend/plugins/wp-retina-2x/

    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.

    #top span.smoothie{
    background: url("http: (Email address hidden if logged out) ") no-repeat scroll 0 0 transparent;
    display: inline;
    height: 149px;
    left: 0;
    padding-left: 60px;
    padding-top: 20px;
    padding-bottom: 10px;
    width: 48px;
    }

    Thanks,

    Nick

    #109130

    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

    #109131

    Hi!

    Please report back if the plugin author provided a solution (or not).

    Best regards,

    Peter

    #109132

    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

    #109133

    Hi,

    Try this

    #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: (Email address hidden if logged out) ")no-repeat scroll 0 0 transparent;
    }
    }

    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.

    <span class="smoothie"></span>

    Thanks,

    Nick

    #109134

    Hi Nick,

    Thank you for your patience with me! :)

    This is actually the smoothie page that I’m referring to – not on the homepage – :

    http://www.toxicfreechallenge.com/recipes/strawberry-festival-smoothie/

    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”.

    [iconbox title="Fruits:" icon="fruits.png"]

    <ul>
    <li>1 teaspoon lemon zest, grated</li>
    <li>3 cups strawberries</li>
    </ul>
    [/iconbox]

    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?

    <span class="smoothie"></span>

    Thanks for your patience!!

    - Lindsey

    #109135

    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 ( https://github.com/leonsmith/retina-replace-js ) 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

    <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=" (Email address hidden if logged out) " width="320px" class="image_1_5x"/>
    <img src=" (Email address hidden if logged out) " width="320px" class="image_2x"/>
    </body>
    </html>

    Thanks,

    Nick

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Iconbox Retina Image Replacement’ is closed to new replies.