Skip Navigation

[Resolved] Home Page set-up using Divi and Toolset

This support ticket is created 6 years, 9 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 32 replies, has 2 voices.

Last updated by Christian Cox 6 years, 8 months ago.

Assisted by: Christian Cox.

Author
Posts
#619768

Hi,

I'm using Toolset for the first time with my Divi sites.

I've created the custom post types for the core project but I do not understand how to integrate Toolset with the home page where I would like to display a single large-scale "Featured image" a logo and descriptive text (all uploaded using a single admin form) along with a front-end site search form.

Does the Homage Page need to be created as a Post Type to achieve this?

#619801
Screen Shot 2018-02-26 at 3.41.07 PM.png

I do not understand how to integrate Toolset with the home page where I would like to display a single large-scale "Featured image" a logo and descriptive text (all uploaded using a single admin form) along with a front-end site search form.
There are several ways this can be accomplished. Let's assume you have chosen the setting "Your homepage displays: A static page" in WP Admin > Settings > Reading. Your main site homepage will show the contents of the static Page you select there. If you want to show a large featured image, you can save that image in the standard Featured Image field for this static page. If you want to show some descriptive text, then you can add that text to the page's main content. Then you can insert those values in a Content Template applied to the Homepage, or in a Divi Builder Text Module, using the Fields and Views button (see attached). If that works for your needs, the Homepage does not need to be a custom post type. It can be a standard Page.

If that does not work for your needs, I'll need some more information. What exactly do you want to show on the Homepage, and why will Featured Image and post content not work?

#619874
jz hp rev 1.jpg
jz wdp rev 1.jpg

Thanks for responding. I'll try to provide a bit more detail.

I would like to use Toolset and Divi to create a similar Homepage layout as shown here: hidden link

1. Enable the site admin to change the cover image, title and Details Page URL hopefully by using a front-end form to submit the changes.

2. As for the use of the "Featured Image" can the same image be used to populate:

1. The Home Page image, if selected

2. The Search Results thumbnail (in full image aspect ratio)

3. The Details Page Image that appears on the following page: hidden link

Currently, the static Project post type pages, as shown here: hidden link use the "Featured Image" to populate a thumbnail image for the linked page in the static portfolio Gallery pages which will hopefully be replaced by a Toolset enabled search.

#620190

I would like to use Toolset and Divi to create a similar Homepage layout as shown here: hidden link;
Okay great, if you intend to use Divi then the overall structure of the page should be created in the Divi Builder. It looks like a single row with two columns. Then you can add Text Modules in each column, and insert your images and text in these text modules. I will be glad to show you how to use any Views or Types shortcodes to display a page's featured image, contents, taxonomies or custom fields. So my advice here is to create the layout first in Divi Builder using static images and static text in Text Modules, then I can show you how to integrate Views or Types shortcodes to replace that static data with dynamic data from the Page.

2. As for the use of the "Featured Image" can the same image be used to populate:
- The Home Page image, if selected
- The Search Results thumbnail (in full image aspect ratio)
- The Details Page Image that appears on the following page:

Yes, Views Shortcodes can be used to display the featured image of a post at various sizes, including your own custom sizes. We have documentation for that shortcode available here: https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-post-featured-image

#620210

Outstanding. Thank you.

To begin, the current site has 829 static "Project" post type pages, (Paintings, eCollages, and Collages combined) are currently created and managed individually.

Using Toolset Types I created custom post types for Paintings, eCollage, and Collage.

I'm attempting to transform the existing site installation into a Toolset search site without creating a new staging installation.

Is it possible to transfer the existing "Project" posts to the new custom post types and assimilate the existing 829 static project page posts into the new Toolset format -or- will the data for the 829 existing posts need to be re-entered via the Toolset form?

#620251

There's not an easy way to switch between existing post types in the wp-admin area. Some other plugins claim to give you the ability to do this in a batch edit process, but I cannot say for sure whether or not they work well. Here's an example: https://wordpress.org/plugins/post-type-switcher/

Another option is to use a custom SQL query to manipulate the post type slug of each of these posts, directly in the database. Example: https://wpsites.net/wordpress-admin/use-sql-query-in-phpmyadmin-to-change-custom-post-types/

A third option is to export your posts, then use Notepad++, Sublime Text, or another basic text editor to modify the post type slugs as desired, then re-import these posts. However, since the post IDs change in this approach, any custom fields attached to the original post will no longer be attached to the new post.

