By using Elementorforum.com’s services you agree to our Cookies Use and Data Transfer outside the EU.
We and our partners operate globally and use cookies, including for analytics, personalisation, ads and Newsletters.

  • Join the Best Unofficial Elementor Support forum

    Provide or get advice on everything Elementor and Wordpress, ask questions, gain confirmation or just become apart of a friendly, like minded community who love Wordpress and Elementor


    Join us!
elementor official

Question Show / hide images for logged in or logged out user

simonhood

simonhood

New Member
Hi Everyone,

I'm creating a children's story website and I want to show greyscale images to logged out users (with a little panel below each image saying eg "sign up to view colour images") and colour images to members. All users can see all the written content within each stories, the only difference is the colour of the image (and the panel). I'm seeking the simplest implementation and would really appreciate your suggestions. Happy to pay for additional plugins (ie Ultimate Member Pro) if this is the simplest option.

Many thanks in advance,
Simon
 
elementor official
simonhood

simonhood

New Member
First thoughts:

A) Create identical pages with differing images.

SO a logged in user see the page with the colour images.

- It's very easy to clone a page in wordpress with a simple plugin.
- Not sure how you might do this without using a plugin user privilege plugin like "adminize", which tailors user types the pages they see.

B) The other option woudl be CSS that might greyscale a colour image.

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

How you get that to activate for logged in users so it's 0% I am not sure, you may need some code here, custom code. I am not a coder.
Thanks Agemo.
Really like option B as it would mean only one image and faster page load. I considered option A already, but I'd like to avoid duplicate content where possible (for better admin and SEO),hence trying to find a more codey solution :)
 
elementor official
A

Agemo

New Member
First thoughts:

A) Create identical pages with differing images.

SO a logged in user see the page with the colour images.

- It's very easy to clone a page in wordpress with a simple plugin.
- Not sure how you might do this without using a plugin user privilege plugin like "adminize", which tailors user types the pages they see.

B) The other option woudl be CSS that might greyscale a colour image.

img {
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}

How you get that to activate for logged in users so it's 0% I am not sure, you may need some code here, custom code. I am not a coder.
 
elementor official
lwoodsusa

lwoodsusa

New Member
Here you go....and this is assuming that you are using an Image element.
You need to add the code at the bottom of this comment to your functions.php file for the theme that you are using. Hopefully you are using a child theme so you can put this into the child theme's function.php. Another option for storing the code would be to use the Code Snippet plugin.

Under the Advanced setting for the Image, for CSS Classes, add 'test-image'.

Now, drag a "ShortCode" element and place it right above the image.

Add the shortcode '[fix_image]' in the Shortcode element textbox.

Done!

Here is the code to add to functions.php:

add_shortcode( 'fix_image', 'fix_image_function' );
function fix_image_function( $atts ){
if( is_user_logged_in() ){
return ''; // These are two single quotes
} else {
return '<style>.test-image { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */ filter: grayscale(100%);}</style>';
}
}

Thanks to "Agemo" for furnishing the grayscale css.
 
elementor official
simonhood

simonhood

New Member
Absolutely brilliant!! Thank you so much :D
Now I just need to work out the best way to log registered users in. Currently I'm using a global header that has a "Join" button on it, but I need to ensure that this button is not visible to logged in users and, ideally, shows something like "Hi,[first name]" instead. Any pointers would be fantastic. Thanks again!
 
elementor official

Latest posts

Other Elementor Resources

elementor official
elementor official
Top