[WP Quiz Pro] Flip Card Featured Image Not showing up

[fruitsinsuits.shop]

Hi,

I'm using the free version of WP Quiz, I'm planning on buying pro but I want to make sure it works properly before I spend the money.  The problem is that the "featured image" does not show up when I use the short code for the quiz on my website.  However, when I simply preview the quiz, it does show up.  Why is this?

Also, the featured image is scaling dynamically with the resolution past 100% of its resolution.  There is a setting to stop this for all the other images, which I've done.  But for some reason it doesn't affect the featured image. 

Its been a great plugin so far, looking forward to using the pro version when I'm sure it will work for me. 

 

Here's the additional info copied over:

--- Environment ---
Server Info:               Apache
PHP Version:               7.2.16
PHP Post Max Size:         65536
PHP Max Execution Time:    30
PHP Max Input Vars:        1000
Curl Version:              7.64.0, OpenSSL/1.0.2r
Max Upload Size:           67108864
Mysql Version:             5.7.23
Default Timezone:          UTC
Fsockopen Or Curl Enabled: Yes
Domdocument Enabled:       Yes
Simplexml Enabled:         Yes
Gd Extension:              Yes
Imagick Extension:         Yes
Allow Url Fopen:           Yes
Allow Url Include:         No

--- WordPress ---
Home Url:          https://fruitsinsuits.com
Site Url:          https://fruitsinsuits.com
Secure Connection: Yes
Hide Errors:       Yes
WP Version:        5.1.1
WP Multisite:      No
WP Memory Limit:   262144
WP Debug Mode:     No
WP Cron:           Yes
Language:          en_US

--- Plugins ---
0:  Enable Media Replace v3.2.9 https://shortpixel.com
1:  Google Analytics for WordPress by MonsterInsights v7.4.2 https://www.monsterinsights.com/?utm_source=liteplugin&utm_medium=pluginheader&utm_campaign=authoruri&utm_content=7%2E0%2E0
2:  Insert Headers and Footers v1.4.3 http://www.wpbeginner.com/
3:  Jetpack by WordPress.com v7.1.1 https://jetpack.com
4:  Mailchimp for WooCommerce v2.1.14 https://mailchimp.com
5:  Mesmerize Companion v1.6.110 Horea Radu
6:  MOJO Marketplace v1.4.4 http://mikehansen.me?utm_campaign=plugin&utm_source=mojo_wp_plugin
7:  OnionBuzz v1.2.4 https://looks-awesome.com/
8:  WP Quiz v2.0.1 https://mythemeshop.com/
9:  WPForms Lite v1.5.1.3 https://wpforms.com
10: WP Shopify v1.3.4 https://wpshop.io

--- Theme ---
Name:           OceanWP
Version:        1.6.4
Author Url:     https://oceanwp.org/about-me/
Is Child Theme: No

--- WP Quiz ---
WP Quiz Version:       No
Selected Mail Service: None
 

[Jitendraa]

Hello,

You can use this CSS to your Custom CSS also for that:

.wq-question-image img {
    display: block;
    margin: auto;
}

Hope that helps.

Thank you.

[Jitendraa]

Hello There,

Thank you for contacting MyThemeShop and sorry for any inconvenience that might have been caused due to that.

We would love to sort that for you. But, for that, please follow the steps mentioned in this tutorial:
https://community.mythemeshop.com/tutorials/article/53-confirming-a-theme-conflict/

If the problem is not a bug with our product and you are still looking for help, please opt for our support plan, which costs just $9/year and gives you access to our premium support:
Premium Support For Just $9/year

Once purchased, please open a new support ticket by following this tutorial:
https://community.mythemeshop.com/topic/19872-read-first-support-policy-for-free-themes/

We handle all our theme/plugin related help through our support ticket system.

One of our moderators will definitely help you. You do not need to register separately for the forums, you can just log in to your member account on MyThemeShop, and you will be logged in automatically in the support forums. Or, you can log in with your MyThemeShop username and password on the support forum too.

Also, when you purchase the Premium version of the plugin, we'll help you with the $9 discount you are paying now.

Looking forward to helping you.

[truongwp]

Hello,

When you preview a quiz, it uses your theme template, so it will show thumbnail in most cases.

The quiz shortcode template doesn't show thumbnail, but you can override that template.

To prevent images from scaling, you can use custom CSS code. Please give your quiz URL, we will check and give you the code.

Thank you.

[fruitsinsuits.shop]

Thanks for the response!

You can find the quiz here: https://fruitsinsuits.com/play/play-fis-flip-cards/

 

[truongwp]

Hello,

I don't see your images are scaled. Please check again.

Thank you.

[fruitsinsuits.shop]

That wasn't the issue.  All the flip card images have always been fine, that's not what the original post was about.  It was that the featured image does not show up when I use the short code on my website.  I can only see the featured image when I use the preview quiz option, and when I see it previewed it is scaled beyond 100%.   BUT before we worry about the scale of the image it needs to show up when I use the short code.  Feel free to read the original post as well.  Again, it was never about the flip card scale, just about the featured image.

[truongwp]

Hello,

Please copy this file "wp-quiz-pro/templates/global/quiz-open.php" to "your-child-theme/wp-quiz/global/quiz-open.php".

