Jump to content


Photo
Filtering

Filtering Section - Featured images not showing

Featured Images

Best Answer ellenmva , 13 September 2013 - 04:25 PM

Hi Jan,

 

We can make the More a button by adding a class to it. We are going to do that in the DMS Toolbar --> Custom Code --> Custom Scripts by adding this code:

 
<script>
jQuery(document).ready(function(){
			
   jQuery('.section-filtering .item-excerpt a').addClass('btn');		
});		
</script>

That is also going to put the ... in the button though too. I need to add a class to the More phrase so that doesn't happen. But first, let me know if that code worked in the Custom Scripts box.

 

Ellen

Go to the full post


  • Please log in to reply
14 replies to this topic

#1 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 10 September 2013 - 07:42 PM

Hello, I am putting together my first DMS site, replicating one I'd built with Framework. Most things work well, some new features are brilliant! Thank you for porting the Filtering section to DMS - with its grace and filtering functionality it is always a delight and I couldn't do without it! It seems to work well, but for some reason does not display the posts' featured images - or any images at all (I tried to add an alternative default in the "Extra Image Options" and removed the featured images, without luck).

 

Unfortunately the site is on localhost as I am just learning to work with DMS, so I cannot post a link that may show you the code. But could there have been something obvious I may have overlooked? Have you come across this before, or is it just me? I can't find any settings that would need to be switched on for the featured image (of course I have "Show Image On Top" selected). And I'd be grateful for a tip.

 

Yours faithfully, Jan.

 

 



#2 ellenmva

ellenmva

    Advocate

  • Members

  • 256 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 11 September 2013 - 01:12 AM

Hi Jan,

It is hard to debug without seeing your screen. Does Filtering work otherwise, you have the filtering terms and then the posts? Is it just the images not displaying?

Also, it is the Filtering Plugin you have installed, not the section from the old Framework?

Lastly, can you open Chrome Developer Tools -> Console and see if there are any errors. If so take a screenshot so I can see.

Thanks. Ellen

#3 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 11 September 2013 - 05:30 AM

Dear Sue, thank you for getting back to me. I believe it is the Filtering Plugin that I have installed and it is working fine otherwise, segueing away nicely through the categories. But your swift reply has encouraged me to put DMS on a live site. This I will do in the next days, if the missing-image-problem persists I'll report back. In the meantime good luck in your work and once again thank you for writing Filtering in the first place. I always loved Isotope but in the entire vast Wordpress plugin repository it seems to be like an eagle's feather... Yours faithfully, Jan.


  • Jenny likes this

#4 Jenny

Jenny

    Owned by PageLines

  • Unicorn Store Dev

  • 2917 posts
  • LocationWV
  • Country: Country Flag

Posted 11 September 2013 - 04:00 PM

Please let us know if you still need help with this topic otherwise I will close it in 7 days. Thanks!



#5 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 11 September 2013 - 04:12 PM

Dear Ellen, dear Jenny, I just set up DMS on a live site and will install Filtering tonight to see if this problem persists. Thank you for your patience! Yours faithfully, Jan.



#6 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 11 September 2013 - 05:08 PM

Dear Ellen,

 

I beg your pardon for addressing you as Sue. I even think of having read about someone else doing so in another Forum post a while back. The confusion must come from your website, perhaps because it sounds like one name and the Sue part there is in italics, although you give your full name everywhere. My apologies!

 

Thank you for your patience - I put DMS on a live site, installed Filtering and hey presto, it works a treat. Featured images and all. On my offline trial site I installed and uninstalled and installed again and could not get them - now there they are. What is more, I managed to find the CSS selectors and address these images, changing their border radius, with this code in the DMS Custom LESS/CSS menu:

 

.section-filtering .filtering .filtering-image img {

border-radius: 500px;
}
 
Wonderful - what a delight! I can see great things coming now! It is easily the most visually satisfying section of them all!
 