In any case, be sure to make a full site backup before attempting any modifications like this.

#621747

As you suggested, I'm creating templates for the Home and custom post type pages.

Are all Divi modules and sections compatible with Toolset, or is just the Text Module?

The following page was created with the Specialty Sections with the image loaded as a text Module: hidden link

If we changed to a Fullwidth Section and Fullwidth Header Module with the image uploaded as the Header Image URL and the text entered as Content as in the following example: hidden link

Regardless of the final layout, I would like to be able to change the Image and Content on the Home Page from the front-end using Access.

#621876

Are all Divi modules and sections compatible with Toolset, or is just the Text Module?
I don't know of any Divi modules or sections that are incompatible with Toolset per se, but some are more or less flexible than others, and some provide more or less integration with Toolset. The Text module allows you to insert Toolset shortcodes using the Fields and Views button - this is the method I'm most familiar with. Other Divi modules may not provide the ability to insert shortcodes into their input fields using the Fields and Views button. You may be able to place the shortcode by typing it manually, or the Divi module may not allow shortcodes at all. I'm not really qualified to answer which input fields in Divi modules will or will not accept shortcode values, since that's all controlled by their software.

#621881

Thank you for the input.

I can see the Text Module being used in most cases. However, I am specifically hoping that being able to input the shortcode into the Image Module so I can enable the "Open In Lightbox" display feature for featured image pop-up enlargement.

I hope Divi Image Modules will accept that shortcode and Toolset will be compatible with the Lightbox pop-up functionality.

I have posted the question to Elegant Themes support and I will update this ticket with their reply.

Thank you.

#622666

Great, I will mark this ticket as pending an update from you. No need to reply right now. The ticket will remain open for 30 days.

#623042

Hello,

Thank you for your patience. Moving forward, it's important to specify that my admin users will want to perform the majority, if not all, of their content management from the front-end of their website. I created the following Divi pages as templates:

The first will be the custom post type display (in this project: painting, ecolage, and collage)
hidden link

The following three is based on a single layout where each displays a unique featured image shape (landscape, square, and portrait).

hidden link

hidden link

hidden link

I noticed the module code: {!{types field='profile-image' alt='%%ALT%%' title='%%TITLE%%' size='full' align='center'}!}{!{/types}!}

Will size='full' align='center enable me to set a fixed max size for the display image such as in /home-alt-2, /home-alt-3, and /home-copy-2 ? If so, this would eliminate the issue of client's adding photos to the media gallery that may be larger than necessary.

#623057

Will size='full' align='center enable me to set a fixed max size for the display image such as in /home-alt-2, /home-alt-3, and /home-copy-2 ?
The Divi theme already has this style in place:

img { max-width: 100%; }

This means that no image will extend beyond the width of its container. So you wouldn't need to worry about the image extending horizontally to break your design. If you want to use a set max width that is narrower than the container, then you must add another wrapper element around the image, with the appropriate width applied to the wrapper. The image will adjust to fill it horizontally.

#623086

I'm not entirely clear on this yet, but I hope it will fall into place as I go.

The three homepage samples I attached before each show unique spacing requirements top to bottom and left to right.

Each of the three homepage samples and the profile page sample all have featured images which I customized in the gallery to 640px in height. I have no way to control what size image a client will try to use, which more commonly will come from a smartphone. I want easy to upload for the client without having to alter image settings on the back-end.

If I can automate container-width x 640px somewhere in the system, that would be perfect.

#623105

Well if you don't want to require specific image height and width dimensions when the User uploads their image, then resizing on the front-end needs controlled by you using markup and CSS. If you change the featured image in your mockup to be much larger than the available size, your site's CSS must be designed to automatically resize that large image to fit in the available space. If you change the featured image to be much smaller, then your site must be able to automatically center that smaller image correctly in the available space.

This is the first part of the problem you must solve, because the Types field shortcode does not provide options for "max-height" or "max-width" or options to resize other site elements' height, width, margins, or padding, etc. Once your template can handle any size image, then you can integrate the Types field shortcode into the responsive design using size="full", so the largest, highest quality image is always used.

#623111

Thank you for sharing this information. I understand some of what you describe. But I will have to proceed and learn while doing. I assume that I can count on Divi Builder for a lot of that work-flow and hopefully I can get the CSS help along the way.

If you don't see this as a fatal way to proceed, I am going to proceed and try to build-out the page templates previously provided with Toolset.