Jump to content


Photo
- - - - -

Features- Reduce Width

features images

  • Please log in to reply
10 replies to this topic

#1 bellasmom

bellasmom

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 07 August 2014 - 12:01 AM

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! 

Attached Files



#2 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 08 August 2014 - 10:44 AM

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.



#3 bellasmom

bellasmom

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 08 August 2014 - 03:01 PM

Hi, Danny,

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



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 August 2014 - 09:19 AM

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.



#5 bellasmom

bellasmom

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 12 August 2014 - 02:46 PM

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!



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 13 August 2014 - 11:03 AM

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.



#7 bellasmom

bellasmom

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 19 August 2014 - 10:48 AM

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! 



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 19 August 2014 - 11:34 AM

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 - 

Please Login or Register to see this Hidden Content

 

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.



#9 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 20 August 2014 - 10:17 AM

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.



#10 bellasmom

bellasmom

    Member

  • Members
  • 20 posts
  • Country: Country Flag

Posted 08 September 2014 - 02:17 PM

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! 



#11 Danny

Danny

    Is Awesome!

  • Moderators
  • 17977 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 09 September 2014 - 09:19 AM

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.







Also tagged with one or more of these keywords: features, images