After that, please share us your admin account in the Sensitive data area.

Thank you.

[fruitsinsuits.shop]

Sorry but I have no idea how to copy "wp-quiz-pro/templates/global/quiz-open.php" to "your-child-theme/wp-quiz/global/quiz-open.php".  Also, I gotta be honest, I'm not sure what you mean by share my admin account.  You mean share my username for my theme shop?

Also, I created a new multiple choice quiz that you can see here: https://fruitsinsuits.com/play/play-fis-multiple-choice/.  It also does not show the featured image (my original problem with the other quiz) but in addition to that the images do not seem to have an option to make them not scale over 100%.  I will need that CSS code after all for this quiz.  Thanks!

[truongwp]

Hello,

Please share your login details in the "Sensitive Data" section by clicking the Add button on the top and bottom right-hand side on this ticket and follow the instructions shown in the screenshot below:

Looking forward to helping you. Thank you.

[truongwp]

For CSS code, please try using this:

.wq-question-image img { width: auto; }

Thank you.

[fruitsinsuits.shop]

Thanks for the CSS code!  Is there a field I can enter it in?  Other products I've used have an additional CSS field but I can't find it on WP quiz.

As far as the original problem goes, I'm not really comfortable providing my login information at this time, even if it is only viewable by mythemeshop admin.  I have two workarounds at the moment: one is to simply link to the quiz its self, rather than to a page with it on it.  The other workaround is to add the image manually to the webpage with the quiz.  Basically the quiz seems to work fine if I'm not using the shortcode within a webpage.  One final question on the original problem:  if/when I upgrade to the pro version of the quiz, do you think there is a chance that the upgrade will solve the problem?

Thanks!

[truongwp]

Hello,

Please list all features you want. We will consider adding them to future versions.

Thank you.

[fruitsinsuits.shop]

Hey were you going to answer my questions in the previous post?

Mainly what I need answered is:

Where can I enter the CSS code you sent?

 

[Jitendraa]

Hello,

You need to add that to your Theme's Custom CSS area of WordPress's Additional CS area under Appearance > Customize.

Thank you.

[fruitsinsuits.shop]

Thanks for the clarification on where to put the CSS.  So I’m also having a problem with the answer images in the multiple choice version of the quiz scaling beyond 100% as well.   How would I go about fixing that?  I tried just adding:

.wq-answer-image img { width: auto; }

but turns out that class identifier doesn’t exist.  Hopefully its as simple as you telling me the correct class identifier for the answer images in a multiple choice trivia quiz type.

[Mili]

Hi,

Send us a link to where that issue appears please.

Thanks

[fruitsinsuits.shop]

Sure thing! Here it is:

https://fruitsinsuits.com/kids/

So the multiple choice answers over scale past 100% so you can see pixelation.  I'd like to avoid that.  I could make the page width smaller but I want the images to never scale past 100 at all resolutions.  Thanks in advance for the help!

[Jitendraa]

Hello,

Can you please share a video of that? We can not find any such issue or replicate that.

Looking forward to helping you.

Thank you.

[fruitsinsuits.shop]

No need for a video.  Earlier in this thread I was provided with a little piece of CSS to stop the question image from scaling over 100%.  It is as follows:

.wq-question-image img { width: auto; }

That worked great!

All I need is a similar bit of CSS that stops the answer images from scaling over 100% as well.  The answers should not ever get bigger than 200 pixels across.  That’s all.  So I was guessing it would be something like:

.wq-answer-image img { width: auto; }

So no need for a video.  You can open the link, https://fruitsinsuits.com/kids, and see for yourself that the answer images are filling the width of the page.  I’m hoping to make them not do that.  It depends on the width you have your browser at.  If you make your browser very wide then the problem becomes very obvious.

Does that make sense now?

[Jitendraa]

Hello,

You can use the below CSS which will help you:

.wq_answerImgCtr .attachment-full.size-full {
    max-width: 200px;
    margin: auto;
    display: block;
}

Hope that helps.

Thank you.

[fruitsinsuits.shop]

That's definitely a step in the right direction!  The images already look so much better!  Is it possible to have the box that contains the images to not over scale as well?  So basically the grey box that contains the image and the word would not scale over 200 width at any resolution.  Part of what I'm looking for is that the answer images remain underneath the question image.  I wish I could include some screen shots but I'm not sure how... hopefully what I said makes sense.  Thanks again!

[Jitendraa]

Hello,

You need to add this CSS to your Custom CSS also for adjusting that:

.wq-answers.wq_answersWrapper > .row {
    max-width: 700px;
    margin: 0 auto 20px;
}

Hope that helps.

Thank you.

[fruitsinsuits.shop]

Yes that's it!  Thank you!  It is so much better now!

There's just one last little thing.  Now the answersWrapper is centered, but the question image is on the left.  Is it possible to center the question image as well?  If you look at fruitsinsuits.com/kids with a wide browser it will be obvious what I mean.

[Jitendraa]

Hello,

You can use this CSS to your Custom CSS also for that:

.wq-question-image img {
    display: block;
    margin: auto;
}

Hope that helps.

Thank you.

[fruitsinsuits.shop]

Yes that helped too!  Thank you!!!