One thing I didn't manage was to address the Title/Excerpt - I could not find any CSS selectors that would work there (to make the excerpt centred or justified, for example). Or could this be achieved in the new "Standard Options - Styling Classes" panel in the Filtering backend? I couldn't work out what that does. But I'll not give up and continue learning. I am also trying to put a button in the excerpt field (for access to a modal with information). But I'll hack away at that for a while and will ask for your counsel only if I can't figure it out at all.
 
In the meantime, thanks for your labours and the care you give to those who enjoy their fruits. And my regards to your co-coder Susan. Now the names are clear in my mind even though I am thousands of miles away from you! Greetings from the Holy Land, yours faithfully Jan.


#7 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 11 September 2013 - 05:22 PM

P.S.: It is like real life, sharing your worries with someone goes a long way to work them out... I found the selectors, now I am CSS master of my visual destiny! And I can have a go at finding a way to get a button into the excerpt, perhaps a harder task but one to be approached with good cheer now that I have worked out something, and know of your support! Again, thank you! yours faithfully, Jan.



#8 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 11 September 2013 - 05:24 PM

P.P.S.: Here is the site, in all its Filtered glory: http://www.schulever...t.de/wordpress/



#9 ellenmva

ellenmva

    Advocate

  • Members

  • 256 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 12 September 2013 - 08:03 PM

@caspersjan Wow, it is looking great! Nice use of DMS and Filtering.

 

Ellen



#10 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 12 September 2013 - 08:29 PM

Dear Ellen, thank you for your kind words. It's only just the beginning! I think working with people who have to be inspiring in their everyday encounters helps, it certainly spurs me on in my efforts!

 

