Jump to content

Archived

This topic is now archived and is closed to further replies.

bellasmom

Features- Reduce Width

Recommended Posts

bellasmom    0
bellasmom
I have searched through the forums and could not find an answer to this, so any help would be appreciated. Thank you in advance.
 
I am using the Features to display several images.The problem I have is there is too much space between the images and the title. Is there any way to reduce this?
 
I manually reduced the image to 200 x 300 so everything would all be the same size. I uploaded the image through the media upload and linked it back to another section on my site with the full size image. I did not want to use the full size image because it takes too long to load. I had this issue when I used video and had too many complaints and therefore opted to just use images.
 
Now then, the images are loading ok but there is a tremendous amount of space that is empty. I have centered the images but would like to make everything compact. Is there anything that I can do to condense the width of the Features? Please advise. Thank you! 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi,

 

I apologise, but I am not entirely sure what you're referring to. Therefore, can you provide a link to the site so we can see the problem first hand.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bellasmom    0
bellasmom

Hi, Danny,

Thank you for responding. I sent the link in a private message. Thank you!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

The Feature slider isn't supposed to display the image like that. Therefore, can you provide a screenshot of the Features settings you have used and also, what size image are you uploading ? As they look to small, you will want to increase their size, which will resolve your issue.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bellasmom    0
bellasmom

Hi, Danny!

Sure. The images are all the same size: 200 x 300. I will pm you the screen shot of the settings.

Thank you for your help!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

I have replied to the PM, but I will reply her from now on. The issue is as far as I can tell your image size, then simply need to be larger. However, if you can reply here and provide a screenshot of your actual feature slider, not the slider settings, but the settings of one of your sliders.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bellasmom    0
bellasmom

Hi, Danny,

I replied to your message and still have yet to hear anything back from you. It has been a couple of days. Can you please get back to me or if you are not interested in helping me, just let me know. Thank you! 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Apologies for the delay in responding.  From what you've shared, it appears that your images are too small for the feature slider.  

 

Your images have dimensions of 300x200 and your feature slider is 1070x200.  The way that images work is that if you try to use an image that is smaller than the size of your slider, they will expand in a pixellated way.  Those images will work fantastic on a mobile screen but the larger your screen size, the more distorted they will become.  

 

Image optimization is a huge concern and I totally understand your desire to want to optimize page loading.  There are a few ways you can do that.  

 

1. Don't use PNG's.  They're larger and contain more detail than JPG's.  

2. Use an image optimizer like jpegMini or kraken.io (both have free options)

3. Crop the images to the exact dimensions of the max size of your slider

 

If you use all three of those, it should help reduce the size of your images.  

If you want your images to look amazing, once you've optimized them above there's one more step you should employ to maximize the look.

 

Remove the HTML code you have copied and pasted from a WordPress post and upload your image using this option instead - https://cloudup.com/cCRCxjW_jpp

 

It's a best practice to upload them or find them in the library rather than linking to them the way you have.  I hope this helps you get going and if you have any more questions or need more help getting this going, please let me know.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

June, if you provide a concept image of what it is you're trying to do, I will try and do it on a test site and then provide the necessary steps for you. It is likely, that you will need to remove the code you have added to add your image to the slider and simply upload an image. However, if you provide an image showing me exactly what you want to achieve, I can try and assist you further.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
bellasmom    0
bellasmom

Thanks for your suggestion. I prefer to use the tools that I have, if possible, even though these two offer free trials. I use Adobe Fireworks and found that in the Optimize and Align settings, you can compress the images there. I am going to see how this works and will get back to you. Hopefully, this will do the trick! 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi June,

 

I've read your two messages to me and firstly, the features slider in PageLines Framework doesn't have a bug in it, which is causing your problem. Your problem is caused by you using HTML to add your images to the feature slider, this HTML code includes a width, height code which is sizing the image(s) to 300x300 pixels if I remember correctly. That is the issue right there.

It is my understanding you want the images to either be full width of the slider or reduce the space between the image and the text. You can make the feature slider fill the whole are with the image, if you use the upload option instead or using HTML.

 

However, if you want to insert the image(s) to your slider via HTML, you're free to do so, but then you're going to need to use custom CSS to reposition them the way like.

 

Regarding the RSS/Quotes page, I don't believe this is possible as the quotes page appears to be a static html page and isn't powered by WordPress. Therefore, there is no association to your WordPress installation. To use these images to populate your feature slider isn't possible out of the box and would likely require extensive custom code and a complete rewrite of the features section.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
    • jvheintze
      By jvheintze+
      I just tried to figure out how to use Lax in combination with Post Thumbnails the following way: instead of showing the Featured Image on top of the content section I would like to have a Lax section above the content which loads for each post the featured image. To do so it seems there should be some kind of word press hook support necessary (not ready yet)? Or did I miss something?
    • richardjacruz
      By richardjacruz+
      I'm sorry to be a bother. I tried looking this up through the forum and then via Google, but  couldn't find the answer. 
      I want to add "alt" text to the images found in the RevSlider and the QuickCarousel at www.stevensoncrane.com. I added alt text in the media section of WP, and I refresh the page and published, but I still don't see content in the "alt=" part of any image HTML. 
      Is there a way of doing this with these two sections?
      Thanks,
      Rich
×