-
AuthorPosts
-
August 23, 2024 at 9:46 am #1465218
Hi,
I have another question about a closed thread. Here is the link:According to the snippet I have another question.
Is it possible:
1. label the colored bar?
2. to link the colored bar?
If so, do both go together?I now need this for another website.
Thank you and best regards, Daniela
August 25, 2024 at 4:13 pm #1465356Hey beyond-flora,
Try this code:function garden_progress_bars_shortcode($atts) { $atts = shortcode_atts( array( 'pre_cultivation_start' => '', 'pre_cultivation_end' => '', 'planting_start' => '', 'planting_end' => '', 'harvest_start' => '', 'harvest_end' => '', 'pre_cultivation_color' => '', 'planting_color' => '', 'harvest_color' => '', 'pre_cultivation_label' => '', 'planting_label' => '', 'harvest_label' => '', 'pre_cultivation_link' => '', 'planting_link' => '', 'harvest_link' => '', ), $atts, 'garden_progress_bars' ); $output = ' <style> .garden-progress-bars { font-family: Arial, sans-serif; max-width: 960px; margin: 0 auto; } .progress-header, .progress-header div:not(.header-offset) { display: inline-flex; width: 100%; justify-content: space-evenly; } .progress-header div:not(.header-offset) { border-left: 1px solid #eee; } .month { width: calc((100% - 160px)/12); text-align: center; } .progress-row { display: flex; align-items: center; margin-bottom: 10px; } .label-container { width: 150px; text-align: right; padding-right: 10px; } .progress-container { display: flex; width: calc(100% - 160px); align-items: center; } .progress-bar-container { flex-grow: 1; background-color: #000; height: 20px; position: relative; } .progress-bar { height: 100%; position: absolute; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; font-size: 12px; text-align: center; } .progress-header .header-offset { width: 150px; display: inline-flex; flex-shrink: 0; } </style> <div class="garden-progress-bars"> <div class="progress-header"> <div class="header-offset"></div>'; $months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; foreach ($months as $month) { $output .= "<div class='month'>$month</div>"; } $output .= '</div>'; $create_progress_bar_row = function($label, $color, $start, $end, $link) use ($months) { $start_month_index = array_search($start, $months); $end_month_index = array_search($end, $months); $width = (($end_month_index - $start_month_index + 1) / 12) * 100; $left = ($start_month_index / 12) * 100; $bar_content = "<div class='progress-bar' style='background-color: $color; width: $width%; left: $left%;'>$label</div>"; if ($link) { $bar_content = "<a href='$link' target='_blank' style='display: block; height: 100%;'>$bar_content</a>"; } return " <div class='progress-row'> <div class='label-container'>$label</div> <div class='progress-container'> <div class='progress-bar-container'> $bar_content </div> </div> </div>"; }; $output .= $create_progress_bar_row($atts['pre_cultivation_label'], $atts['pre_cultivation_color'], $atts['pre_cultivation_start'], $atts['pre_cultivation_end'], $atts['pre_cultivation_link']); $output .= $create_progress_bar_row($atts['planting_label'], $atts['planting_color'], $atts['planting_start'], $atts['planting_end'], $atts['planting_link']); $output .= $create_progress_bar_row($atts['harvest_label'], $atts['harvest_color'], $atts['harvest_start'], $atts['harvest_end'], $atts['harvest_link']); $output .= '</div>'; return $output; } add_shortcode('garden_progress_bars', 'garden_progress_bars_shortcode');
and this shortcode on your page:
[garden_progress_bars pre_cultivation_start="Jan" pre_cultivation_end="Mar" pre_cultivation_color="green" pre_cultivation_label="Pre-cultivation" pre_cultivation_link="https://example.com/pre-cultivation" planting_start="Apr" planting_end="Jun" planting_color="blue" planting_label="Planting" planting_link="https://example.com/planting" harvest_start="Jul" harvest_end="Sep" harvest_color="orange" harvest_label="Harvest" harvest_link="https://example.com/harvest" ]
Each bar will be a link with a new label:
Best regards,
MikeAugust 26, 2024 at 11:53 am #1465408Hey Mike,
that’s fantastic! Thank you very much!One more question: Would it also be possible to store two periods in the “planting” line, for example?
Example: April – June and Sep – Oct? So, that 2 or 3 bars are deposited?Thank you for your support,
DanielaAugust 26, 2024 at 4:47 pm #1465424Hi,
Unfortunately, that would cause an issue with the links, could you use another bar?Best regards,
MikeAugust 26, 2024 at 5:40 pm #1465436Hi Mike,
thank you! I almost thought so… I can also put all the products on top of each other… it will just take a long time.A customer of ours would like to have an article overview on a website. Please link every product. Do you have any other ideas on how I can implement this?
August 27, 2024 at 5:03 pm #1465502Hi,
Thanks for the screenshot it helps me understand better, this might work better for you as a image map. Try uploading your image and select the bars, and add the link.
then click “show me the code”
then copy the code and paste into a code block elementBest regards,
MikeSeptember 3, 2024 at 8:21 am #1466087Hi Mike
Thank you very much for the tip and recommendation for the tool. I have now found another solution and used a plugin.Do you have experience with the plugin? Could there be conflicts with this?
So far everything is going well and the operation is okay too.
Thank you again and kind regards,
DanielaSeptember 3, 2024 at 4:59 pm #1466149Hi,
Glad to hear that you found a plugin, I have not used it and I only found an old issue from 2018 with it, probably not an issue anymore.
Shall we close this thread then?Best regards,
MikeSeptember 4, 2024 at 11:46 am #1466203Hi Mike,
perfect – thank you very much for your report and your feedback. A great support!
Yes, the topic can be closed.Thank you very much, Daniela
-
AuthorPosts
- The topic ‘Seasonal calendar – further’ is closed to new replies.