While I am practically talking to you I hope you don't mind if I ask something else: I am working on another page which introduces the librarians who take part in this programme, about forty five in total. With name and library (post title and excerpt) - displayed alphabetically by name and searchable by library. All very easy to do, and it would be beautiful! But in my mind's eye (unfettered as that is by practical constrictions) there is a button under the excerpt which I can click to access a link, ideally a modal with more info on the particular librarian, a little portfolio of their work etc.  I have done considerable reading over the past days (of the searching-for-a-pin-in-the-haystack kind, as I am no expert and don't know exactly what to look for) and it seems that this is difficult. I certainly have not found a straight forward tutorial that would show me what to do. 

 

You know your own handiwork inside out of course and must have come across all manner of implementations. Has anything like this ever been done? And do you think it could be done? Maybe it's impossible and I am just chasing a dream, and should look for another solution altogether. All I need is a nod of the head, or perhaps a pointer in some direction or other, so I know where best to invest my energies.

 

Thank you as ever for your work and support. Yours faithfully, Jan.



#11 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 13 September 2013 - 07:39 AM

Dear Ellen, an update: I have been waiting for betterdms.com to go live. It did today, and I see that you are part of the crew! Fair winds and following seas for your voyage - I shall await the exotic wares and stories you bring home from the distant shores of DMS coding with great anticipation. One of the first posts was by Nick Haskins, about "Infinite Loading". I had little idea what that meant and thought at first it was about infinite scrolling. But it is not - it's about the seamless opening up of posts with a press of a "More..." link. This might be the light I have sought at the end of the tunnel in question. I will try today if it works with your Filtering section. If I add a button to return me to the Filtering page, I may be home and dry before I know it!

I'll let you know of my progress. Yours faithfully, Jan.



#12 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 13 September 2013 - 09:00 AM

Dear Ellen, rolling news: I installed Nick's Load Posts plugin, shortened the excerpt and added "More..." caption within the editing panel of Filtering and it works nicely so far. Promising progress! I am still struggling with setting up some kind of button or link on the actual post page, but that's because I have not understood how posts are styled in DMS. As yet, as yet! I am sure I will in due time. So, for now I should not need to take up more of your time (unless you knew an easy way of making the "More..." link into a button, that is... 

Yours faithfully, Jan.



#13 ellenmva

ellenmva

    Advocate

  • Members

  • 256 posts
  • LocationMassachusetts
  • Country: Country Flag

Posted 13 September 2013 - 04:25 PM   Best Answer

Hi Jan,

 

We can make the More a button by adding a class to it. We are going to do that in the DMS Toolbar --> Custom Code --> Custom Scripts by adding this code:

 
<script>
jQuery(document).ready(function(){
			
   jQuery('.section-filtering .item-excerpt a').addClass('btn');		
});		
</script>

That is also going to put the ... in the button though too. I need to add a class to the More phrase so that doesn't happen. But first, let me know if that code worked in the Custom Scripts box.

 

Ellen



#14 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 13 September 2013 - 06:08 PM

Dear Ellen, 

you are a star! I am dizzy with so much goodwill and learning in one day! Studying CSS selectors and styles this afternoon I finally managed to put a line break into the post titles, something that had eluded me for months. That way I will be able to have the first name on one line and the family name on the second, so that long and short names don't disturb the symmetry... And now your code, entered in the DMS "Custom Scripts" editor, indeed created a class and subsequently a button. After I gathered that 'btn' stood for 'button' and the class selector would be .btn - common fare for you of course but veritable magic for me! - I was able to add styling with my newly acquired CSS confidence. Here is my oeuvre, in all its raw beauty:

 

.section-filtering .btn  {
background: green;
-moz-border-radius: 20px;
border-radius: 20px;
color: white;
word-spacing: 0px;
width: 125px;
height: 25px;
display: inline-block;
padding: 4px 10px 4px;
margin-bottom: 0;
font-size: 14px;
line-height: 20.7px;
}
 
Quite a lot of styling, but my previous tampering with "word-spacing" to achieve the line breaks in three of the items made it necessary to be specific so that all buttons would look the same. I gleaned the correct style values with the help of the inspector tool. Who says old dogs can't be taught new tricks?
I lost the hover effect though, it is there in your original button but must presumably be overruled by my styling. But I shall look into that and do some reading. It seems 95% of CSS tutorials are about some form of styling buttons, I am bound to find something. 
The ... is still there indeed. I did not quite understand how the adding of the class worked, or I would have tried myself to remove it. If you could point out the right way for me I'd be most grateful. But all in all, I am already elated! It feels as if I have just learned to ride the bicycle...
 
Thank you so much I shall have to make an Oscars-style addendum somewhere on the site to thank all the wonderful people who gave so freely of their time and wisdom.
 
Yours faithfully, Jan.


#15 caspersjan

caspersjan

    Super Member

  • Members
  • 125 posts
  • Country: Country Flag

Posted 17 September 2013 - 08:22 AM

Dear Ellen, I am slowly making rapid progress. And growing to like Filtering even more in the process! CSS is a miracle, I have just scratched the surface but it is so powerful. You can see my current draft here, a directory of librarians, filtered by districts:

http://www.schulever...ss/?page_id=250

Two selectors however have alluded me:

Firstly, whatever I try, I cannot manipulate the font size of the post title. I would have thought it should be .section-filtering .filtering .item .item-title but although the behaviour of elements below (the excerpt) suggests that something is happening (i.e. if I make font-size very small, they move up as if the font had become miniscule, when in fact it always stays the same). My reading suggests that something may be overriding my CSS commands, but I can't find what it is.

And secondly, I am trying to reduce the gutter (if that's what it's called) between rows when more than one row of posts is visible. I managed to reduce the top margin, toward the filtering categories, but have not found a way to address the space between rows.

If you have any hints, I'd be most grateful. I really tried all that I could find in the Chrome Inspector. But it's styling - the function is perfect!

Yours faithfully, Jan.

 

P.S.: (On another, though related note, I'd like to make a few suggestions for a super-charged Filtering section - it seems to me that a few additions would make it into an even more amazing section. But I shall think more carefully over this before I put pen to paper - to give you a pre-Filtered feedback rather than a rambling list of blue-sky-musings!)







Also tagged with one or more of these keywords: Filtering, Featured Images