Tagged: portfolio list
-
AuthorPosts
-
January 6, 2023 at 10:13 am #1377802
Dear team,
for our recruitment we have apps. 20 open positions – ea. position specified on a single page or portfolio item.On a regular basis we have to change/actualize for whom we are searching for (active) or or not (inactive).
On an overview page we show/teaser all open active jobs – like here: https://imgur.com/a/mONSuyA
My idea was to use portfolio entries for each job using using categories “active” or “non active”. And the overview page shall only show the active items
But with the “portfolio entries” function I can a not generate a list in order to. get something like on the screenshot (list with title & link only, but no image), right?
What is your recommendation to realize the a.m. result?
thx a lot & best regards Tilman
January 6, 2023 at 10:29 am #1377805Your idea seems to be good enough to fullfill your request.
Don’t know why you can’t choose only the active “category” ( it is a taxonomy )
Either in Portfolio Grid Element or even in blog-posts – there are options on that ( on blog-post you had to preselect the custom taxonomy option – then the “category” to show ( active one ).
Edit: you only had to toggle the active / not-active category – and you can do that fast on Quick Edit
January 6, 2023 at 10:42 am #1377806Hi @guenni007,
thx a lot for your fast info. Re taxonomy: Yes, thats clear and thats why I thought to use portfolio item with active/inactive category.The main question is still: How can I generate/ configure the list on the job overview page in order to get a result similar as in the screenshot? I did not find this in the “portfolio grid” options acc.
- This reply was modified 1 year, 10 months ago by oestersund.
January 6, 2023 at 11:16 am #1377818January 6, 2023 at 12:30 pm #1377830
@Guenni007 thx a lot – In terms of creating a portfolio entries list this is great. This was an alternative I did not think of.But the magazine list does not allow to customize colors with alternating background colors per entry in order to distinguish the entries better, right? At least I did not find a CSS or so acc.
-> I you have an idea, this would be great
And neither I did find a way to add a symbol (wich is not that important)
pls see: as is (magazine entries list via enfold) and shall be (current typo3 page) below: https://imgur.com/a/aSPiXtR
January 6, 2023 at 7:33 pm #1377885and what about the selectors with nth-of-child or even better nth-of-type :
#top .av-magazine-group .av-magazine-entry:nth-of-type(odd) { background: #eee; } #top .av-magazine-group .av-magazine-entry:nth-of-type(even) { background: #ccc; }
of if some brosers will have trouble with odd/even:
#top .av-magazine-group .av-magazine-entry:nth-of-type(2n) { background: #eee; } #top .av-magazine-group .av-magazine-entry:nth-of-type(2n+1) { background: #ccc; }
see at the bottom of that page: https://webers-testseite.de/portfolio/
PS : you can replace the img’s by entypo fontello icons.
January 7, 2023 at 12:12 pm #1377922@Guenni007: Vielen Dank, das kannte ich nicht – funktioniert :-)
Danke auch für den Link – Genauso brauche ich die Darstellung.-> Ein CSS um das Padding der einzelnen Einträge zu erhöhen habe ich probiert, aber nicht funktioniert – wie hast Du das gelöst?
-> Und wie bekomme ich die Icons dort hinein? In meiner MagazinListe mit den Portfolio items nehme ich die Titelüberschriften der Portfolio Einträge und das ist ja jeweils Text.Beste Grüße! Tilman
- This reply was modified 1 year, 10 months ago by oestersund.
January 7, 2023 at 1:18 pm #1377930Das sind meine CSS für die Seite :
#top.page-id-2623 .av-magazine-group .av-magazine-entry { padding: 10px; border-radius: 8px; } #top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n) { background: #eee; } #top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n+1) { background: #ccc; } #top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-content-wrap { border-bottom: none } #top.page-id-2623 .av-magazine header { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } #top.page-id-2623 .av-magazine-thumbnail-link { display: table; } #top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-thumbnail-link img { display :none } #top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-thumbnail .av-magazine-thumbnail-link:before { font-family: entypo-fontello; font-size: 40px; line-height: 50px; position: absolute; top: 0; left: 5px; width: 100%; height: 100%; display: block; } #top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n+1) .av-magazine-thumbnail .av-magazine-thumbnail-link:before { content: "\e80c"; color:#333 } #top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n) .av-magazine-thumbnail .av-magazine-thumbnail-link:before { content: "\e80b"; color:#666 }
- This reply was modified 1 year, 10 months ago by Guenni007.
January 7, 2023 at 1:23 pm #1377931Wenn du die Zeit ( av-magazine-time ) gerne mit drin hast , dann steht die leider über dem Title – daher habe ich die Position mittels jQuery getauscht.
Ich habe das Display: none mal wieder rausgenommen auf der Beispielseite, damit du siehst was ich meine:function change_position() { if(is_page(2623)){ ?> <script> window.addEventListener("DOMContentLoaded", function () { (function($){ $('.entry-content-header').each(function() { var movedElement = $(this).find('.av-magazine-title.entry-title'); var targetElement = $(this).find('.av-magazine-time'); if(targetElement.length){ $(movedElement).insertBefore($(targetElement)); }; }); })(jQuery); }); </script> <?php } } add_action('wp_footer', 'change_position');
eventuell wäre es sogar besser, das als child-theme magazine.php zu fahren. Und die av-magazine-time dort unterhalb des titles zu setzen.
January 7, 2023 at 2:37 pm #1377940@Guenni007: Besten Dank, da gucke ich gern, was davon für mich relevant ist / funktioniert.
Schönes WE!
-
AuthorPosts
- You must be logged in to reply to this topic.