Premain custom field difficulties

[PrintMagic]

I am presently working on a development website for a client – http://jwspromotions.com/californiagardenproject2/.  You can see that the WOW Slider short code is working perfectly on the home page in the premain custom field – it even sizes down responsively on cell phones.  Up until a few minutes ago, the images at I had at the top of each of the other pages in the premain custom fields was displaying with no problem.  I just upgraded the test site to the latest version of Weaver II Pro 2.2.1 and now all the images in the premain custom fields are not displaying (example code from one of the about us page <img src=”http://jwspromotions.com/californiagardenproject2/wp-content/uploads/2014/01/Azalea.jpg&#8221; alt=”header image” /> ) , with the exception of the WOW Slider short code in the premain customer field on the home page ( [wowslider id=”2″] ).

The original reason I was contacting you was that these images in the premain fields, when they were displaying, would not resize down when viewed on a phone.  Instead they displayed as way too big, causing the visitor to have to scroll sideways to view the entire emige.

Ideally, I need the images in the premain custom fields of the various pages to 1) display and 2) when they do display they need to resize themselves for proper viewing on small mobile devices.  I am actually preparing to deploy this site and am thinking of using the Wever Extreme theme.  Would this them resolve these two issues and allow me to recreate this website with the look it has right now?

[scrambler]

Right now you page only has the slider in premain and that appear to work fine, so I cant comment on the image issue you are reporting.

We need to see the page showing the problem to help

For images placed in the premain area to scale when the browser becomes smaller, they need to have the CSS property max-width:100%.

If you have just a couple you can add that to the image tag style attribute like below

<img style=”max-width:100%;” src=……/>

or if you have a lot of images, you can add a global rule (below)  in the Premain Area BG CSS+ box

img {max-width:100%;}

[Weaver]

And seriously, if you are building a new site, you really should switch to Weaver Xtreme.

[PrintMagic]

Scramber and Weaver thank you for your comments.

Firs to Scrambler:  You mention that I need to put images in place for the other pages so you see them.  See my original post, the images are actually already in the premain using the img tag as you suggested <img src=”myimage.jpg”…>  They were in the premain when I upgraded the Weaver II Pro them to the latest version.  For some reason they won’t display, which is the reason that I posted my comment.  I can’t explain in.  The WOW Slider short code has no problem displaying in the premain for the home page, but a simple image tag can’t be seen.  I can’t explain it.  Each main category menu item and their sub page have different coordinating images or I would use the global premain code.  Yeah I already know about that handy trick inside Weaver II Pro.  I tried setting the width=”100px” in one of the image that should be displaying in the premain for the About Us page, but that didn’t work.

Now to Weaver: I would very much like to move to Weaver Xtreme – but not until I put the website in place.  I am working on a very tight time constraint and need to get this website working as is so I can get paid and move the site to the customer’s host server.  I don’t have the tie to put the entire website back together with a new theme – unless you have some tricks up your sleeve which allow me to switch themes mid-stream without breaking the entire site.  I really, really, really, need the images to display in the premain code on each of the remainder of the pages in Weaver II Pro so I can complete this project.

Are there any suggestion at all as to why the images would not display now, when they were displaying fine before I updated the Weaver II Pro theme.  Any suggestions?  I’m desperate here.  My client is climbing my tree wanting this website done now – NOW!!   I really didn’t expect for Weaver II Pro to let me down like this.  Please, please, please help me.  Please tell me you have some answers.

Thanks.  I am waiting by my computer looking for words of wisdom.

[PrintMagic]

Scrambler:  Sorry, I meant to say that I applied the style=”maxwidth: 100%;” to the img tag in the Premain on the About Us web page but that didn’t work.

[scrambler]

You need to copy paste here the entirety of the exact code that you put into the premain code box, because there are no images HTML in that area, only the slider.

So go to Advanced options > HTML Insertion, copy the content of the premain code box, and paste it here

[PrintMagic]

Scrambler –  are brilliant.  I have been repeating myself, knowing that I had not code in the Advanced options > HTML Inserstion premain code box.  What I passed over was that tiny check box that directed the theme to turn off the premain code on all pages EXCEPT the home page.

When I unchecked that nasty little box everything worked just fine.  This is what I like to call an id-10-T error >>> an IDIOT ERROR.

Thanks Scrmbler for guiding me gently in the right direction.

[scrambler]

We have all been there  🙂

[PrintMagic]

I hate to beat a dead horse, now for the real issue which I am having difficulty with.  Now that I figured out why the images were not displaying, there is still one more issue with these images.  Notice that when you shrink the browser window, simulating a phone, the slider on the home page becomes responsive and shrinks down proportionally.

However, the images in the premain custom field on the rest of the pages do not shrink down responsively.  Is there a setting somewhere that will cause these images to shrink down, or possibly a plugin.

I promise.  Once this issue is tackled I won’t bother you any longer.

Thanks,

[scrambler]

You may need to clear your cache plugin if you use one, but when I go to

http://jwspromotions.com/californiagardenproject2/

There is nothing else than the slider in the premain area. So I cant help until the images are in there

[PrintMagic]

I have stated several times now the slider is only on the home page, and only coded on the home page itself.  There are not images or the slider coded in the Advanced Options >> HTML Insertion Premain gox box withing the Weaver II theme admin settings.  The home page has the slider in the premain custom field box at the bottom of the page.  Each additional page has an image coded in the premain custom field box at the bottom of each page.

The Advanced Options >> HTML Insertion Premain box is totally empty in the Weaver II theme.  Get you eyes off the home page and look at one of the other pages – shrink the browser window and you will see that the static images are not responsive and won’t shink down.  They don’t shrink down on smart phones either.  Why?  That is my question.  Why does the slider in the premain code field, which is only on the home page responsive, but the static images images, which are in the premain code field on all the other pages are not responsive?

[scrambler]

Well you need to be specific with your links…

http://jwspromotions.com/californiagardenproject2/about-us/
has an image tag with the style=”max-width:100%;”  and the image scales fine

http://jwspromotions.com/californiagardenproject2/california-heritage/
Has an image tag that does NOT have the style max-width and therefore does not scale.

So, as I said from the beginning, you need to add the style=”max-width:100%” to every image tag you place in that area.

<img style=”max-width:100%;” src=……/>

[PrintMagic]

Now I get it.  I have to put the style=”max-width: 100%;” in the img tag of each image.

Thanks Scrambler – I know I have been a pain in the a$$.  I try not to be.

You have been a great help.

[Author]

Posts